HTML5 게임 프레임워크 cnGameJS 개발 기록-게임 맵 객체
- 黄舟원래의
- 2017-03-24 16:18:313089검색
1. 게임 맵객체는 언제 필요한가요?
게임 맵 개체는 탱크 전투, 푸시박스 등의 게임에 적합합니다. 이러한 게임의 지도는 작은 격자로 구성되어 있습니다. 이러한 종류의 지도는 게임 지도 개체를 사용하여 쉽게 생성할 수 있습니다.
2. 예시: 지도 생성
지도 객체를 사용하면 소량의 코드만으로 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>생성된 지도:
지도로 바로 이동 2차원 행렬을 사용하여 어떤 값이 어떤 그림에 해당하는지 지도 객체에 알려주면 지도가 생성될 수 있습니다.
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]);//绘制特定坐标的图像
}
}
},그리기 메서드에서는 시작 좌표를 기준으로 지도 그리드를 하나씩 그립니다. 그리고 그리드 크기. 그리드는 2차원 행렬의 각 요소와 일대일 대응을 갖습니다. 이미지 선택의 기본은 2차원 행렬의 해당 값입니다. 위 예에서 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;
});위 내용은 HTML5 게임 프레임워크 cnGameJS 개발 기록-게임 맵 객체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.