html5 小游戏 demo

html5 挺火，写个html5游戏玩玩吧，想起cocos2d 貌似各个平台都有，网上找了找，下载了个Cocos2d-html5引擎包。

貌似另一个开源引擎lufylegend.js也很好，下次用用lufylegend.js试试。


开发环境 chrome   Cocos2d-html5 

游戏地址：http://hehe108.sinaapp.com/cocos2d/

（adsw回车）

实现方法如下
1.创建好 LayerGradient的子类 （里面放坦克子弹）
2.重写 onEnter 方法添加一些基本按钮 跟一些初始坦克，子弹
3.通过schedule方法 控制 坦克 子弹的重画
4.根据键盘按键（ASWD）确定出坦克的方向，根据坦克的方向修改坦克的X，Y轴坐标，来实现坦克的移动
5.通过cc.rectIntersectsRect函数来进行碰撞检测，实现子弹打击坦克

具体代码

1.在项目里面添加方向

var Direction = { L:0, U:1, D:2, R:3, STOP:4 }; 

2.添加子弹类的相关属性

SPEED:10,
WIDTH:15,
HEIGHT:15,
x:null,
y:null,
dir:null,
live:true,
tankClient:null, //LayerGradient子类TankClient 的引用
good:null,

3.子弹初始化，重画

    ctor:function (x,y,good,dir,tankClient) {
        cc.associateWithNative( this, cc.Sprite );
this.x=x;
this.y=y;
this.dir=dir;
this.tankClient=tankClient;
this.good=good;
this.initWithFile(s_missile);
this.setPosition( cc.p(this.x, this.y) );
this.tankClient.addChild(this);
    },
Draw:function(){
if(!this.live){
            this.tankClient.removeChild(this, true);
            return; 
}
this.setPosition( cc.p(this.x, this.y) );
this.Move();
},

4.添加子弹打击坦克的方法

HitTank:function(t){
if (cc.rectIntersectsRect(this.GetRectangle(), t.GetRectangle()) && t.live && this.live && this.good != t.good){
            t.live = false;
            this.live = false;
            return true;
        }
        return false;
},

5.添加坦克类相关属性

SPEED:5,
WIDTH:58,
HEIGHT:58,
x:0,
y:0,
l:false,
u:false,
r:false,
d:false,
dir:Direction["STOP"],
ptDir:Direction["D"],
tankClient:null,
good:null,
step:0,
live:true,

6.在tank类中 坦克初始化，重画

    ctor:function (x,y,good,tankClient) {
        cc.associateWithNative( this, cc.Sprite );
this.x=x;
this.y=y;
this.tankClient=tankClient;
this.good=good;
if(good){
        this.initWithFile(s_tank);
}else{
this.initWithFile(s_enemy);
}
this.setPosition( cc.p(this.x, this.y) );
this.tankClient.addChild(this);
    },
Draw:function(){
        if (!this.live){
            if (!this.good){
                this.tankClient.removeChild(this, true);
            }
            this.tankClient.removeChild(this, true);
            return; 
        }
this.setPosition( cc.p(this.x, this.y) );
        switch (this.ptDir)
        {
            case Direction["D"]:
                this.setRotation(0); //旋转精灵控制 炮筒方向
                break;
            case Direction["U"]:
                this.setRotation(180); 
                break;
            case Direction["L"]:
                this.setRotation(270); 
                break;
            case Direction["R"]:
                this.setRotation(90); 
                break;
        }
this.Move();
},

7.tank发子弹的方法

Fire:function()
{
if(!this.live) return null;
for(var i=0;i<this.tankClient.missiles.length;i++){
var m = this.tankClient.missiles[i];
if (m.live == false){
m.x=this.x;
m.y=this.y;
m.live=true;
m.dir=this.ptDir;
m.good=this.good;
this.tankClient.addChild(m);
return m;
}
}
var missile=new Missile(this.x,this.y,this.good,this.ptDir,this.tankClient);
this.tankClient.missiles.push(missile);
return missile;
}, 

8.LayerGradient加入坦克

this.tanks = [];
this.myTank = new Tank(60,20, true, this);
        for (var i = 0; i < 10; i++){
this.tanks.push(new Tank(50 + 70 * (i + 1), 420, false, this));
        } 

9.LayerGradient中调用子弹打击坦克的方法

for(var i=0;i<this.missiles.length;i++){
var m = this.missiles[i];
            m.HitTank(this.myTank);
            m.HitTanks(this.tanks);
m.Draw();
}

10.控制坦克移动射击的部分代码

    onKeyUp:function(key) {
this.myTank.KeyReleased(key);
    },
    onKeyDown:function(key) {
this.myTank.KeyPressed(key);
    }

11.用Ant和compiler合并压缩js后发布到sae

代码下载：http://download.csdn.net/detail/xiaoxiao108/5539139

如果你发现有什么不合理的，需要改进的地方，请留言。或者可以通过 [email protected] 联系我，非常感谢。