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