[Cson original] HTML5 game tank support team released

Function Description:

This game is essentiallyTank wars + push boxes. Players can control tanks and deliver materials to the destination while fighting the enemy. There are three levels in total.

Following the last HTML5 game demo HTML5 super Mary game demo, this game added more elements and enhanced playability. This game is also based on my HTML5 game framework cngamejs.

GamesNote: The Arrow keys on the upper left and right control movement, space keys launch shells, and push all material boxes () to the destination () to pass through.

CodeAnalysis:

Since the game has several levels, Let's first look at the level manager if it manages each level:

 

 /*  Level Manager  */ 
 VaR Levelmanager = ( Function (){
VaR Optionsobj = {}; //  All level parameter objects  
      Return {
Add: Function (Levelobj, gameobj ){
 VaR Srcarr = [];
 For (Name In Levelobj. srcobj ){
 If (Levelobj. srcobj. hasownproperty (name )){
Srcarr. Push (levelobj. srcobj [name]);
}
}
 VaR Opt = optionsobj [levelobj. level] = {};
Opt. gameobj = gameobj;
Opt. srcarray = srcarr;
Opt. startoptions = levelobj. startoptions || {};
Opt. startoptions. mapmatrix = levelobj. mapmatrix;
Opt. startoptions. srcobj = levelobj. srcobj;
Opt. startoptions. Level = levelobj. level;
},
Startlevel: Function (Num ){
 VaR OP = optionsobj [num];
Cngame. loader. Start (op. gameobj, OP );
}

}

})();

In the initialization phase,First, we create the object of each level, and then call the add method to add the object to the level manager. Then we can call startlevel to start the level.. This makes it easy for us to jump in each level later. In addition, the game objects used by each level can also be passed in here. In this game, because the logic of each level game is basically the same, the same game object is used. The starting interface of the game uses another game object. The organization of each game object is as follows:

 

VaRGameobj = {

Initialize:Function(Options ){//Initialization
},
Update:Function(){//Update
},
Draw:Function(){//Draw
}

}
 

Next, let's take a look at the specific initialization function of the game object gameobj:

 

         /*  Initialization  */ 
Initialize:Function (Options ){
Srcobj = options. srcobj;
 This . Level = options. level;
 This . Enemybeg.pdf = options. enemybeg.pdf;
 This . Enemybeginy = options. enemybeginy;
 This . Map = New Cngame. Map (options. mapmatrix, {cellsize: [40, 40]});
 This . Goods = [];

Cngame. Input. preventdefault (["Left", "right", "up", "down"]);
For ( VaR I = 0, Len = options. goodsarr. length; I <Len; I ++ ){
 This . Goods. Push ( New Goods ({SRC: srcobj. goods, width: 40, height: 40, X: options. goodsarr [I]. x, Y: options. goodsarr [I]. y }));
Cngame. spritelist. Add ( This . Goods [ This . Goods. Length-1]);
}

 This . Player = New Player ({SRC: srcobj. Player, width: 40, height: 40, X: 40, Y: cngame. Height-80 });
Cngame. spritelist. Add ( This . Player );
 VaR Newenemy = New Enemy ({SRC: srcobj. Enemy, width: 40, height: 40, X: This . Enemybeginx, Y: This . Enemybeginy });
Newenemy. getrandomdir (dirarr );
Cngame. spritelist. Add (newenemy );
}

In the initialization function, the parameters we need to initialize include: Map object, material array, player object, and enemy object. Map Objects can use the map of cngamejs, while players and enemy objects inherit the sprite of cngamejs.

In each update of gameobj, we need to determine whether all material objects are in place. If yes, we can jump to the next level.

 

If(_ Map. ismatchcell (_ goods) & (_ map. getposvalue (_ goods) = 3 )){//Determine whether all materials have arrived at the destination
Finishednum + = 1;
If(Finishednum ==_goodsarr. Length ){
This. Tonextlevel ();
}
}
 

In addition, in each update, you also need to determine whether a bullet hits the enemy, hits the player, or supplies:

 

 
If(Isgoods (list [J]) | (isenemy (list [J]) & list [I]. from = "Player") | (isplayer (list [J]) & list [I]. from = "enemy ")){}
 

If an enemy or player is hit, the corresponding object is deleted from the spritelist, so that the object will not be updated and drawn next time.In addition, each time a bullet hits an object, a spritesheet explosion animation is generated.:

 

/*Animation effects after hitting*/
Bullet. Prototype. Explode =Function(){
VaRSelf =This;
This. Isexploding =True;
VaRSpritesheet =NewCngame. spritesheet ("boom", srcobj. Boom, {width: 280, height: 40, framesize: [], frameduration: 40, onfinish:Function() {Self. isdisappear =True}});
This. Setcurrentanimation (spritesheet );
This. Speedx = 0;
This. Speedy = 0;
}
 

The spritesheet image of the animation is as follows:

The generated animation is used to draw the image on the canvas from different locations each time.For details about spritesheet animation, see: HTML5 game framework cngamejs development record: animation.

In addition, unlike the last game Super Mario, the game is map-type. Therefore, at the beginning of the game, you need to design and draw maps. A map is generated using a two-dimensional matrix. For example, the two-dimensional matrix corresponding to the first-level game map is as follows:

 

 /*   map matrix: 0. open Space 1. wall 2. stone 3. destination 4. enemy base   */ 
 mapmatrix: [
, ,], 
 [,], 
, ,], 
 [,], 
, ,], 
 [,], 
 [,], 
, ], 
 [,], 
, ,], 
 [,], 
, 1, 1, 1, 1] 
] 

For details about how map objects in cngamejs generate maps and provide common interfaces, referArticle: HTML5 game framework cngamejs development record (MAP)

 

Download cngamejs game framework and game source code: click here

PS: some images are from tank wars online.

Welcome to reprint, please indicate the source: http://www.cnblogs.com/Cson/archive/2012/02/18/2357323.html