如何通过VUE和Canvas技术制作雷霆战机打字游戏？

本文共计3951个文字，预计阅读时间需要16分钟。

今天就来体验一款雷电战机打字游戏，玩法很简单，每一个敌人都是一些英文单词，键盘正确打出单词的字母，飞机就会发射子弹消灭敌人，每次需要点击当前敌人。

今天就来实现一个雷霆战机打字游戏，玩法很简单，每一个“敌人”都是一些英文单词，键盘正确打出单词的字母，飞机就会发射一个个子弹消灭“敌人”，每次需要击毙当前“敌人”后才能击毙下一个，一个比手速和单词熟练度的游戏。

首先来看看最终效果图：

emmmmmmmmmmmmm，界面UI做的很简单，先实现基本功能，再考虑高大上的UI吧。

首先依旧是来分析界面组成：

（1）固定在画面底部中间的飞机；

（2）从画面上方随机产生的敌人（单词）；

（3）从飞机头部发射出去，直奔敌人而去的子弹；

（4）游戏结束后的分数显示。

这次的游戏和之前的比，运动的部分貌似更多且更复杂了。在flappy bird中，虽然管道是运动的，但是小鸟的x坐标和管道的间隔、宽度始终不变，比较容易计算边界；在弹球消砖块游戏中，木板和砖块都是相对简单或者固定的坐标，只用判定弹球的边界和砖块的触碰面积就行。在雷霆战机消单词游戏中，无论是降落的目标单词，还是飞出去的子弹，都有着各自的运动轨迹，但是子弹又要追寻着目标而去，所以存在着一个实时计算轨道的操作。