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; });
以上是HTML5遊戲框架cnGameJS開發實錄-遊戲地圖物件篇的詳細內容。更多資訊請關注PHP中文網其他相關文章!