用javascript 面向對象製做坦克大戰（二）

時間 2019-11-15

標籤 javascript 面向對象製做坦克大戰欄目 JavaScript 简体版

原文原文鏈接

2. 完善地圖

咱們的地圖中有空地，牆，鋼，草叢，水，總部等障礙物。咱們能夠把這些所有設計爲對象。

2.1 建立障礙物對象羣

對象羣保存各類地圖上的對象，咱們經過對象的屬性來判斷對象是否能夠被穿過或被攻擊。

Barrier.js:

 1 // 障礙物基類對象，繼承自TankObject
 2 Barrier = function () {
 3     this.DefenVal = 1;  // 防護力
 4     this.CanBeAttacked = true;  // 是否能夠被攻擊
 5 }
 6 Barrier.prototype = new TankObject();
 7 // 牆
 8 WallB = function () { }
 9 WallB.prototype = new Barrier();
10 // 空地
11 EmptyB = function () {
12     this.CanAcross = true;  // 可被穿過
13 }
14 EmptyB.prototype = new Barrier();
15 // 河流
16 RiverB = function () {
17     this.DefenVal = 0;
18     this.CanBeAttacked = false; // 優先取對象的成員，繼承自父類的會被覆蓋。
19 }
20 RiverB.prototype = new Barrier();
21 // 鋼
22 SteelB = function () {
23     this.DefenVal = 3;
24 }
25 SteelB.prototype = new Barrier();
26 // 草叢對象
27 TodB = function () {
28     this.CanBeAttacked = false;
29     this.DefenVal = 0;
30     this.CanAcross = true;
31 }
32 TodB.prototype = new Barrier();
33 // 總部
34 PodiumB = function () {
35     this.DefenVal = 5;
36 }
37 PodiumB.prototype = new Barrier();

View Code

2.2 寫入地圖的數據。

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

 1 //地圖元素類型枚舉
 2 /*
 3 0：空地    
 4 1：牆    
 5 2：鋼    
 6 3：樹叢        
 7 4：河        
 8 5：總部    
 9 */
10 
11 var EnumMapCellType = {
12     Empty: "0"
13     , Wall: "1"
14     , Steel: "2"
15     , Tod: "3"
16     , River: "4"
17     , Podium: "5"
18 };
19 
20 // 每一個地形對應的樣式名稱
21 var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
22 
23 // 關卡地圖
24 /*關卡*/
25 var str = '0000000000000';
26 str += ',0011100111010';
27 str += ',1000010000200';
28 str += ',1200333310101';
29 str += ',0000444400001';
30 str += ',3313300001011';
31 str += ',3011331022011';
32 str += ',3311031011011';
33 str += ',0101011102010';
34 str += ',0101011010010';
35 str += ',0100000000110';
36 str += ',0100012101101';
37 str += ',0010015100000';
38 // 存儲關卡地圖   0,1,2,3... 分別爲1-n ... 關
39 var Top_MapLevel = [str];

View Code

2.3 繪製地圖

準備工做作完了，下面開始上大菜，繪製地圖。前面有提到咱們的地圖爲 13 * 13 的表格。因此咱們在遊戲裝載對象添加行和列兩個屬性，而且添加初始化地圖方法。

Frame.js:

 1 // 遊戲載入對象 整個遊戲的核心對象
 2 GameLoader = function () {
 3     this._mapContainer = document.getElementById("divMap");  // 存放遊戲地圖的div
 4     this._selfTank = null;  // 玩家坦克
 5     this._gameListener = null; // 遊戲主循環計時器id
 6     /*v2.0新加的屬性*/
 7     this._level = 1;
 8     this._rowCount = 13;
 9     this._colCount = 13;
10     this._battleField = []; // 存儲地圖對象二維數組
11 
12 }
13 
14 
15 // 加載地圖方法
16    Load: function () {
17         // 根據等級初始化地圖
18         var map = Top_MapLevel[this._level - 1].split(",");
19         var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
20         // 遍歷地圖表格中每個單元格
21         for (var i = 0; i < this._rowCount; i++) {
22             // 建立div，每一行的地圖保存在這個div中
23             var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
24             // 在一維數組中再建立一個數組
25             this._battleField[i] = [];
26             for (var j = 0; j < this._colCount; j++) {
27                 // 讀取地圖數據，默認值：0
28                 var v = (map[i] && map[i].charAt(j)) || 0;
29                 // 插入span元素，一個span元素即爲一個地圖單位
30                 var spanCol = UtilityClass.CreateE("span", "", "", divRow);
31                 spanCol.className = ArrayCss[v];
32 
33 
34                 // 將地圖對象放入二維數組中，便於後面碰撞檢測。
35                 var to = null;
36                 switch (v) {
37                     case EnumMapCellType.Empty:
38                         to = new EmptyB();
39                         break;
40                     case EnumMapCellType.Wall:
41                         to = new WallB();
42                         break;
43                     case EnumMapCellType.Steel:
44                         to = new SteelB();
45                         break;
46                     case EnumMapCellType.Tod:
47                         to = new TodB();
48                         break;
49                     case EnumMapCellType.River:
50                         to = new RiverB();
51                         break;
52                     case EnumMapCellType.Podium:
53                         to = new PodiumB();
54                         break;
55                     default:
56                         throw new Error("地圖數字越界！");
57                         break;
58                 }
59 
60                 to.UI = spanCol;
61                 //這裏的j就是X，由於內部循環是橫向的，x是橫座標
62                 to.XPosition = j;
63                 to.YPosition = i;
64                 // 將當前的地圖對象存入二維數組中obj爲障礙物對象，occupier爲佔有對象
65                 this._battleField[i][j] = { obj: to, occupier: null, lock: false };
66 
67             }   //end for
68         }   // end for
69         // 放入window全局變量
70         window.BattleField = this._battleField;
71 
72     }