首页 > 代码库 > 用javascript 面向对象制作坦克大战（二）
用javascript 面向对象制作坦克大战（二）
2. 完善地图
我们的地图中有空地，墙，钢，草丛，水，总部等障碍物。 我们可以把这些全部设计为对象。
2.1 创建障碍物对象群
对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。
Barrier.js:
1 // 障碍物基类对象，继承自TankObject 2 Barrier = function () { 3 this.DefenVal = 1; // 防御力 4 this.CanBeAttacked = true; // 是否可以被攻击 5 } 6 Barrier.prototype = new TankObject(); 7 // 墙 8 WallB = function () { } 9 WallB.prototype = new Barrier();10 // 空地11 EmptyB = function () {12 this.CanAcross = true; // 可被穿过13 }14 EmptyB.prototype = new Barrier();15 // 河流16 RiverB = function () {17 this.DefenVal = 0;18 this.CanBeAttacked = false; // 优先取对象的成员，继承自父类的会被覆盖。19 }20 RiverB.prototype = new Barrier();21 // 钢22 SteelB = function () {23 this.DefenVal = 3;24 }25 SteelB.prototype = new Barrier();26 // 草丛对象27 TodB = function () {28 this.CanBeAttacked = false;29 this.DefenVal = 0;30 this.CanAcross = true;31 }32 TodB.prototype = new Barrier();33 // 总部34 PodiumB = function () {35 this.DefenVal = 5;36 }37 PodiumB.prototype = new Barrier();
2.2 写入地图的数据。
在Common.js 中添加以下代码：
1 //地图元素类型枚举 2 /* 3 0：空地 4 1：墙 5 2：钢 6 3：树丛 7 4：河 8 5：总部 9 */10 11 var EnumMapCellType = {12 Empty: "0"13 , Wall: "1"14 , Steel: "2"15 , Tod: "3"16 , River: "4"17 , Podium: "5"18 };19 20 // 每个地形对应的样式名称21 var ArrayCss = [‘empty‘, ‘wall‘, ‘steel‘, ‘tod‘, ‘river‘, ‘podium‘];22 23 // 关卡地图24 /*关卡*/25 var str = ‘0000000000000‘;26 str += ‘,0011100111010‘;27 str += ‘,1000010000200‘;28 str += ‘,1200333310101‘;29 str += ‘,0000444400001‘;30 str += ‘,3313300001011‘;31 str += ‘,3011331022011‘;32 str += ‘,3311031011011‘;33 str += ‘,0101011102010‘;34 str += ‘,0101011010010‘;35 str += ‘,0100000000110‘;36 str += ‘,0100012101101‘;37 str += ‘,0010015100000‘;38 // 存储关卡地图 0,1,2,3... 分别为1-n ... 关39 var Top_MapLevel = [str];
2.3 绘制地图
准备工作做完了，下面开始上大菜，绘制地图。前面有提到我们的地图为 13 * 13 的表格。所以我们在游戏装载对象添加行和列两个属性，并且添加初始化地图方法。
Frame.js:
1 // 游戏载入对象 整个游戏的核心对象 2 GameLoader = function () { 3 this._mapContainer = document.getElementById("divMap"); // 存放游戏地图的div 4 this._selfTank = null; // 玩家坦克 5 this._gameListener = null; // 游戏主循环计时器id 6 /*v2.0新加的属性*/ 7 this._level = 1; 8 this._rowCount = 13; 9 this._colCount = 13;10 this._battleField = []; // 存储地图对象二维数组11 12 }13 14 15 // 加载地图方法16 Load: function () {17 // 根据等级初始化地图18 var map = Top_MapLevel[this._level - 1].split(",");19 var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);20 // 遍历地图表格中每一个单元格21 for (var i = 0; i < this._rowCount; i++) {22 // 创建div，每一行的地图保存在这个div中23 var divRow = UtilityClass.CreateE("div", "", "", mapBorder);24 // 在一维数组中再创建一个数组25 this._battleField[i] = [];26 for (var j = 0; j < this._colCount; j++) {27 // 读取地图数据，默认值：028 var v = (map[i] && map[i].charAt(j)) || 0;29 // 插入span元素，一个span元素即为一个地图单位30 var spanCol = UtilityClass.CreateE("span", "", "", divRow);31 spanCol.className = ArrayCss[v];32 33 34 // 将地图对象放入二维数组中，便于后面碰撞检测。35 var to = null;36 switch (v) {37 case EnumMapCellType.Empty:38 to = new EmptyB();39 break;40 case EnumMapCellType.Wall:41 to = new WallB();42 break;43 case EnumMapCellType.Steel:44 to = new SteelB();45 break;46 case EnumMapCellType.Tod:47 to = new TodB();48 break;49 case EnumMapCellType.River:50 to = new RiverB();51 break;52 case EnumMapCellType.Podium:53 to = new PodiumB();54 break;55 default:56 throw new Error("地图数字越界！");57 break;58 }59 60 to.UI = spanCol;61 //这里的j就是X，因为内部循环是横向的，x是横坐标62 to.XPosition = j;63 to.YPosition = i;64 // 将当前的地图对象存入二维数组中obj为障碍物对象，occupier为占有对象65 this._battleField[i][j] = { obj: to, occupier: null, lock: false };66 67 } //end for68 } // end for69 // 放入window全局变量70 window.BattleField = this._battleField;71 72 }
ok，到这里我们的地图就大功告成了。 这里的注释已经很详细了，如果大家还有不理解的地方自己下载源码调试一下就很好理解了。
这里主要加载地图数据，将每一个地图作为span元素插入html文档中。并且将地图的对象存储在二维数组中。以后我们做碰撞检测的时候就可以直接通过对象的坐标取到对应的数组对象，十分方便。
tankV2.0 源码下载地址：
http://pan.baidu.com/s/1hqFx4cW
?
用javascript 面向对象制作坦克大战（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。