【CSON原创】HTML5游戏框架cnGameJS开发实录(游戏地图对象篇)

返回目录

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(
'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);
</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;

});







posted @ 2012-02-14 12:43  Cson  阅读(...)  评论(...编辑  收藏