国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript制作坦克大戰(zhàn)全紀(jì)錄(2)

2019-11-20 13:51:42
字體:
供稿:網(wǎng)友

2.   完善地圖

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

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

    對(duì)象群保存各種地圖上的對(duì)象,我們通過對(duì)象的屬性來判斷對(duì)象是否可以被穿過或被攻擊。
 
Barrier.js:
 

復(fù)制代碼 代碼如下:

 // 障礙物基類對(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 中添加以下代碼:
 

復(fù)制代碼 代碼如下:

 //地圖元素類型枚舉
 /*
 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:
 

復(fù)制代碼 代碼如下:

 // 游戲載入對(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ì)象,十分方便。

附上源碼:http://xiazai.VeVB.COm/201411/yuanma/jstankedazhan(VeVB.COm).rar

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 曲麻莱县| 湟中县| 临清市| 清远市| 石林| 百色市| 白水县| 新密市| 鄂伦春自治旗| 襄城县| 松江区| 嘉鱼县| 克什克腾旗| 黄骅市| 东明县| 会同县| 霞浦县| 城市| 广元市| 无为县| 玉田县| 宁远县| 疏附县| 德令哈市| 麻阳| 肃南| 平远县| 策勒县| 霍山县| 石阡县| 金塔县| 洛隆县| 濮阳市| 宁德市| 桐城市| 滁州市| 兰溪市| 东丽区| 阿拉善盟| 奉化市| 漳平市|