scrip battle border 碰撞 type ges 實現 面向 gif

　　之前，我們完成了坦克的移動和地圖的繪制，這次我們來完成碰撞檢測和炮彈的發射。

　　上代碼前來張最新的類圖：

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

　　主要的對象完成了，調用就是水到渠成了，我們需要給坦克添加一個發射炮彈的方法，並在玩家按下空格鍵時調用就可以了。 大家可以試著自己寫下實現。

用javascript 面向對象制作坦克大戰（三）