用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