Rumah > Artikel > hujung hadapan web > HTML5游戏框架cnGameJS开发实录-游戏地图对象篇
HTML5游戏框架cnGameJS开发实录-游戏地图对象篇
- 黄舟asal
- 2017-03-24 16:18:313104semak imbas
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;
});Atas ialah kandungan terperinci HTML5游戏框架cnGameJS开发实录-游戏地图对象篇. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5游戏框架cnGameJS开发实录-基本图形模块篇Artikel seterusnya：canvas画直角坐标系