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

预期达到的效果：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.       }