资料学习_游戏地图的制作

参考资料: http://www.v-ec.com/dh20156/article.asp?id=123

 

地图制作方法:

  一:以前的做法--二维数组+拼图方式

  二:现在的做法--对象列表

 

方法一原理:

地图和场景前景都制作成一个个大小完全相同的小画片，然后分别将每个画片都编上号（例如，1号代表土地，2号代表小坑，3号代表水，4号代表……），然后便用一个比较大的二维数组来记录地图的信息，其实就是记录一些编号，在游戏初始化的时候就跟据这些编号将那些小画片一块块的拼起来形成最终的地图场景。

 

资料中没有方法一的例子,我根据其原理的说明,自己写了一个.如下:

 

//image infomation var MapPic = { "image" : "map0.gif", 0 : "0px 0px", //grass 1 : "0 -31px", //wall 2 : "0 -62px" //wall2 } function Map(mapName,Ma){ this.Table = document.createElement("table"); this.Table.setAttribute("name",mapName); this.Table.setAttribute("border","0"); this.Table.cellSpacing = 0; this.Table.cellPadding = 0; this.tbody = document.createElement("tbody"); this.Table.appendChild(this.tbody); this.Ma = Ma; this.u = "31px"; //the width, height of td } Map.prototype = { init : function(){ this._setMap(); document.body.appendChild(this.Table); }, _setMap : function(){ var Ma = this.Ma; for(var i=0; i<Ma.length; i++){ this.tbody.insertRow(i); //insert Row for(var j=0; j<Ma[i].length; j++){ this.tbody.rows[i].insertCell(j); this.tbody.rows[i].cells[j].style.width = this.tbody.rows[i].cells[j].style.height = this.u; this.tbody.rows[i].cells[j].style.background = 'url('+ MapPic.image +') no-repeat '+ MapPic[Ma[i][j]]; } } } } //map array var MapArray = [ [0,0,0,0,0] //row 1 ,[0,1,1,1,0] //row 2... ,[0,1,1,1,0] ,[0,1,1,1,0] ,[0,0,0,0,0] ] var m1 = new Map("m1",MapArray); m1.init();

图片:

 

涉及到的知识点有:

数组的遍历;

TABLE方法( oTbody.insertRow(0); oTbody.rows[0].insertCell(0);)

样式的设置,DOM操作...

 

 

 

思考的问题:

1.为什么要用TABLE,和用DIV相比有什么好处?

   估计:TABLE布局对各浏览器兼容性好,适合大量的数据元素显示.

2.为什么要为每个TD元素设置行内样式? 

   估计是为了精确控制每个TD单位元素的背景图片等样式.并且可以方便修改.

 

 

 

 

方法二原理:

地面是一个二维数组，和前面一样，同样记录一些图片的编号（例如：陆地，水面，空间等），而地面上的物件却是另一个对象列表，它里面记录的是每一个对象所在的 X 轴 和Y 轴的起点坐标，也就是说，每放置一个对象，其实只是在列表中加入了一句话：X起点，Y起点，对象编号。仅此而已。那么，这些东西怎么会变成最终的地图的呢？！在游戏初始化的时候，先将地面那个二维数组存入内存，并找出相应的图片形成地表。接下来就从库里面将相应的对象都复制出来放置于相应的坐标所对应的位置，当然了，这对象也就包括了主角和一些NPC人物。这也就是时下比较流行的地图制作方式了。

 

方法二实现:

写的很乱,回头再整理吧...

 

 var img = "map0.gif"; //实物描述 var oList = [ {n:'草地',u:img,pos:"0px 0px",w:32,h:32,z:0}, {n:'围墙',u:img,pos:"0px -32px",w:32,h:32,z:1}, {n:'围墙1',u:img,pos:"0px -64px",w:32,h:32,z:1}, {n:'雕像',u:img,pos:"-32px 0px",w:64,h:96,z:1} ] //地图坐标,B是平铺的背景图片,C是需要实例化的实物 var MapArray = [ [{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]},{b:oList[0]},{b:oList[0]}] ,[{b:oList[0]},{b:oList[0],c:oList[2]},{b:oList[0],c:oList[3]},{b:oList[0]},{b:oList[0]}] ,[{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]},{b:oList[0]},{b:oList[0]}] ,[{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]}] ,[{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]},{b:oList[0],c:oList[1]},{b:oList[0]}] ] function game(){ //实例的类 var gameobj = function(_con,_name,_width,_height,pos,_left,_top,_index,_bgsrc,_index){ this.elem = document.createElement("div"); this.elem.setAttribute("name",_name || "container"); this.elem.setAttribute("id",_name || "container"); this.elem.style.left = (_left || 0) + "px"; this.elem.style.top = _top + "px"; if(_width !=null) this.elem.style.width = _width +"px"; if(_height !=null) this.elem.style.height = _height + "px"; this.elem.style.position = "absolute"; this.elem.style.overflow = "hidden"; this.elem.style.zIndex = _index || 0; this.elem.style.background = 'url('+_bgsrc+') '+ pos +' no-repeat'; if(!_con){ document.body.appendChild(this.elem); } else{ document.getElementById(_con).appendChild(this.elem); } //document.body.appendChild(this.elem); return this.elem; } //地图类 var Map = function(mapName,Ma){ this.Table = document.createElement("table"); this.Table.setAttribute("name",mapName); this.Table.setAttribute("border","0"); this.Table.cellSpacing = 0; this.Table.cellPadding = 0; this.tbody = document.createElement("tbody"); this.Table.appendChild(this.tbody); this.Ma = Ma; this.u = 32; //the width, height of td } Map.prototype = { init : function(ele){ this._setMap(); document.getElementById(ele).appendChild(this.Table); }, _setMap : function(){ var Ma = this.Ma; for(var i=0; i<Ma.length; i++){ this.tbody.insertRow(i); //insert Row for(var j=0; j<Ma[i].length; j++){ this.tbody.rows[i].insertCell(j); this.tbody.rows[i].cells[j].style.width = this.tbody.rows[i].cells[j].style.height = this.u + "px"; this.tbody.rows[i].cells[j].style.background = 'url('+ Ma[i][j].b.u +')'+ Ma[i][j].b.pos +' no-repeat '; //关键在这里,平铺了背景图片还要实例对象 if(Ma[i][j].c){ var left = this.u * (j); var top = this.u * (i); //function(_con,_name,_width,_height,_x,_y,_left,_top,_index,_bgsrc) var o1 = new gameobj("container","",Ma[i][j].c.w,Ma[i][j].c.h,Ma[i][j].c.pos ,left,top,0,Ma[i][j].b.u,Ma[i][j].c.z); } } } } } this.loadMap = function(Ma){ var m = new Map("mapName",Ma); var o = new gameobj(); m.init(o.id); } } var g = new game(); g.loadMap(MapArray);