javascript制作坦克大战全纪录（2）
投稿：hebedich
上文我们简单的完成了坦克大战的雏形，本文我们来继续完善坦克大战，接下来我们来学习制作地图和碰撞检测方面的问题。
2. 完善地图
我们的地图中有空地，墙，钢，草丛，水，总部等障碍物。 我们可以把这些全部设计为对象。
2.1 创建障碍物对象群
对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。
Barrier.js:
复制代码 代码如下:
// 障碍物基类对象，继承自TankObject
Barrier = function () {
this.DefenVal = 1; // 防御力
this.CanBeAttacked = true; // 是否可以被攻击
}
Barrier.prototype = new TankObject();
// 墙
WallB = function () { }
WallB.prototype = new Barrier();
// 空地
EmptyB = function () {
this.CanAcross = true; // 可被穿过
}
EmptyB.prototype = new Barrier();
// 河流
RiverB = function () {
this.DefenVal = 0;
this.CanBeAttacked = false; // 优先取对象的成员，继承自父类的会被覆盖。
}
RiverB.prototype = new Barrier();
// 钢
SteelB = function () {
this.DefenVal = 3;
}
SteelB.prototype = new Barrier();
// 草丛对象
TodB = function () {
this.CanBeAttacked = false;
this.DefenVal = 0;
this.CanAcross = true;
}
TodB.prototype = new Barrier();
// 总部
PodiumB = function () {
this.DefenVal = 5;
}
PodiumB.prototype = new Barrier();
2.2 写入地图的数据。
在Common.js 中添加以下代码：
复制代码 代码如下:
//地图元素类型枚举
/*
0：空地
1：墙
2：钢
3：树丛
4：河
5：总部
*/
var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
// 每个地形对应的样式名称
var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
// 关卡地图
/*关卡*/
var str = '0000000000000';
str += ',0011100111010';
str += ',1000010000200';
str += ',1200333310101';
str += ',0000444400001';
str += ',3313300001011';
str += ',3011331022011';
str += ',3311031011011';
str += ',0101011102010';
str += ',0101011010010';
str += ',0100000000110';
str += ',0100012101101';
str += ',0010015100000';
// 存储关卡地图 0,1,2,3... 分别为1-n ... 关
var Top_MapLevel = [str];
2.3 绘制地图
准备工作做完了，下面开始上大菜，绘制地图。前面有提到我们的地图为 13 * 13 的表格。所以我们在游戏装载对象添加行和列两个属性，并且添加初始化地图方法。
Frame.js:
复制代码 代码如下:
// 游戏载入对象 整个游戏的核心对象
GameLoader = function () {
this._mapContainer = document.getElementById("divMap"); // 存放游戏地图的div
this._selfTank = null; // 玩家坦克
this._gameListener = null; // 游戏主循环计时器id
/*v2.0新加的属性*/
this._level = 1;
this._rowCount = 13;
this._colCount = 13;
this._battleField = []; // 存储地图对象二维数组
}
// 加载地图方法
Load: function () {
// 根据等级初始化地图
var map = Top_MapLevel[this._level - 1].split(",");
var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// 遍历地图表格中每一个单元格
for (var i = 0; i < this._rowCount; i++) {
// 创建div，每一行的地图保存在这个div中
var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
// 在一维数组中再创建一个数组
this._battleField[i] = [];
for (var j = 0; j < this._colCount; j++) {
// 读取地图数据，默认值：0
var v = (map[i] && map[i].charAt(j)) || 0;
// 插入span元素，一个span元素即为一个地图单位
var spanCol = UtilityClass.CreateE("span", "", "", divRow);
spanCol.className = ArrayCss[v];
// 将地图对象放入二维数组中，便于后面碰撞检测。
var to = null;
switch (v) {
case EnumMapCellType.Empty:
to = new EmptyB();
break;
case EnumMapCellType.Wall:
to = new WallB();
break;
case EnumMapCellType.Steel:
to = new SteelB();
break;
case EnumMapCellType.Tod:
to = new TodB();
break;
case EnumMapCellType.River:
to = new RiverB();
break;
case EnumMapCellType.Podium:
to = new PodiumB();
break;
default:
throw new Error("地图数字越界！");
break;
}
to.UI = spanCol;
//这里的j就是X，因为内部循环是横向的，x是横坐标
to.XPosition = j;
to.YPosition = i;
// 将当前的地图对象存入二维数组中obj为障碍物对象，occupier为占有对象
this._battleField[i][j] = { obj: to, occupier: null, lock: false };
} //end for
} // end for
// 放入window全局变量
window.BattleField = this._battleField;
}
ok，到这里我们的地图就大功告成了。 这里的注释已经很详细了，如果大家还有不理解的地方自己下载源码调试一下就很好理解了。
这里主要加载地图数据，将每一个地图作为span元素插入html文档中。并且将地图的对象存储在二维数组中。以后我们做碰撞检测的时候就可以直接通过对象的坐标取到对应的数组对象，十分方便。
附上源码：http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar