【Canvas】童年玩过的雷霆战机你还记得吗？

本文链接：https://blog.csdn.net/Android062005/article/details/128392690

本文通过Canvas重构童年游戏雷霆战机，涉及HTML、CSS和JavaScript的使用。首先准备素材，接着在HTML中引入并隐藏素材，CSS设置页面样式。在JavaScript中，实现基础准备，包括获取canvas元素，监听鼠标事件，创建战机构造函数和子弹构造函数，处理子弹发射和移动，以及场景的绘制。最终展示了重构后的游戏效果，虽然没有背景，但核心玩法得以还原。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按键机的年代，想必大家都玩过类似雷电，雷霆战机之类的飞行射击类游戏吧，今天我就试着用canvas来还原一下游戏场景。

素材准备

还原场景的第一步是准备素材，首先我们需要一架雷霆战机，经过九牛二虎之力，我在网上找到了心仪的战机，就是下面这架：

战机的子弹也要准备一下，我给我的战机准备了黄色和蓝色两种子弹，如下：

HTML部分

素材准备完成，我们就开始把它们渲染到页面上吧，首先先用3个img标签引入3个素材，并且设置img的display属性为none，使的它们不显示在页面上。同时，我们定义一个canvas元素，用来把我们的飞机渲染在上面。

<img src="../imgs/plane.png" alt="飞机" style="display: none" id="plane">
<img src="../imgs/blue-bullet.png" alt="蓝子弹" style="display: none" id="blue-bullet">
<img src="../imgs/yellow-bullet.png" alt="黄子弹" style="display: none" id="yellow-bullet">
<canvas id="space"></canvas>

4个元素我都设置了id属性，这是为了一会更方便的获取DOM元素。