HTML5 game framework cnGameJS development record-game map object-H5 Tutorial-php.cn

HTML5 game framework cnGameJS development record-game map object

黄舟

Release： 2017-03-24 16:18:31

Original

3112 people have browsed it

1. When is the game mapobject needed?

The game map object is suitable for games like tank battles and push box games. The maps of these games are composed of small grids. This kind of map can be easily generated using the game map object.

2. Example: Generate a map

Using the map object, only a small amount of code is required to generate a map based on a two-dimensional array.

　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>

Copy after login

　Generated map:

## Just transfer to the map A two-dimensional matrix and telling the map object which value corresponds to which picture, you can generate a map.

3. Implementation

Next, we will explain how to implement the map object using code. First look at the initialization function:

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;//有多少行
                
        },

Copy after login

To determine a map object, the parameters that need to be determined first include: the size of the map grid, the starting x coordinate of the map, and the starting y coordinate. Then you can generate and draw map objects based on these parameters, and then look at how to draw a map based on the parameters:

/**
         *根据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]);//绘制特定坐标的图像
                }
            }
        
        },

Copy after login

In the draw method, draw map grids one by one based on the starting coordinates and grid size. The grid has a one-to-one correspondence with each element of the two-dimensional matrix. The basis for image selection is the corresponding value of the two-dimensional matrix. In the above example, 1 draws bricks and 2 draws floor.

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

Copy after login

In addition, you can get the value of the map position of the element through getPosValue. This method is useful when determining the map location of a game object.

All source codes of map objects:

/**
 *
 *地图
 *
**/
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;
                                       
});

Copy after login

The above is the detailed content of HTML5 game framework cnGameJS development record-game map object. For more information, please follow other related articles on the PHP Chinese website!