html5 手把手教你做游戏《熊和蘑菇》(六)

wjlgryx

预期达到的效果：http://www.html5china.com/html5games/mogu/index5.html
由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置
一、需要到的全局变量
JavaScript Code复制内容到剪贴板
1.var flowerImg = new Image();//奖品鲜花   
2.var leafImg = new Image();//奖品叶子   
3.var acornImg = new Image();//奖品橡子   
鲜花图片下载：http://www.html5china.com/html5games/mogu/images/flower.png
叶子图片下载：http://www.html5china.com/html5games/mogu/images/leaf.png
橡子图片下载：http://www.html5china.com/html5games/mogu/images/acorn.png
二、初始化托全局变量
JavaScript Code复制内容到剪贴板
1.  //加载图片      
2.  function LoadImages()      
3.  {      
4.      mushroomImg.src = "images/mushroom.png";//蘑菇      
5.      backgroundForestImg.src = "images/forest1.jpg";//森林背景图     
6.      bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的   
7.      flowerImg.src = "images/flower.png";//奖品花   
8.      acornImg.src = "images/acorn.png";//奖品橡子   
9.      leafImg.src = "images/leaf.png";//奖品叶子   
10.  
11.      mushroom.image = mushroomImg;      
12.      animal.image = bearEyesClosedImg;   
13.  }   

三、定义奖品数据及实例
JavaScript Code复制内容到剪贴板
1.//定义奖品数组Prizes和对象Prize，继承游戏对象GameObject   
2.var prizes = new Array();   
3.function Prize() {};   
4.Prize.prototype = new GameObject();//继承游戏对象GameObject   
5.Prize.prototype.row = 0;//奖品行位置   
6.Prize.prototype.col = 0;//奖品列位置  
四、把奖品装进数组
JavaScript Code复制内容到剪贴板
1.//创建奖品数组   
2.function InitPrizes()   
3.{   
4.    var count=0;   
5.    //一共3行   
6.    for(var x=0; x<3; x++)   
7.    {   
8.        //一共23列   
9.        for(var y=0; y<23; y++)   
10.        {   
11.            prize = new Prize();   
12.            if(x==0)   
13.                prize.image = flowerImg;//鲜花放在第一行   
14.            if(x==1)   
15.                prize.image = acornImg;//豫子刚在第2行   
16.            if(x==2)   
17.                prize.image = leafImg;//叶子放在第3行   
18.                  
19.            prize.row = x;   
20.            prize.col = y;   
21.            prize.x = 20 * prize.col + 10;//x轴位置   
22.            prize.y = 30 * prize.row + 20;//y轴位置   
23.            //装入奖品数组，用来描绘   
24.            prizes[count] = prize;   
25.            count++;   
26.        }   
27.    }   
28.}  
五、从数组中取出奖品并描绘
JavaScript Code复制内容到剪贴板
1.//绘制奖品，把奖品显示在画布上   
2.function DrawPrizes()   
3.{   
4.    for(var x=0; x<prizes.length; x++)   
5.    {   
6.        currentPrize = prizes[x];   
7.        ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);   
8.    }   
9.}  
六、在游戏循环GameLoop()中加入描绘奖品的函数，如下
JavaScript Code复制内容到剪贴板
1.  function GameLoop()      
2.  {      
3.      //清除屏幕      
4.      ctx.clearRect(0, 0, screenWidth, screenHeight);      
5.      ctx.save();      
6.      //绘制背景      
7.      ctx.drawImage(backgroundForestImg, 0, 0);      
8.      //绘制蘑菇      
9.      ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);   
10.//绘制奖品   
11.DrawPrizes();         
12.//绘制熊   
13.//改变移动动物X和Y位置   
14.animal.x += horizontalSpeed;   
15.animal.y += verticalSpeed;   
16.//改变翻滚角度   
17.animal.angle += bearAngle;   
18.//以当前熊的中心位置为基准   
19.        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));   
20.//根据当前熊的角度轮换   
21.    ctx.rotate(animal.angle * Math.PI/180);   
22.//描绘熊   
23.    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));   
24.  
25.      ctx.restore();   
26.//检测是否碰到边界   
27.HasAnimalHitEdge();   
28.//检测熊碰撞蘑菇   
29.HasAnimalHitMushroom();   
30.  
31.      }