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

第七回主要讲熊撞到奖品之后，奖品消失
预期达到的效果：http://www.html5china.com/html5games/mogu/index6.html
简单说下原理：
给奖品加上一个存是否被撞过的属性hit，默认值为false。当奖品撞到的时候。改变hit的值为true。描绘奖品的时候判断hit值是否有没撞到，被撞到的话就不描绘
一、给奖品加hit属性
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;//奖品列位置
7. Prize.prototype.hit = false;//是否被撞过
二、熊撞到奖品事件
JavaScript Code复制内容到剪贴板
1. //撞到奖品
2. function HasAnimalHitPrize()
3. {
4. //取出所有奖品
5. for(var x=0; x<prizes.length; x++)
6. {
7. var prize = prizes[x];
8. //假如没有碰撞过
9. if(!prize.hit)
10. {
11. //判断碰撞
12. if(CheckIntersect(prize, animal, 0))
13. {
14. prize.hit = true;
15. //熊反弹下沉
16. verticalSpeed = speed;
17. }
18. }
19. }
20. }
三、在描绘奖品函数中加如判断是否有被碰撞 if(!prize.hit) ，没被撞过，则描绘出来
JavaScript Code复制内容到剪贴板
1. //撞到奖品
2. function HasAnimalHitPrize()
3. {
4. //取出所有奖品
5. for(var x=0; x<prizes.length; x++)
6. {
7. var prize = prizes[x];
8. //假如没有碰撞过,则描绘在画布上
9. if(!prize.hit)
10. {
11. //判断碰撞
12. if(CheckIntersect(prize, animal, 0))
13. {
14. prize.hit = true;
15. //熊反弹下沉
16. verticalSpeed = speed;
17. }
18. }
19. }
20. }
到此第七回的完整代码如下：
展开XML/HTML Code复制内容到剪贴板
第七回讲完，整个游戏功能的大概框架已经出来了，成功就在眼前~
后面我们的任务就是去完善这个简陋的游戏，比如说加开始按钮、熊的生命数、显示得分、奖品被碰到后旋转再消失、蘑菇被碰到后颤抖几下、音乐等等
讲到这了，相信大家已经对整个游戏的功能、流程差不多了解了。后面的回合就不讲那么详细了，浪费大家的时间是吧~
第八回，开始完善游戏，加开始按钮、生命数、现实得分