Sample code sharing for the HTML5 game 'Tank Support Team'

Function description:

This game is essentially tank battle + push box. The player controls the tank, and while fighting the enemy, he can successfully transport the supplies to the destination to successfully pass the level. There are three levels in total.

GameInstructions: The up, down, left and right arrow keys control movement, the space bar launches cannonballs, push all material boxes () to the destination (), you can Pass.

## Code analysis:

Because of this The game is divided into several levels, so let’s first take a look at how the level manager manages each level:

/*    关卡管理器    */
var LevelManager=(function(){
    var optionsObj={};//所有关卡参数对象
    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,

we first create our own object for each level , then call the add method to add it to the level manager, and then call startLevel to start the level . This will facilitate our subsequent jumps in each level. In addition, the game objects used in each level can also be passed in here. In this game, since the logic of each level game is basically the same, the same game objects are used. The game's start screen uses another game object. The organization form of each game object is as follows

var gameObj={

    initialize:function(options){//初始化
    },
    update:function(){//更新
    },
    draw:function(){//绘制
    }

}

Let’s look at the specific initialization of the game object gameObj

Function:

/*    初始化    */
        initialize:function(options){
            srcObj=options.srcObj;
            this.level=options.level;
            this.enemyBeginX=options.enemyBeginX;
            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 are:

: Map objects, supplies arrays , player objects, and enemy objects . The map object can use the map of cnGameJS, while the player 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 so, we can jump to the next level.

if(_map.isMatchCell(_goods)&&(_map.getPosValue(_goods)==3)){//判断所有物资是否已到达目的地
                    finishedNum+=1;
                    if(finishedNum==_goodsArr.length){
                        this.toNextLevel();
                    }
                }

In addition, in each update, it is also necessary to determine whether the bullet hits the enemy, player, or material:

if(isGoods(list[j])||(isEnemy(list[j])&&list[i].from=="player")||(isPlayer(list[j])&&list[i].from=="enemy")){}

If it hits the enemy or player, then the corresponding The object is deleted from the spriteList so that the object will not be updated and drawn next time.

In addition, every time a bullet hits an object, a spriteSheet explosion is generatedAnimation:

/*    击中后的爆炸动画效果    */
bullet.prototype.explode=function(){
    var self=this;
    this.isExploding=true;
    var spriteSheet=new cnGame.SpriteSheet("boom",srcObj.boom,{width:280,height:40,frameSize:[40,40],frameDuration:40,onFinish:function(){self.isDisappear=true}});
    this.setCurrentAnimation(spriteSheet);
    this.speedX=0;
    this.speedY=0;
}

The spriteSheet

picture of this animation is as follows:

　

　

The generated animation is actually drawing the image on canvas starting from a different position each time. For details on spriteSheet animation, please see : "Record of Development of HTML5 Game Framework cnGameJS: Animation".

In addition, unlike the last game Super Mario, this game is a map type. Therefore, the map needs to be designed and drawn at the beginning of the game. The map is generated by a two-dimensional matrix. For example, the two-dimensional matrix corresponding to the game map of the first level is as follows:

/* 地图矩阵：0.空地 1.墙壁 2.石头 3.目的地 4.敌人基地*/
    mapMatrix:[
                    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                    [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
                    [1,0,1,0,0,2,2,0,0,0,2,2,0,0,0,1],
                    [1,0,1,0,0,0,2,0,0,0,4,0,0,0,2,1],
                    [1,0,1,0,0,0,0,0,2,0,0,0,0,0,0,1],
                    [1,0,2,0,0,0,0,0,2,0,0,0,0,0,0,1],
                    [1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
                    [1,1,1,1,1,1,1,0,0,0,1,1,1,2,2,1],
                    [1,0,0,0,0,2,0,0,0,0,1,3,0,0,0,1],
                    [1,0,0,0,0,2,0,2,0,0,1,0,0,0,0,1],
                    [1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
                    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
                   ]

The above is the detailed content of Sample code sharing for the HTML5 game 'Tank Support Team'. For more information, please follow other related articles on the PHP Chinese website!