Exemple de partage de code pour le jeu HTML5 'Tank Support Team'

Description de la fonction :

Ce jeu est essentiellement bataille de chars + boîte à poussée . Le joueur contrôle le char et tout en combattant l'ennemi, il peut transporter avec succès les fournitures jusqu'à la destination pour réussir le niveau. Il y a trois niveaux au total.

Jeu Description : Les touches fléchées haut, bas, gauche et droite contrôlent le mouvement, la barre d'espace lance des boulets de canon, poussez toutes les boîtes de matériel () vers la destination (), vous pouvez réussir.

Analyse du code :

À cause de Ce jeu est divisé en plusieurs niveaux, voyons donc d'abord comment le gestionnaire de niveaux gère chaque niveau :

/*    关卡管理器    */
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);    
        }

    }

})();

Dans la phase d'initialisation, nous créons d'abord nos propres niveaux pour chaque niveau Object , puis appelez la méthode add pour l'ajouter au gestionnaire de niveaux. Vous pouvez ensuite appeler startLevel pour démarrer le niveau . Cela facilitera nos sauts ultérieurs dans chaque niveau. De plus, les objets de jeu utilisés dans chaque niveau peuvent également être transmis ici. Dans ce jeu, puisque la logique de chaque jeu de niveau est fondamentalement la même, les mêmes objets de jeu sont utilisés. L'écran de démarrage du jeu utilise un autre objet de jeu. La forme d'organisation de chaque objet de jeu est la suivante

var gameObj={

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

}

Regardons la fonction d'initialisation spécifique de l'objet de jeu gameObj :

/*    初始化    */
        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);
        }

Dans l'initialisation fonction, nous avons besoin Les paramètres initialisés sont  : carte objet, matériel tableau , objet joueur et objet ennemi . Les objets cartographiques peuvent utiliser la carte de cnGameJS, tandis que les objets joueurs et ennemis héritent du sprite de cnGameJS.

Dans chaque mise à jour de gameObj, nous devons déterminer si tous les objets matériels sont en place. Si c'est le cas, nous pouvons passer au niveau suivant.

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

De plus, à chaque mise à jour, il faut également déterminer si la balle touche l'ennemi, le joueur, ou le matériel :

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

Si elle touche l'ennemi ou le joueur , supprimez l'objet correspondant de spriteList, afin que l'objet ne soit pas mis à jour et dessiné la prochaine fois. De plus, chaque fois qu'une balle touche un objet, une explosion de spriteSheet animation  :

/*    击中后的爆炸动画效果    */
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;
}

L'image spriteSheet de cette animation est comme suit :

L'animation générée par dessine en fait l'image sur la toile à partir d'une position différente à chaque fois, détails à propos de l'animation spriteSheet Veuillez consulter : "Record of Development of HTML5 Game Framework cnGameJS : Animation".

De plus, contrairement au dernier jeu Super Mario, ce jeu est basé sur des cartes. Par conséquent, la carte doit être conçue et dessinée au début du jeu. La carte est générée par une matrice bidimensionnelle. Par exemple, la matrice bidimensionnelle correspondant à la carte de jeu du premier niveau est la suivante :

/* 地图矩阵：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]
                   ]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!