2. 完善地圖

我們的地圖中有空地，墻，鋼，草叢，水，總部等障礙物。 我們可以把這些全部設(shè)計為對象。

2.1 創(chuàng)建障礙物對象群

對象群保存各種地圖上的對象，我們通過對象的屬性來判斷對象是否可以被穿過或被攻擊。

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; // 優(yōu)先取對象的成員，繼承自父類的會被覆蓋。

}

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 寫入地圖的數(shù)據(jù)。

在Common.js 中添加以下代碼：

代碼如下:

//地圖元素類型枚舉

/*

0：空地

1：墻

2：鋼

3：樹叢

4：河

5：總部

*/

var EnumMapCellType = {

Empty: "0"

, Wall: "1"

, Steel: "2"

, Tod: "3"

, River: "4"

, Podium: "5"

};

// 每個地形對應(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';

// 存儲關(guān)卡地圖 0,1,2,3... 分別為1-n ... 關(guā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; // 游戲主循環(huán)計時器id

/*v2.0新加的屬性*/

this._level = 1;

this._rowCount = 13;

this._colCount = 13;

this._battleField = []; // 存儲地圖對象二維數(shù)組

}

// 加載地圖方法

Load: function () {

// 根據(jù)等級初始化地圖

var map = Top_MapLevel[this._level - 1].split(",");

var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);

// 遍歷地圖表格中每一個單元格

for (var i = 0; i < this._rowCount; i++) {

// 創(chuàng)建div，每一行的地圖保存在這個div中

var divRow = UtilityClass.CreateE("div", "", "", mapBorder);

// 在一維數(shù)組中再創(chuàng)建一個數(shù)組

this._battleField[i] = [];

for (var j = 0; j < this._colCount; j++) {

// 讀取地圖數(shù)據(jù)，默認值：0

var v = (map[i] && map[i].charAt(j)) || 0;

// 插入span元素，一個span元素即為一個地圖單位

var spanCol = UtilityClass.CreateE("span", "", "", divRow);

spanCol.className = ArrayCss[v];

// 將地圖對象放入二維數(shù)組中，便于后面碰撞檢測。

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，因為內(nèi)部循環(huán)是橫向的，x是橫坐標

to.XPosition = j;

to.YPosition = i;

// 將當前的地圖對象存入二維數(shù)組中obj為障礙物對象，occupier為占有對象

this._battleField[i][j] = { obj: to, occupier: null, lock: false };

} //end for

} // end for

// 放入window全局變量

window.BattleField = this._battleField;

}

ok，到這里我們的地圖就大功告成了。 這里的注釋已經(jīng)很詳細了，如果大家還有不理解的地方自己下載源碼調(diào)試一下就很好理解了。

這里主要加載地圖數(shù)據(jù)，將每一個地圖作為span元素插入html文檔中。并且將地圖的對象存儲在二維數(shù)組中。以后我們做碰撞檢測的時候就可以直接通過對象的坐標取到對應(yīng)的數(shù)組對象，十分方便。

更多信息請查看IT技術(shù)專欄