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. }