HTML5游戏框架cnGameJS开发实录-游戏地图对象篇

1.什么场合需要用到游戏地图对象？

　　游戏地图对象适用于类似坦克大战，推箱子之类的游戏。这些游戏的地图都由一个个小格子组成，使用游戏地图对象，可以很方便地生成这种地图。

2.示例：生成地图

　　使用地图对象，只需要很少的代码量就可以根据二维数组生成地图。

　　代码：

立即学习“前端免费学习笔记（深入）”；

请使用支持canvas的浏览器查看

　　生成的地图：

　　只要转入地图的二维矩阵，并告诉地图对象哪个值对应哪张图片，就可以生成地图。

Copy.ai

Copy.ai 是一个人工智能驱动的文案生成器

下载

3.实现

　　接下来讲解如何用代码实现地图对象。首先看初始化函数：

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

　　要确定一个地图对象，首先需要确定的参数包括：地图格子的尺寸，地图的起始x坐标，起始y坐标。之后可以根据这些参数生成并绘制地图对象，之后再看看如何根据参数绘制地图：

/**
         *根据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
　　在draw方法中，根据起始坐标和格子尺寸，逐个绘制地图格子。格子与二维矩阵的每个元素一一对应，图片选择的依据就是二维矩阵对应的值，在上面的例子中，1则绘制砖头，2则绘制地板。
/**
         *获取特定对象在地图中处于的方格的值
        **/
        getPosValue:function(elem){
            return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
            
        }
　　另外可以通过getPosValue获取元素所在地图位置的值。该方法在判断游戏对象所处地图位置时很有用。
地图对象所有源码：
/**
 *
 *地图
 *
**/
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