html5 小游戏 demo

原创 2013年06月01日 00:14:03

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



开发环境 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


如果你发现有什么不合理的,需要改进的地方,请留言。或者可以通过 328452421@qq.com 联系我,非常感谢。

html5游戏开发-弹幕+仿雷电小游戏demo

本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。本篇文章详细讲解如何用html5来开发一款射击游戏,雷电可以说是射击游戏中的经典,下面就来模仿一下。先看一下游戏截图演示地址h...

HTML5小游戏飞机大战

  • 2017年12月10日 17:34
  • 3.47MB
  • 下载

HTML5开心消消乐小游戏

  • 2017年10月27日 20:43
  • 2.05MB
  • 下载

如何利用HTML5快速开发一款小游戏

如何利用HTML5开发一款小游戏?Cocos2d-js是一款流行的H5游戏开发框架,介绍Cocos2d-js的核心技术和使用方法,学完以后可以独立开发一款休闲游戏,主要介绍cocos2d-js中的图层...
  • ccnanxi
  • ccnanxi
  • 2016年11月11日 11:05
  • 371

HTML5兔子吃月饼手机小游戏

  • 2016年08月26日 15:11
  • 370KB
  • 下载

html5小游戏

  • 2015年10月22日 19:53
  • 853KB
  • 下载

html5--用cavas做一个小游戏

无标题文档 开始游戏 // JavaScript Documentvar canvas; var context; var speedX=5; var speedY=5; var ...

html5小游戏源码(6)

  • 2016年04月27日 09:59
  • 382KB
  • 下载

html5小游戏 接水果

  • 2013年09月18日 16:23
  • 5.59MB
  • 下载

github上的一个html5俄罗斯方块小游戏做了些简化

html 俄罗斯方块 --> --> html, body { background: #3b3d3b; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 小游戏 demo
举报原因:
原因补充:

(最多只允许输入30个字)