如何用VUE和Canvas实现雷霆战机打字类小游戏

小咪咪 2022-10-15 00:43 119阅读 0赞

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

首先来看看最终效果图：

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

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

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

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

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

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

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

万丈高楼平地起，说了那么多，那就从最简单的开始着手吧！

1、固定在画面底部中间的飞机  
这个很简单没啥好说的，这里默认飞机宽度高度为40像素单位，然后将飞机画在画面的底部中间：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
drawPlane() \{  
let \_this = this;  
\_this.ctx.save();  
\_this.ctx.drawImage(  
\_this.planeImg,  
\_this.clientWidth / 2 - 20,  
\_this.clientHeight - 20 - 40,  
40,  
40  
);  
\_this.ctx.restore();  
\},  
2、从画面上方随机产生的敌人  
这里默认设置每次在画面中最多只出现3个单词靶子，靶子的y轴移动速度为1.3，靶子的半径大小为10：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
const \_MAX\_TARGET = 3; // 画面中一次最多出现的目标  
  
const \_TARGET\_CONFIG = \{  
// 靶子的固定参数  
  
speed: 1.3,  
  
radius: 10  
  
\};  
然后我们一开始要随机在词库数组里取出\_MAX\_TARGET个不重复的单词，并把剩下的词放进循环词库this.wordsPool中去：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
generateWord(number) \{  
// 从池子里随机挑选一个词，不与已显示的词重复  
let arr = \[\];  
for (let i = 0; i < number; i++) \{  
let random = Math.floor(Math.random() \* this.wordsPool.length);  
arr.push(this.wordsPool\[random\]);  
this.wordsPool.splice(random, 1);  
\}  
return arr;  
\},  
generateTarget() \{  
// 随机生成目标  
let \_this = this;  
let length = \_this.targetArr.length;  
if (length < \_MAX\_TARGET) \{  
let txtArr = \_this.generateWord(\_MAX\_TARGET - length);  
for (let i = 0; i < \_MAX\_TARGET - length; i++) \{  
\_this.targetArr.push(\{  
x: \_this.getRandomInt(  
\_TARGET\_CONFIG.radius,  
\_this.clientWidth - \_TARGET\_CONFIG.radius  
),  
y: \_TARGET\_CONFIG.radius \* 2,  
txt: txtArr\[i\],  
typeIndex: -1,  
hitIndex: -1,  
dx: (\_TARGET\_CONFIG.speed \* Math.random().toFixed(1)) / 2,  
dy: \_TARGET\_CONFIG.speed \* Math.random().toFixed(1),  
rotate: 0  
\});  
\}  
\}  
\}  
可以看出，this.targetArr是存放目标对象的数组：

一个初始的目标有随机分布在画面宽度的x；

y轴值为直径；

txt记录靶子代表的单词；

typeIndex记录“轰炸”这个单词时正在敲击的字符索引下标（用来分离已敲击字符和未敲击字符）；

hitIndex记录“轰炸”这个单词时子弹轰炸的索引下标（因为子弹真正轰炸掉目标是在打完单词之后，毕竟子弹有飞行时间，所以通过hitIndex来判断子弹什么时候被击碎消失）；

dx是靶子每帧在x轴偏移距离；

dy是靶子每帧在y轴偏移距离；

rotate设置靶子自转角度。

好了，生成了3个靶子，我们就让靶子先从上往下动起来吧：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
drawTarget() \{  
// 逐帧画目标  
let \_this = this;  
\_this.targetArr.forEach((item, index) => \{  
\_this.ctx.save();  
\_this.ctx.translate(item.x, item.y); //设置旋转的中心点  
\_this.ctx.beginPath();  
\_this.ctx.font = "14px Arial";  
if (  
index === \_this.currentIndex ||  
item.typeIndex === item.txt.length - 1  
) \{  
\_this.drawText(  
item.txt.substring(0, item.typeIndex + 1),  
\-item.txt.length \* 3,  
\_TARGET\_CONFIG.radius \* 2,  
"gray"  
);  
let width = \_this.ctx.measureText(  
item.txt.substring(0, item.typeIndex + 1)  
).width; // 获取已敲击文字宽度  
\_this.drawText(  
item.txt.substring(item.typeIndex + 1, item.txt.length),  
\-item.txt.length \* 3 + width,  
\_TARGET\_CONFIG.radius \* 2,  
"red"  
);  
\} else \{  
\_this.drawText(  
item.txt,  
\-item.txt.length \* 3,  
\_TARGET\_CONFIG.radius \* 2,  
"yellow"  
);  
\}  
  
\_this.ctx.closePath();  
\_this.ctx.rotate((item.rotate \* Math.PI) / 180);  
\_this.ctx.drawImage(  
\_this.targetImg,  
\-1 \* \_TARGET\_CONFIG.radius,  
\-1 \* \_TARGET\_CONFIG.radius,  
\_TARGET\_CONFIG.radius \* 2,  
\_TARGET\_CONFIG.radius \* 2  
);  
\_this.ctx.restore();  
item.y += item.dy;  
item.x += item.dx;  
if (item.x < 0 || item.x > \_this.clientWidth) \{  
item.dx \*= -1;  
\}  
if (item.y > \_this.clientHeight - \_TARGET\_CONFIG.radius \* 2) \{  
// 碰到底部了  
\_this.gameOver = true;  
\}  
// 旋转  
item.rotate++;  
\});  
\}  
这一步画靶子没有什么特别的，随机得增加dx和dy，在碰到左右边缘时反弹。主要一点就是单词的绘制，通过typeIndex将单词一分为二，敲击过的字符置为灰色，然后通过measureText获取到敲击字符的宽度从而设置未敲击字符的x轴偏移量，将未敲击的字符设置为红色，提示玩家这个单词是正在攻击中的目标。

3、从飞机头部发射出去，直奔敌人而去的子弹  
子弹是这个游戏的关键部分，在绘制子弹的时候要考虑哪些方面呢？

（1）目标一直是运动的，发射出去的子弹要一直“追踪”目标，所以路径是动态变化的；

（2）一个目标需要被若干个子弹消灭掉，所以什么时候子弹才从画面中抹去；

（3）当一个目标单词被敲击完了后，下一批子弹就要朝向下一个目标射击，所以子弹的路径是单独的；

（4）如何绘制出子弹的拖尾效果；

（5）如果锁定正在敲击的目标单词，使玩家敲完当前单词才能去击破下一个单词

这里先设置几个变量：

bulletArr: \[\], // 存放子弹对象

currentIndex: -1 //当前锁定的目标在targetArr中的索引

首先我们先来写一下键盘按下时要触发的函数：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
handleKeyPress(key) \{  
// 键盘按下,判断当前目标  
let \_this = this;  
if (\_this.currentIndex === -1) \{  
// 当前没有在射击的目标  
let index = \_this.targetArr.findIndex(item => \{  
return item.txt.indexOf(key) === 0;  
\});  
if (index !== -1) \{  
\_this.currentIndex = index;  
\_this.targetArr\[index\].typeIndex = 0;  
\_this.createBullet(index);  
\}  
\} else \{  
// 已有目标正在被射击  
if (  
key ===  
\_this.targetArr\[\_this.currentIndex\].txt.split("")\[  
\_this.targetArr\[\_this.currentIndex\].typeIndex + 1  
\]  
) \{  
// 获取到目标对象  
\_this.targetArr\[\_this.currentIndex\].typeIndex++;  
\_this.createBullet(\_this.currentIndex);  
  
if (  
\_this.targetArr\[\_this.currentIndex\].typeIndex ===  
\_this.targetArr\[\_this.currentIndex\].txt.length - 1  
) \{  
// 这个目标已经别射击完毕  
\_this.currentIndex = -1;  
\}  
\}  
\}  
\},  
// 发射一个子弹  
createBullet(index) \{  
let \_this = this;  
this.bulletArr.push(\{  
dx: 1,  
dy: 4,  
x: \_this.clientWidth / 2,  
y: \_this.clientHeight - 60,  
targetIndex: index  
\});  
\}  
这个函数做的事情很明确，拿到当前键盘按下的字符，如果currentIndex ===-1，证明没有正在被攻击的靶子，所以就去靶子数组里看，哪个单词的首字母等于该字符，则设置currentIndex为该单词的索引，并发射一个子弹；如果已经有正在被攻击的靶子，则看还未敲击的单词的第一个字符是否符合，若符合，则增加该靶子对象的typeIndex，并发射一个子弹，若当前靶子已敲击完毕，则重置currentIndex为-1。

接下来就是画子弹咯：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
68  
69  
70  
71  
72  
73  
drawBullet() \{  
// 逐帧画子弹  
let \_this = this;  
// 判断子弹是否已经击中目标  
if (\_this.bulletArr.length === 0) \{  
return;  
\}  
\_this.bulletArr = \_this.bulletArr.filter(\_this.firedTarget);  
\_this.bulletArr.forEach(item => \{  
let targetX = \_this.targetArr\[item.targetIndex\].x;  
let targetY = \_this.targetArr\[item.targetIndex\].y;  
let k =  
(\_this.clientHeight - 60 - targetY) /  
(\_this.clientWidth / 2 - targetX); // 飞机头和目标的斜率  
let b = targetY - k \* targetX; // 常量b  
item.y = item.y - bullet.dy; // y轴偏移一个单位  
item.x = (item.y - b) / k;  
for (let i = 0; i < 15; i++) \{  
// 画出拖尾效果  
\_this.ctx.beginPath();  
\_this.ctx.arc(  
(item.y + i \* 1.8 - b) / k,  
item.y + i \* 1.8,  
4 - 0.2 \* i,  
0,  
2 \* Math.PI  
);  
\_this.ctx.fillStyle = \`rgba(193,255,255,$\{1 - 0.08 \* i\})\`;  
\_this.ctx.fill();  
\_this.ctx.closePath();  
\}  
\});  
\},  
firedTarget(item) \{  
// 判断是否击中目标  
let \_this = this;  
if (  
item.x > \_this.targetArr\[item.targetIndex\].x - \_TARGET\_CONFIG.radius &&  
item.x < \_this.targetArr\[item.targetIndex\].x + \_TARGET\_CONFIG.radius &&  
item.y > \_this.targetArr\[item.targetIndex\].y - \_TARGET\_CONFIG.radius &&  
item.y < \_this.targetArr\[item.targetIndex\].y + \_TARGET\_CONFIG.radius  
) \{  
// 子弹击中了目标  
let arrIndex = item.targetIndex;  
\_this.targetArr\[arrIndex\].hitIndex++;  
if (  
\_this.targetArr\[arrIndex\].txt.length - 1 ===  
\_this.targetArr\[arrIndex\].hitIndex  
) \{  
// 所有子弹全部击中了目标  
let word = \_this.targetArr\[arrIndex\].txt;  
\_this.targetArr\[arrIndex\] = \{  
// 生成新的目标  
x: \_this.getRandomInt(  
\_TARGET\_CONFIG.radius,  
\_this.clientWidth - \_TARGET\_CONFIG.radius  
),  
y: \_TARGET\_CONFIG.radius \* 2,  
txt: \_this.generateWord(1)\[0\],  
typeIndex: -1,  
hitIndex: -1,  
dx: (\_TARGET\_CONFIG.speed \* Math.random().toFixed(1)) / 2,  
dy: \_TARGET\_CONFIG.speed \* Math.random().toFixed(1),  
rotate: 0  
\};  
\_this.wordsPool.push(word); // 被击中的目标词重回池子里  
\_this.score++;  
\}  
return false;  
\} else \{  
return true;  
\}  
\}  
其实也很简单，我们在子弹对象中用targetIndex来记录该子弹所攻击的目标索引，然后就是一个y = kx+b的解方程得到飞机头部（子弹出发点）和靶子的轨道函数，计算出每一帧下每个子弹的移动坐标，就可以画出子弹了；

拖尾效果就是沿轨道y轴增长方向画出若干个透明度和半径逐渐变小的圆，就能实现拖尾效果了；

在firedTarget()函数中，用来过滤出已击中靶子的子弹，为了不影响还在被攻击的其他靶子在targetArr中的索引，不用splice删除，而是直接重置被消灭靶子的值，从wordPool中选出新的词，并把当前击碎的词重新丢回池子里，从而保证画面中不会出现重复的靶子。

4、游戏结束后的得分文字效果  
游戏结束就是有目标靶子触碰到了底部就结束了。

这里其实是个彩蛋了，怎么样可以用canvas画出这种闪烁且有光晕的文字呢？切换颜色并且叠buff就行了，不是，叠轮廓stroke就行了

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
drawGameOver() \{  
let \_this = this;  
//保存上下文对象的状态  
\_this.ctx.save();  
\_this.ctx.font = "34px Arial";  
\_this.ctx.strokeStyle = \_this.colors\[0\];  
\_this.ctx.lineWidth = 2;  
//光晕  
\_this.ctx.shadowColor = "\#FFFFE0";  
let txt = "游戏结束，得分：" + \_this.score;  
let width = \_this.ctx.measureText(txt).width;  
for (let i = 60; i > 3; i -= 2) \{  
\_this.ctx.shadowBlur = i;  
\_this.ctx.strokeText(txt, \_this.clientWidth / 2 - width / 2, 300);  
\}  
\_this.ctx.restore();  
\_this.colors.reverse();  
\}  
好了好了，做到这里就是个还算完整的小游戏了，只是UI略显粗糙，如果想做到真正雷霆战机那么酷炫带爆炸的效果那还需要很多素材和canvas的绘制。

canvas很强大很好玩，只要脑洞够大，这张画布上你想画啥就可以画啥~

老规矩，po上vue的完整代码供大家参考学习：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
68  
69  
70  
71  
72  
73  
74  
75  
76  
77  
78  
79  
80  
81  
82  
83  
84  
85  
86  
87  
88  
89  
90  
91  
92  
93  
94  
95  
96  
97  
98  
99  
100  
101  
102  
103  
104  
105  
106  
107  
108  
109  
110  
111  
112  
113  
114  
115  
116  
117  
118  
119  
120  
121  
122  
123  
124  
125  
126  
127  
128  
129  
130  
131  
132  
133  
134  
135  
136  
137  
138  
139  
140  
141  
142  
143  
144  
145  
146  
147  
148  
149  
150  
151  
152  
153  
154  
155  
156  
157  
158  
159  
160  
161  
162  
163  
164  
165  
166  
167  
168  
169  
170  
171  
172  
173  
174  
175  
176  
177  
178  
179  
180  
181  
182  
183  
184  
185  
186  
187  
188  
189  
190  
191  
192  
193  
194  
195  
196  
197  
198  
199  
200  
201  
202  
203  
204  
205  
206  
207  
208  
209  
210  
211  
212  
213  
214  
215  
216  
217  
218  
219  
220  
221  
222  
223  
224  
225  
226  
227  
228  
229  
230  
231  
232  
233  
234  
235  
236  
237  
238  
239  
240  
241  
242  
243  
244  
245  
246  
247  
248  
249  
250  
251  
252  
253  
254  
255  
256  
257  
258  
259  
260  
261  
262  
263  
264  
265  
266  
267  
268  
269  
270  
271  
272  
273  
274  
275  
276  
277  
278  
279  
280  
281  
282  
283  
284  
285  
286  
287  
288  
289  
290  
291  
292  
293  
294  
295  
296  
297  
298  
299  
300  
301  
302  
303  
304  
305  
306  
307  
308  
309  
310  
311  
312  
313  
314  
315  
316  
317  
318  
319  
320  
321  
322  
323  
324  
325  
326  
327  
328  
329  
330  
331  
332  
333  
334  
335  
336  
337  
338  
<template>  
<div class="type-game">  
<canvas id="type" width="400" height="600"></canvas>  
</div>  
</template>  
  
<script>  
const \_MAX\_TARGET = 3; // 画面中一次最多出现的目标  
const \_TARGET\_CONFIG = \{  
// 靶子的固定参数  
speed: 1.3,  
radius: 10  
\};  
const \_DICTIONARY = \["apple", "orange", "blue", "green", "red", "current"\];  
export default \{  
name: "TypeGame",  
data() \{  
return \{  
ctx: null,  
clientWidth: 0,  
clientHeight: 0,  
bulletArr: \[\], // 屏幕中的子弹  
targetArr: \[\], // 存放当前目标  
targetImg: null,  
planeImg: null,  
currentIndex: -1,  
wordsPool: \[\],  
score: 0,  
gameOver: false,  
colors: \["\#FFFF00", "\#FF6666"\]  
\};  
\},  
mounted() \{  
let \_this = this;  
\_this.wordsPool = \_DICTIONARY.concat(\[\]);  
let container = document.getElementById("type");  
\_this.clientWidth = container.width;  
\_this.clientHeight = container.height;  
\_this.ctx = container.getContext("2d");  
\_this.targetImg = new Image();  
\_this.targetImg.src = require("@/assets/img/target.png");  
  
\_this.planeImg = new Image();  
\_this.planeImg.src = require("@/assets/img/plane.png");  
  
document.onkeydown = function(e) \{  
let key = window.event.keyCode;  
if (key >= 65 && key <= 90) \{  
\_this.handleKeyPress(String.fromCharCode(key).toLowerCase());  
\}  
\};  
  
\_this.targetImg.onload = function() \{  
\_this.generateTarget();  
(function animloop() \{  
if (!\_this.gameOver) \{  
\_this.drawAll();  
\} else \{  
\_this.drawGameOver();  
\}  
window.requestAnimationFrame(animloop);  
\})();  
\};  
\},  
methods: \{  
drawGameOver() \{  
let \_this = this;  
//保存上下文对象的状态  
\_this.ctx.save();  
\_this.ctx.font = "34px Arial";  
\_this.ctx.strokeStyle = \_this.colors\[0\];  
\_this.ctx.lineWidth = 2;  
//光晕  
\_this.ctx.shadowColor = "\#FFFFE0";  
let txt = "游戏结束，得分：" + \_this.score;  
let width = \_this.ctx.measureText(txt).width;  
for (let i = 60; i > 3; i -= 2) \{  
\_this.ctx.shadowBlur = i;  
\_this.ctx.strokeText(txt, \_this.clientWidth / 2 - width / 2, 300);  
\}  
\_this.ctx.restore();  
\_this.colors.reverse();  
\},  
drawAll() \{  
let \_this = this;  
\_this.ctx.clearRect(0, 0, \_this.clientWidth, \_this.clientHeight);  
\_this.drawPlane(0);  
\_this.drawBullet();  
\_this.drawTarget();  
\_this.drawScore();  
\},  
drawPlane() \{  
let \_this = this;  
\_this.ctx.save();  
\_this.ctx.drawImage(  
\_this.planeImg,  
\_this.clientWidth / 2 - 20,  
\_this.clientHeight - 20 - 40,  
40,  
40  
);  
\_this.ctx.restore();  
\},  
generateWord(number) \{  
// 从池子里随机挑选一个词，不与已显示的词重复  
let arr = \[\];  
for (let i = 0; i < number; i++) \{  
let random = Math.floor(Math.random() \* this.wordsPool.length);  
arr.push(this.wordsPool\[random\]);  
this.wordsPool.splice(random, 1);  
\}  
return arr;  
\},  
generateTarget() \{  
// 随机生成目标  
let \_this = this;  
let length = \_this.targetArr.length;  
if (length < \_MAX\_TARGET) \{  
let txtArr = \_this.generateWord(\_MAX\_TARGET - length);  
for (let i = 0; i < \_MAX\_TARGET - length; i++) \{  
\_this.targetArr.push(\{  
x: \_this.getRandomInt(  
\_TARGET\_CONFIG.radius,  
\_this.clientWidth - \_TARGET\_CONFIG.radius  
),  
y: \_TARGET\_CONFIG.radius \* 2,  
txt: txtArr\[i\],  
typeIndex: -1,  
hitIndex: -1,  
dx: (\_TARGET\_CONFIG.speed \* Math.random().toFixed(1)) / 2,  
dy: \_TARGET\_CONFIG.speed \* Math.random().toFixed(1),  
rotate: 0  
\});  
\}  
\}  
\},  
getRandomInt(n, m) \{  
return Math.floor(Math.random() \* (m - n + 1)) + n;  
\},  
drawText(txt, x, y, color) \{  
let \_this = this;  
\_this.ctx.fillStyle = color;  
\_this.ctx.fillText(txt, x, y);  
\},  
drawScore() \{  
// 分数  
this.drawText("分数：" + this.score, 10, this.clientHeight - 10, "\#fff");  
\},  
drawTarget() \{  
// 逐帧画目标  
let \_this = this;  
\_this.targetArr.forEach((item, index) => \{  
\_this.ctx.save();  
\_this.ctx.translate(item.x, item.y); //设置旋转的中心点  
\_this.ctx.beginPath();  
\_this.ctx.font = "14px Arial";  
if (  
index === \_this.currentIndex ||  
item.typeIndex === item.txt.length - 1  
) \{  
\_this.drawText(  
item.txt.substring(0, item.typeIndex + 1),  
\-item.txt.length \* 3,  
\_TARGET\_CONFIG.radius \* 2,  
"gray"  
);  
let width = \_this.ctx.measureText(  
item.txt.substring(0, item.typeIndex + 1)  
).width; // 获取已敲击文字宽度  
\_this.drawText(  
item.txt.substring(item.typeIndex + 1, item.txt.length),  
\-item.txt.length \* 3 + width,  
\_TARGET\_CONFIG.radius \* 2,  
"red"  
);  
\} else \{  
\_this.drawText(  
item.txt,  
\-item.txt.length \* 3,  
\_TARGET\_CONFIG.radius \* 2,  
"yellow"  
);  
\}  
  
\_this.ctx.closePath();  
\_this.ctx.rotate((item.rotate \* Math.PI) / 180);  
\_this.ctx.drawImage(  
\_this.targetImg,  
\-1 \* \_TARGET\_CONFIG.radius,  
\-1 \* \_TARGET\_CONFIG.radius,  
\_TARGET\_CONFIG.radius \* 2,  
\_TARGET\_CONFIG.radius \* 2  
);  
\_this.ctx.restore();  
item.y += item.dy;  
item.x += item.dx;  
if (item.x < 0 || item.x > \_this.clientWidth) \{  
item.dx \*= -1;  
\}  
if (item.y > \_this.clientHeight - \_TARGET\_CONFIG.radius \* 2) \{  
// 碰到底部了  
\_this.gameOver = true;  
\}  
// 旋转  
item.rotate++;  
\});  
\},  
handleKeyPress(key) \{  
// 键盘按下,判断当前目标  
let \_this = this;  
if (\_this.currentIndex === -1) \{  
// 当前没有在射击的目标  
let index = \_this.targetArr.findIndex(item => \{  
return item.txt.indexOf(key) === 0;  
\});  
if (index !== -1) \{  
\_this.currentIndex = index;  
\_this.targetArr\[index\].typeIndex = 0;  
\_this.createBullet(index);  
\}  
\} else \{  
// 已有目标正在被射击  
if (  
key ===  
\_this.targetArr\[\_this.currentIndex\].txt.split("")\[  
\_this.targetArr\[\_this.currentIndex\].typeIndex + 1  
\]  
) \{  
// 获取到目标对象  
\_this.targetArr\[\_this.currentIndex\].typeIndex++;  
\_this.createBullet(\_this.currentIndex);  
  
if (  
\_this.targetArr\[\_this.currentIndex\].typeIndex ===  
\_this.targetArr\[\_this.currentIndex\].txt.length - 1  
) \{  
// 这个目标已经别射击完毕  
\_this.currentIndex = -1;  
\}  
\}  
\}  
\},  
// 发射一个子弹  
createBullet(index) \{  
let \_this = this;  
this.bulletArr.push(\{  
dx: 1,  
dy: 4,  
x: \_this.clientWidth / 2,  
y: \_this.clientHeight - 60,  
targetIndex: index  
\});  
\},  
firedTarget(item) \{  
// 判断是否击中目标  
let \_this = this;  
if (  
item.x > \_this.targetArr\[item.targetIndex\].x - \_TARGET\_CONFIG.radius &&  
item.x < \_this.targetArr\[item.targetIndex\].x + \_TARGET\_CONFIG.radius &&  
item.y > \_this.targetArr\[item.targetIndex\].y - \_TARGET\_CONFIG.radius &&  
item.y < \_this.targetArr\[item.targetIndex\].y + \_TARGET\_CONFIG.radius  
) \{  
// 子弹击中了目标  
let arrIndex = item.targetIndex;  
\_this.targetArr\[arrIndex\].hitIndex++;  
if (  
\_this.targetArr\[arrIndex\].txt.length - 1 ===  
\_this.targetArr\[arrIndex\].hitIndex  
) \{  
// 所有子弹全部击中了目标  
let word = \_this.targetArr\[arrIndex\].txt;  
\_this.targetArr\[arrIndex\] = \{  
// 生成新的目标  
x: \_this.getRandomInt(  
\_TARGET\_CONFIG.radius,  
\_this.clientWidth - \_TARGET\_CONFIG.radius  
),  
y: \_TARGET\_CONFIG.radius \* 2,  
txt: \_this.generateWord(1)\[0\],  
typeIndex: -1,  
hitIndex: -1,  
dx: (\_TARGET\_CONFIG.speed \* Math.random().toFixed(1)) / 2,  
dy: \_TARGET\_CONFIG.speed \* Math.random().toFixed(1),  
rotate: 0  
\};  
\_this.wordsPool.push(word); // 被击中的目标词重回池子里  
\_this.score++;  
\}  
return false;  
\} else \{  
return true;  
\}  
\},  
drawBullet() \{  
// 逐帧画子弹  
let \_this = this;  
// 判断子弹是否已经击中目标  
if (\_this.bulletArr.length === 0) \{  
return;  
\}  
\_this.bulletArr = \_this.bulletArr.filter(\_this.firedTarget);  
\_this.bulletArr.forEach(item => \{  
let targetX = \_this.targetArr\[item.targetIndex\].x;  
let targetY = \_this.targetArr\[item.targetIndex\].y;  
let k =  
(\_this.clientHeight - 60 - targetY) /  
(\_this.clientWidth / 2 - targetX); // 飞机头和目标的斜率  
let b = targetY - k \* targetX; // 常量b  
item.y = item.y - 4; // y轴偏移一个单位  
item.x = (item.y - b) / k;  
for (let i = 0; i < 15; i++) \{  
// 画出拖尾效果  
\_this.ctx.beginPath();  
\_this.ctx.arc(  
(item.y + i \* 1.8 - b) / k,  
item.y + i \* 1.8,  
4 - 0.2 \* i,  
0,  
2 \* Math.PI  
);  
\_this.ctx.fillStyle = \`rgba(193,255,255,$\{1 - 0.08 \* i\})\`;  
\_this.ctx.fill();  
\_this.ctx.closePath();  
\}  
\});  
\}  
\}  
\};  
</script>  
  
  
<style scoped lang="scss">  
.type-game \{  
\#type \{  
background: \#2a4546;  
\}  
\}  
</style>