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

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

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

2.示例：生成地图

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

代码：

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

/* 地图绘制test */

cnGame.init('gameCanvas',{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);

生成的地图：

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

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

currentRow=(i-beginY)/cellSize[1];

for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j

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

currentRow=(i-beginY)/cellSize[1];

for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j

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;

});