【CSON原創】HTML5游戲框架cnGameJS開發實錄（游戲地圖對象篇）
1.什么場合需要用到游戲地圖對象？
游戲地圖對象適用于類似坦克大戰，推箱子之類的游戲。這些游戲的地圖都由一個個小格子組成，使用游戲地圖對象，可以很方便地生成這種地圖。
2.示例：生成地圖
使用地圖對象，只需要很少的代碼量就可以根據二維數組生成地圖。
代碼：
<body>
<canvas id="gameCanvas">請使用支持canvas的瀏覽器查看</canvas>
</body>
<script src="https://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;
});
浙公網安備 33010602011771號