2. 完善地圖
我們的地圖中有空地，墻，鋼，草叢，水，總部等障礙物。 我們可以把這些全部設(shè)計(jì)為對(duì)象。
2.1 創(chuàng)建障礙物對(duì)象群
對(duì)象群保存各種地圖上的對(duì)象，我們通過對(duì)象的屬性來判斷對(duì)象是否可以被穿過或被攻擊。
Barrier.js:
代碼如下:
// 障礙物基類對(duì)象，繼承自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; // 優(yōu)先取對(duì)象的成員，繼承自父類的會(huì)被覆蓋。
}
RiverB.prototype = new Barrier();
// 鋼
SteelB = function () {
this.DefenVal = 3;
}
SteelB.prototype = new Barrier();
// 草叢對(duì)象
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 寫入地圖的數(shù)據(jù)。
在Common.js 中添加以下代碼：
代碼如下:
//地圖元素類型枚舉
/*
0：空地
1：墻
2：鋼
3：樹叢
4：河
5：總部
*/
var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
// 每個(gè)地形對(duì)應(yīng)的樣式名稱
var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
// 關(guān)卡地圖
/*關(guān)卡*/
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';
// 存儲(chǔ)關(guān)卡地圖 0,1,2,3... 分別為1-n ... 關(guān)
var Top_MapLevel = [str];
2.3 繪制地圖
準(zhǔn)備工作做完了，下面開始上大菜，繪制地圖。前面有提到我們的地圖為 13 * 13 的表格。所以我們?cè)谟螒蜓b載對(duì)象添加行和列兩個(gè)屬性，并且添加初始化地圖方法。
Frame.js:
代碼如下:
// 游戲載入對(duì)象 整個(gè)游戲的核心對(duì)象
GameLoader = function () {
this._mapContainer = document.getElementById("divMap"); // 存放游戲地圖的div
this._selfTank = null; // 玩家坦克
this._gameListener = null; // 游戲主循環(huán)計(jì)時(shí)器id
/*v2.0新加的屬性*/
this._level = 1;
this._rowCount = 13;
this._colCount = 13;
this._battleField = []; // 存儲(chǔ)地圖對(duì)象二維數(shù)組
}
// 加載地圖方法
Load: function () {
// 根據(jù)等級(jí)初始化地圖
var map = Top_MapLevel[this._level - 1].split(",");
var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// 遍歷地圖表格中每一個(gè)單元格
for (var i = 0; i < this._rowCount; i++) {
// 創(chuàng)建div，每一行的地圖保存在這個(gè)div中
var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
// 在一維數(shù)組中再創(chuàng)建一個(gè)數(shù)組
this._battleField[i] = [];
for (var j = 0; j < this._colCount; j++) {
// 讀取地圖數(shù)據(jù)，默認(rèn)值：0
var v = (map[i] && map[i].charAt(j)) || 0;
// 插入span元素，一個(gè)span元素即為一個(gè)地圖單位
var spanCol = UtilityClass.CreateE("span", "", "", divRow);
spanCol.className = ArrayCss[v];
// 將地圖對(duì)象放入二維數(shù)組中，便于后面碰撞檢測(cè)。
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("地圖數(shù)字越界！");
break;
}
to.UI = spanCol;
//這里的j就是X，因?yàn)閮?nèi)部循環(huán)是橫向的，x是橫坐標(biāo)
to.XPosition = j;
to.YPosition = i;
// 將當(dāng)前的地圖對(duì)象存入二維數(shù)組中obj為障礙物對(duì)象，occupier為占有對(duì)象
this._battleField[i][j] = { obj: to, occupier: null, lock: false };
} //end for
} // end for
// 放入window全局變量
window.BattleField = this._battleField;
}
ok，到這里我們的地圖就大功告成了。 這里的注釋已經(jīng)很詳細(xì)了，如果大家還有不理解的地方自己下載源碼調(diào)試一下就很好理解了。
這里主要加載地圖數(shù)據(jù)，將每一個(gè)地圖作為span元素插入html文檔中。并且將地圖的對(duì)象存儲(chǔ)在二維數(shù)組中。以后我們做碰撞檢測(cè)的時(shí)候就可以直接通過對(duì)象的坐標(biāo)取到對(duì)應(yīng)的數(shù)組對(duì)象，十分方便。