javascript製作坦克大戰全紀錄（2）_javascript技巧

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              // 建立div，且每一行的地圖保存在這個div中
             var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
             // 在一維陣列中再建立一個陣列
             this._battleField[i] = [];
             for (var j = 0; 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