javascript製作坦克大戰全紀錄（2）_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:30 PM

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;

     }