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

Posted 2020-09-20 杨铭宇

 

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

 

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

 

3. 碰撞检测

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

3.1    创建碰撞检测对象

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

HitTestObject.js：

 

 View Code

 

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

3.2   调用碰撞检测

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

 更改 Mover.js

  1、继承碰撞检测对象

1	Mover.prototype = new HitTestObject();

　　

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

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

　　

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

1 2 3 4

battleField[nextPoint.y][nextPoint.x].occupier = This;  /*占用新位置*/ // 清空对象原来位置占有 battleField[yp][xp].occupier = null;

　　

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

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

更改 tank.js  UpdateUi方法

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

4.   发射炮弹

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

 

4.1 爆炸效果对象

　　Explode.js：

 

 

 View Code

 

 

 

4.2 炮弹对象

 　　Bomb.js:

 View Code

 

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