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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签游戏

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

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

2.示例：生成地图

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

代码：

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

<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>

生成的地图：

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

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

在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<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;                                       });

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集