Maison > Article > interface Web > Cadre de jeu HTML5, développement cnGameJS, objet de carte d'enregistrement de jeu

Cadre de jeu HTML5, développement cnGameJS, objet de carte d'enregistrement de jeu

黄舟original: 2017-03-24 16:18:313081parcourir

1. Quand la carte du jeu objet est-elle nécessaire ?

L'objet carte de jeu convient aux jeux tels que les batailles de chars et les push boxes. Les cartes de ces jeux sont composées de petites grilles. Ce type de carte peut être facilement généré à l'aide de l'objet carte du jeu.

2. Exemple : Générer une carte

En utilisant l'objet map, seule une petite quantité de code est nécessaire pour générer une carte basée sur le bidimensionnel. tableau.

　Code :

<body>
<canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas>
</body>
<script src="http://files.cnblogs.com/Cson/cnGame_v1.0.js"></script>
<script>
/*    地图绘制test    */

cnGame.init(&#39;gameCanvas&#39;,{width:200,height:200});
var gameObj={};
gameObj.initialize=function(){

    var mapMatrix=[ 
                    [1,1,1,1,1],
                    [1,0,1,0,1],
                    [1,0,0,0,1],
                    [1,1,0,0,1],
                    [1,1,1,1,1]
                   ];
                 
    var map=cnGame.Map(mapMatrix,{cellSize:[40,40]});
    map.draw({"1":{src:"brick.gif",x:0,y:0},"0":{src:"floor.png",x:0,y:0}});
}
cnGame.loader.start(["brick.gif","floor.png"],gameObj);
</script>

Carte générée :

Il suffit de transférer Entrer la matrice bidimensionnelle de la carte et indiquer à l'objet cartographique quelle valeur correspond à quelle image générer une carte.

3. Implémentation

Ensuite, nous expliquerons comment implémenter l'objet map à l'aide du code. Regardez d'abord la fonction d'initialisation :

map.prototype={
        /**
         *初始化
        **/    
        init:function(mapMatrix,options){
            /**
             *默认对象
            **/    
            var defaultObj={
                cellSize:[32,32],   //方格宽，高
                beginX:0,            //地图起始x
                beginY:0            //地图起始y
        
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.mapMatrix=mapMatrix;
            this.cellSize=options.cellSize;
            this.beginX=options.beginX;
            this.beginY=options.beginY;
            this.row=mapMatrix.length;//有多少行
                
        },

Pour déterminer un objet cartographique, les paramètres qui doivent d'abord être déterminés incluent : la taille de la grille de la carte, la coordonnée x de départ de la carte et la valeur de départ. y coordonner. Ensuite, vous pouvez générer et dessiner des objets cartographiques en fonction de ces paramètres, puis voir comment dessiner une carte en fonction des paramètres :

/**
         *根据map矩阵绘制map
        **/    
        draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
            var mapMatrix=this.mapMatrix;
            var beginX=this.beginX;
            var beginY=this.beginY;
            var cellSize=this.cellSize;
            var currentRow;
            var currentCol
            var currentObj;
            var row=this.row;
            var img;
            for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
                    currentRow=(i-beginY)/cellSize[1];
                for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
                    currentCol=(j-beginX)/cellSize[0];
                    currentObj=options[mapMatrix[currentRow][currentCol]];
                    img=cg.loader.loadedImgs[currentObj.src];
                    cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
                }
            }
        
        },

Dans la méthode draw, dessinez les grilles de carte une par une en fonction des coordonnées de départ et taille de la grille. La grille a une correspondance bidimensionnelle avec chaque élément de la matrice bidimensionnelle. La base de la sélection d'image est la valeur correspondante de la matrice bidimensionnelle. Dans l'exemple ci-dessus, 1 dessine des briques et 2 dessine un sol.

/**
         *获取特定对象在地图中处于的方格的值
        **/
        getPosValue:function(elem){
            return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
            
        }

De plus, vous pouvez obtenir la valeur de la position cartographique de l'élément via getPosValue. Cette méthode est utile pour déterminer l’emplacement sur la carte d’un objet de jeu.

Tous les codes sources des objets cartographiques :

/**
 *
 *地图
 *
**/
cnGame.register("cnGame",function(cg){
                                                            
    var map=function(mapMatrix,options){
        
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(mapMatrix,options);
        }
        this.init(mapMatrix,options);
    }
    map.prototype={
        /**
         *初始化
        **/    
        init:function(mapMatrix,options){
            /**
             *默认对象
            **/    
            var defaultObj={
                cellSize:[32,32],   //方格宽，高
                beginX:0,            //地图起始x
                beginY:0            //地图起始y
        
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.mapMatrix=mapMatrix;
            this.cellSize=options.cellSize;
            this.beginX=options.beginX;
            this.beginY=options.beginY;
            this.row=mapMatrix.length;//有多少行
                
        },
        /**
         *根据map矩阵绘制map
        **/    
        draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
            var mapMatrix=this.mapMatrix;
            var beginX=this.beginX;
            var beginY=this.beginY;
            var cellSize=this.cellSize;
            var currentRow;
            var currentCol
            var currentObj;
            var row=this.row;
            var img;
            for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
                    currentRow=(i-beginY)/cellSize[1];
                for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
                    currentCol=(j-beginX)/cellSize[0];
                    currentObj=options[mapMatrix[currentRow][currentCol]];
                    img=cg.loader.loadedImgs[currentObj.src];
                    cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
                }
            }
        
        },
        /**
         *获取特定对象在地图中处于的方格的值
        **/
        getPosValue:function(elem){
            return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
            
        }
        
    }
    this.Map=map;
                                       
});

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Enregistrement de développement cnGameJS du cadre de jeu HTML5 - module graphique de baseArticle suivant：Enregistrement de développement cnGameJS du cadre de jeu HTML5 - module graphique de base

Articles Liés

Voir plus