用javascript 面向对象制作坦克大战（三）

　　之前，我们完成了坦克的移动和地图的绘制，这次我们来完成碰撞检测和炮弹的发射。

　　上代码前来张最新的类图：

3. 碰撞检测

    前面我们已经完成了坦克的移动和地图的绘制，下面我们开始写碰撞检测。

3.1    创建碰撞检测对象

        我们创建一个对象来做碰撞检测，由于碰撞检测都是在对象移动的时候进行的所以我们让Mover继承我们的碰撞对象。

 

HitTestObject.js：

 

 // 碰撞检测对象 继承自顶级对象
 HitTestObject = function () { }

 HitTestObject.prototype = new TankObject();
 // 碰撞检测 参数为地图对象 返回true则不能移动
 HitTestObject.prototype.HitTest = function (battleField) {

     var nextObj = this.GetNextBattleFieldCell(battleField);
     if (nextObj == null) {
         return true;// 场景越界
     }
     // 检测是否是障碍物
     if (nextObj.obj instanceof Barrier) {

         if (nextObj.obj instanceof EmptyB) {
             // 判断是否被其他坦克占用  Tank继承自Mover
             return nextObj.occupier instanceof Mover;
         }
         return !nextObj.obj.CanAcross;
     }

 }

 // 返回对象移动下个位置的地图对象
 HitTestObject.prototype.GetNextBattleFieldCell = function (battleField) {

     if (this.Direction == EnumDirection.Up && this.YPosition == 0 ||
         this.Direction == EnumDirection.Down && this.YPosition == 12 ||
         this.Direction == EnumDirection.Left && this.XPosition == 0 ||
         this.Direction == EnumDirection.Right && this.XPosition == 12
         ) {
         return null;/* 场景越界 */
     }

     var y = this.YPosition;
     var x = this.XPosition;
     var nextAxes = this.GetNextAxes(x, y);
     return battleField[nextAxes.y][nextAxes.x];
 }

 // 得到对象的下个位置的坐标
 HitTestObject.prototype.GetNextAxes = function (x, y) {
     var point = { x: x, y: y };
     switch (this.Direction + "") {    // 加空字符转换为字符串类型
         case EnumDirection.Up:
             point.y--; break;
         case EnumDirection.Right:
             point.x++; break;
         case EnumDirection.Down:
             point.y++; break;
         case EnumDirection.Left:
             point.x--; break;
     }
     return point;
 }

 HitTestObject.prototype.OnHitTest = function (battleField) {
     //  预留给炮弹对象重写
 }

　　这里我们把之前写的地图二维数组对象充分利用上了。通过对象x,y坐标取对应的地图对象，再根据属性判断是否可被穿过，是否已被占用。

3.2   调用碰撞检测

　　这里需要我们在之前的代码做一系列的更改了。

更改 Mover.js

  1、继承碰撞检测对象

 

Mover.prototype = new HitTestObject();

　　

  2、在Mover方法中调用碰撞检测

// 碰撞检测
    if (this.HitTest(battleField)) { return this.OnHitTest(battleField); }

　　

 

  3、移动完成后占用新地图对象，清空原对象地图占用。

 

battleField[nextPoint.y][nextPoint.x].occupier = This;  /*占用新位置*/

// 清空对象原来位置占有
battleField[yp][xp].occupier = null;

　　

还有一些更改就不一一列出了，大家可以下载源码查看。

 

更改    Frame.js 给方法加上参数。

更改 tank.js  UpdateUi方法

初始化坦克时，占有当前位置。

  

4.   发射炮弹

炮弹可以移动，所以继承自我们的Mover对象。炮弹击中障碍物时会有爆炸效果，所以我们先写爆炸对象。

 

4.1 爆炸效果对象

　　Explode.js：

 // 爆炸效果类
 Explode = function () {
     this.container = document.getElementById("divMap");
     this.UI = null;
     this.step = 8;  // 共8张图
     this.speed = 50;    // 动画播放速度
 }

 // 播放爆炸效果
 Explode.prototype.Play = function (x,y) {
     this.UI = UtilityClass.CreateE("div", "", "explode", this.container);
     this.MoveTo(x, y);

     var i = 0;
     var This = this;
     var FxTimer = setInterval(function () {
         This.UI.style.backgroundPosition = '0 -' + i * 60 + 'px';
         i++;
         if (i==This.step) {
             clearInterval(FxTimer);
             This.Stop();
         }
     },this.speed);
 }

 // 播放位置
 Explode.prototype.MoveTo = function (x,y) {

     if (this.UI != null) {
         this.UI.style.left = x * 40 - 10 + "px";
         this.UI.style.top = y * 40 - 10 + "px";
     }

 }

 // 移除dom元素
 Explode.prototype.Stop = function () {
     UtilityClass.RemoveE(this.UI, this.container);
 }

4.2 炮弹对象

 　　Bomb.js:

 

 //  炮弹对象,这个对象需要放在TANK对象前面，有先后顺序
 Bomb = function () {
     this.Owner = null;
     this.Power = 1;
     this.Speed = 7;
 }

 Bomb.prototype = new Mover();
 Bomb.prototype.Load = function (x,y) {
     // 创建炮弹对象，初始化位置
     this.UI = UtilityClass.CreateE("div", "", "bomb", document.getElementById("divMap"))
     this.SetPosition(x * 40, y * 40);   /*父类方法*/

 }

 // 重写HitTest方法
 Bomb.prototype.HitTest = function (battleField) {
     var nextObj = this.GetNextBattleFieldCell(battleField);
     if (nextObj == null) {
         return true;
     }
     // 检测是否是障碍物
     if (nextObj.obj instanceof Barrier) {
         // 河流穿过
         if (this instanceof Bomb && nextObj.obj instanceof RiverB) {
             return false;
         }

         return !nextObj.obj.CanAcross;
     }

 }

 // 重写OnHitTest方法 当炮弹碰撞到不可穿过对象时调用
 Bomb.prototype.OnHitTest = function (battleField) {

     // 播放爆炸效果
     var ex = new Explode();
     ex.Play(this.XPosition, this.YPosition);
     this.Owner.BombUsed--;      /*已用弹药数减一*/
     // 清空地图占有位置，移除元素
     battleField[this.YPosition][this.XPosition].occupier = null;
     UtilityClass.RemoveE(this.UI, document.getElementById("divMap"));

     var nextObj = this.GetNextBattleFieldCell(battleField);
     if (nextObj == null) { return; }
     // 炮弹打到了障碍物
     if (nextObj.obj instanceof Barrier) {
         if (nextObj.obj.CanBeAttacked) {
             nextObj.obj.DefenVal -= this.Power;
             // 障碍物防御值降到0，把障碍物变为空地
             if (nextObj.obj.DefenVal <= 0) {
                 var to = new EmptyB();
                 to.UI = nextObj.obj.UI;
                 to.XPosition = nextObj.obj.XPosition;
                 to.YPosition = nextObj.obj.YPosition;
                 nextObj.obj = to;
                 to.UI.className = "";
                 battleField[this.YPosition][this.XPosition].obj.UI.className = "";
             }
         }
     }

 }

 　　主要的对象完成了，调用就是水到渠成了，我们需要给坦克添加一个发射炮弹的方法，并在玩家按下空格键时调用就可以了。  大家可以试着自己写下实现。  

 

TankV3.0 下载地址：

 

http://pan.baidu.com/s/1hqADJYO