这里先优化一下上一集中的自己飞机死亡的判断，之前的判断有点问题，坐标算的有点问题，重新优化之后代码如下
private myIsDie() {
this.enemyPlainList.forEach(item => {
let a1 = this.myPlainX + (this.myPlainSize / 2)
let b1 = this.myPlainY + (this.myPlainSize / 2)
let a2 = item.x + (this.enemyPlainSize / 2)
let b2 = item.y + (this.enemyPlainSize / 2)
let centerDistance = Math.sqrt(Math.pow((a1 - a2), 2) + Math.pow((b1 - b2), 2))
if (centerDistance <= (this.myPlainSize / 2)) {
this.isGameOver = true
clearTimeout(this.timeOutBullet)
clearTimeout(this.timeOutEnemyPlain)
}
})
}
将两点的坐标分别加上他们的宽度的一半，才是真正圆心的坐标位置，同时在if判断里面，只判断了自己飞机大小的一半距离，这样的话，效果更明显一点。
主页面优化
所有的游戏都有一个开始界面，我们也来做一个游戏开始的界面吧，昨天的时候，我偶然间在网上找到了一些飞机大战的原始素材，这里先做一下替换吧，效果如下
现在开始编写游戏开始界面吧，先定义一个变量用来标识游戏是否开始
@State private gameIsStart: boolean = false
然后在主定时器里面判断游戏是否开始
if (!this.gameIsStart) {
clearTimeout(this.timeOutBullet)
clearTimeout(this.timeOutEnemyPlain)
} else {
this.i++
}
接下来就可以画界面了
开始逻辑判断，当点击了开始游戏按钮之后，直接更改变量属性，然后执行一次重新开始游戏的方法逻辑即可
private startGame() {
this.gameIsStart = true
this.reStartGame()
}
修改一下gameover之后的样式
来看一遍效果吧
现在开始完善设置，这个里面主要是对游戏的一些参数，比如敌机刷新速度，飞行速度，子弹速度等，思路也很简单，直接更惨参数的默认值就行了，效果如下
忽然发现游戏结束后，只能重新开始，这肯定是不行的，那就在给他加一个退出游戏按钮吧，代码如下
private exitGame() {
this.enemyPlainList = []
this.bulletList = []
this.score = 0
this.gameIsStart = false
this.isShowSetting = false
this.isGameOver = false
this.myPlainX = 180 - (this.myPlainSize / 2)
this.myPlainY = 650
}
运行看一下效果
那么飞机大战小游戏就先到这里啦，下期再见
