javascript制作坦克大战全纪录（2）

163 阅读 0 评论 108 点赞

我是靠谱客的博主平淡墨镜，最近开发中收集的这篇文章主要介绍javascript制作坦克大战全纪录（2），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 < this._rowCount; i++) {

             // 创建div，每一行的地图保存在这个div中

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

             // 在一维数组中再创建一个数组

             this._battleField[i] = [];

             for (var j = 0; j < this._colCount; 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;

     }