在線體驗：http://hymhub.gitee.io/plane-game
源碼：https://gitee.com/hymhub/plane-game
游戲音效用了FC魂斗羅的，可在電腦和安卓設備體驗（安卓推薦將鏈接在微信或QQ聊天發送后點擊打開），移動端子彈自動發射，添加了手指按住飛機拖動操作。PC端操作見下文。
游戲主要有幾個知識點：
第一個：判斷子彈與敵方飛機碰撞判斷，敵方飛機與我方飛機碰撞判斷，我方飛機與道具碰撞判斷，都是一樣的，實際都是判斷兩者是否有重合
首先我們舉例子彈與敵機碰撞：
這里畫了個圖，可以分析出x坐標碰撞的判斷條件，而y坐標也是一樣，如下：
此時就限定了子彈的x和y必須在敵機范圍內才會觸發，同理我方飛機與敵方飛機碰撞判斷條件是：
(我方飛機X坐標 + 我方飛機寬度 > 敵方飛機X坐標 && 我方飛機X坐標 < 敵方飛機X坐標 + 敵方飛機寬度) && (我方飛機Y坐標 <= 敵方飛機Y坐標 + 敵方飛機高度 && 我方飛機Y坐標 + 我方飛機高度 > 敵方飛機Y坐標)
第二個：游戲中Boss發子彈算法是利用boss移動的定時器使變量num自增，然后滿足以下公式就發射子彈，增加了可變性：
（num++ % (parseInt(Math.random() * 300) + 400) == 0)
第三個：Boss的子彈移動算法（Boss有兩種子彈，這里說的是圓形子彈，激光子彈是垂直降落，就不說了）：
Boss的子彈移動規則是從發射子彈時Boss的位置向我的飛機位置勻速移動，這個需要做的就是讓一個點勻速往另一個點移動，但是他們的x，y相差的距離又不一樣，
假如把Boss的子彈需要移動的x和y總距離分別分成100份，就可以讓x每次移動需要移動的x總距離除以100，y也一樣，這樣就實現了，我這里分成了400份，代碼為：
// this.x、this.y代表Boss子彈的x、y坐標，this.myPlaneY代表目標點的y坐標，this.bossX代表boss發射子彈的起始x坐標
// 因為boss永遠是從上面往下發射子彈，所以可以直接寫成下面這樣
setInterval(() => {
this.y += this.myPlaneY / 400;
this.x += (this.myPlaneX - this.bossX) / 400;
this.zidanNode.style.top = this.y + 'px';
this.zidanNode.style.left = this.x + 'px';
}, 10);
第四個：Boss移動算法，見過windowXP系統的屏幕保護氣泡動畫的都知道，就是讓boss在一個矩形內x/y坐標都遞增，碰到邊界往反方向走，代碼如下：
this.tempX = 1；
this.tempY = 1;
setInterval(() => {
this.x += 0.2 * this.tempX;
this.y += 0.2 * this.tempY;
// 矩形寬高：320 * 60(Boss的活動范圍)
// 碰到左右邊界
if (this.x <= 0 || this.x >= 320 - this.srcObj.w) { // this.srcObj.w：Boss自身寬度
this.tempX = -this.tempX;
}
// 碰到上下邊界
if (this.y <= 0 || this.y >= 60) {
this.tempY = -this.tempY;
}
}, 10);
這個案例還可以做很多其他有趣的東西，有興趣也可以看看我寫的小球游戲和運動留言板：https://www.cnblogs.com/hymenhan/p/14215793.html
游戲說明：
1、大飛機需5發子彈死亡，中飛機3發，小飛機1發
2、敵方飛機移動速度和敵方飛機生產速度會逐漸加快，峰值有上限
3、游戲中會隨機出現三連發道具和全屏炸彈道具，三連發有效期10秒，時間不疊加
4、每殺100個敵人會有可能觸發boss出現
5、控制鍵：WASD移動，回車或數字鍵0發射子彈，按住不放持續發射
