龙盟编程论坛 | 龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript制作坦克大战全纪录(2)

时间:2014-12-03 11:00来源:网络整理 作者:网络 点击:
分享到:
上文我们简单的完成了坦克大战的雏形,本文我们来继续完善坦克大战,接下来我们来学习制作地图和碰撞检测方面的问题。

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;
     }

精彩图集

赞助商链接