HTML5 game demo

HTML5 very fire, write an HTML5 game to play it, think of cocos2d seems to have all platforms, find online, download a Cocos2d-html5 engine package.

It seems that another open-source engine, lufylegend. JS, is also very good. Use lufylegend. js next time.

Development Environment chrome Cocos2d-html5

Game address: http://hehe108.sinaapp.com/cocos2d/

(Adsw press Enter)

The implementation method is as follows:
1. Create a subclass of layergradient (containing tank bullets)
2. Rewrite the onenter method to add some basic buttons and some initial tanks and bullets.
3. The schedule method is used to control the re-painting of tank bullets.
4. determine the direction of the tank based on the keyboard buttons (aswd), and modify the X and Y axis coordinates of the tank based on the direction of the tank to move the tank.
5. Use the CC. rectintersectsrect function to perform collision detection, so that the bullet strikes the tank.

Code

1. Add a direction to the Project

VaR direction = {L: 0, u: 1, D: 2, R: 3, stop: 4 };

2. Add the attributes of the bullet class

Speed: 10, width: 15, height: 15, X: NULL, Y: NULL, Dir: NULL, live: True, tankclient: NULL, // reference of tankclient of layergradient subclass good: NULL,

3. Bullet initialization and re-painting

    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. How to add a bullet to combat tanks

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. Add tank-related attributes

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 initialization and repainting in the tank class

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); // rotate the sprite to control the barrel direction 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 method of issuing bullets

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. Add layergradient to the tank

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. Call the method of bullet hitting the tank in 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. Code for controlling tank mobile shooting

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

11. Merge and compiler with ant and compiler to compress JS and then release it to sae

Code download: http://download.csdn.net/detail/xiaoxiao108/5539139

If you find anything unreasonable and need improvement, leave a message. Or you can contact me via 328452421@qq.com. Thank you very much.