首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-11-13 
html5 手把手教你做游戏《熊和蘑菇》(七)第七回主要讲熊撞到奖品之后,奖品消失预期达到的效果:http://www.ht

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复制内容到剪贴板
第七回讲完,整个游戏功能的大概框架已经出来了,成功就在眼前~
后面我们的任务就是去完善这个简陋的游戏,比如说加开始按钮、熊的生命数、显示得分、奖品被碰到后旋转再消失、蘑菇被碰到后颤抖几下、音乐等等
讲到这了,相信大家已经对整个游戏的功能、流程差不多了解了。后面的回合就不讲那么详细了,浪费大家的时间是吧~
第八回,开始完善游戏,加开始按钮、生命数、现实得分

热点排行