当前位置：Gxlcms > html代码 > HTML5游戏框架cnGameJS开发实录-游戏地图对象篇

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

时间：2021-07-01 10:21:17 帮助过：63人阅读

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

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

2.示例：生成地图

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

　　代码：

  1. <body>
  2. <canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas>
  3. </body>
  4. <script src="http://files.cnblogs.com/Cson/cnGame_v1.0.js"></script>
  5. <script>
  6. /*    地图绘制test    */
  7. cnGame.init('gameCanvas',{width:200,height:200});
  8. var gameObj={};
  9. gameObj.initialize=function(){
  10.     var mapMatrix=[ 
  11.                     [1,1,1,1,1],
  12.                     [1,0,1,0,1],
  13.                     [1,0,0,0,1],
  14.                     [1,1,0,0,1],
  15.                     [1,1,1,1,1]
  16.                    ];
  17.                  
  18.     var map=cnGame.Map(mapMatrix,{cellSize:[40,40]});
  19.     map.draw({"1":{src:"brick.gif",x:0,y:0},"0":{src:"floor.png",x:0,y:0}});
  20. }
  21. cnGame.loader.start(["brick.gif","floor.png"],gameObj);
  22. </script>

　　生成的地图：

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

3.实现

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

  1. map.prototype={
  2.         /**
  3.          *初始化
  4.         **/    
  5.         init:function(mapMatrix,options){
  6.             /**
  7.              *默认对象
  8.             **/    
  9.             var defaultObj={
  10.                 cellSize:[32,32],   //方格宽，高
  11.                 beginX:0,            //地图起始x
  12.                 beginY:0            //地图起始y
  13.         
  14.             };
  15.             options=options||{};
  16.             options=cg.core.extend(defaultObj,options);
  17.             this.mapMatrix=mapMatrix;
  18.             this.cellSize=options.cellSize;
  19.             this.beginX=options.beginX;
  20.             this.beginY=options.beginY;
  21.             this.row=mapMatrix.length;//有多少行
  22.                 
  23.         },

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

  1. /**
  2.          *根据map矩阵绘制map
  3.         **/    
  4.         draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
  5.             var mapMatrix=this.mapMatrix;
  6.             var beginX=this.beginX;
  7.             var beginY=this.beginY;
  8.             var cellSize=this.cellSize;
  9.             var currentRow;
  10.             var currentCol
  11.             var currentObj;
  12.             var row=this.row;
  13.             var img;
  14.             for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
  15.                     currentRow=(i-beginY)/cellSize[1];
  16.                 for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
  17.                     currentCol=(j-beginX)/cellSize[0];
  18.                     currentObj=options[mapMatrix[currentRow][currentCol]];
  19.                     img=cg.loader.loadedImgs[currentObj.src];
  20.                     cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
  21.                 }
  22.             }
  23.         
  24.         },

　　在draw方法中，根据起始坐标和格子尺寸，逐个绘制地图格子。格子与二维矩阵的每个元素一一对应，图片选择的依据就是二维矩阵对应的值，在上面的例子中，1则绘制砖头，2则绘制地板。

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

　　另外可以通过getPosValue获取元素所在地图位置的值。该方法在判断游戏对象所处地图位置时很有用。

地图对象所有源码：

  1. /**
  2.  *
  3.  *地图
  4.  *
  5. **/
  6. cnGame.register("cnGame",function(cg){
  7.                                                             
  8.     var map=function(mapMatrix,options){
  9.         
  10.         if(!(this instanceof arguments.callee)){
  11.             return new arguments.callee(mapMatrix,options);
  12.         }
  13.         this.init(mapMatrix,options);
  14.     }
  15.     map.prototype={
  16.         /**
  17.          *初始化
  18.         **/    
  19.         init:function(mapMatrix,options){
  20.             /**
  21.              *默认对象
  22.             **/    
  23.             var defaultObj={
  24.                 cellSize:[32,32],   //方格宽，高
  25.                 beginX:0,            //地图起始x
  26.                 beginY:0            //地图起始y
  27.         
  28.             };
  29.             options=options||{};
  30.             options=cg.core.extend(defaultObj,options);
  31.             this.mapMatrix=mapMatrix;
  32.             this.cellSize=options.cellSize;
  33.             this.beginX=options.beginX;
  34.             this.beginY=options.beginY;
  35.             this.row=mapMatrix.length;//有多少行
  36.                 
  37.         },
  38.         /**
  39.          *根据map矩阵绘制map
  40.         **/    
  41.         draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
  42.             var mapMatrix=this.mapMatrix;
  43.             var beginX=this.beginX;
  44.             var beginY=this.beginY;
  45.             var cellSize=this.cellSize;
  46.             var currentRow;
  47.             var currentCol
  48.             var currentObj;
  49.             var row=this.row;
  50.             var img;
  51.             for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
  52.                     currentRow=(i-beginY)/cellSize[1];
  53.                 for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
  54.                     currentCol=(j-beginX)/cellSize[0];
  55.                     currentObj=options[mapMatrix[currentRow][currentCol]];
  56.                     img=cg.loader.loadedImgs[currentObj.src];
  57.                     cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
  58.                 }
  59.             }
  60.         
  61.         },
  62.         /**
  63.          *获取特定对象在地图中处于的方格的值
  64.         **/
  65.         getPosValue:function(elem){
  66.             return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
  67.             
  68.         }
  69.         
  70.     }
  71.     this.Map=map;
  72.                                        
  73. });

以上就是HTML5游戏框架cnGameJS开发实录-游戏地图对象篇的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！