JS Canvas实现简易飞机大战：代码结构与核心逻辑解析

游戏运行结果

开发环境与资源准备

要实现该游戏，需确保本地拥有以下图片资源并放置在 img/ 目录下，代码中通过相对路径引用：

• 背景图：background.png（用于循环滚动）
• UI元素：start.png（开始标题）、game_loading*.png（加载进度条）、game_pause_nor.png（暂停图标）
• 玩家飞机：hero1.png、hero2.png（飞行姿态）、hero_blowup_n*.png（爆炸序列帧）
• 武器：bullet1.png（子弹素材）
• 敌方单位：enemy1.png / down*（小飞机）、enemy2.png / down*（中飞机）、enemy3*.png / down*（大飞机）

核心对象设计与实现

游戏的核心架构基于构造函数模式，每个游戏实体（背景、英雄机、敌人）都具备 paint()（绘制）和 step()（更新状态）方法。这种设计使得游戏主循环只需遍历调用各对象的更新与绘制方法。

第1步：实现可循环滚动的背景图层

为了营造飞行的视觉效果，背景需要持续向下移动。当第一张背景图完全移出屏幕时，重置其位置以显示第二张图，形成无缝衔接。

• 参数配置：画布宽高 480x650，背景图高 852px，宽 480px。
• 运动逻辑：在 step() 中增加 Y 轴坐标，达到临界值后重置为负高度，保持双图交替。paint() 依次绘制两张背景图。

第2步：构建英雄机与输入控制

英雄机的位置由鼠标事件实时驱动，同时负责管理自身的飞行动画和子弹发射。

• 移动入口：监听 Canvas 的 onmousemove 事件。计算鼠标偏移量并修正至飞机中心点，更新 this.x 和 this.y。
• 状态管理：正常状态下切换 startIndex 实现引擎喷火/变形动画；被击中后进入爆炸序列，播放完毕后扣除生命值或判定游戏结束。
• 火力输出：利用计时器 this.time 每 2 帧向 bullets 数组推送一个新的 Bullet 实例。

第3步：子弹系统的生成与销毁

子弹是一个动态数组，包含向上位移和生命周期判断。

• 生成与移动：从英雄机顶部坐标发射，step() 中不断减小 Y 值实现上升。paint() 使用单一贴图绘制。
• 边界清理：在主循环末尾调用清理函数，移除坐标超出屏幕上方或已被标记为 candel = true（发生碰撞）的子弹对象，防止内存泄漏。

第4步：敌方飞机的生成与碰撞交互

敌方飞机分为三种类型，血量（life）和得分（score）各不相同。它们通过随机数概率在屏幕顶部生成。

• AI行为：普通飞行时 Y 轴逐渐增加，同时按帧率切换图片素材；被击中后切换至 down 系列帧，直至动画播放完标记 candel = true。
• 碰撞检测：利用 AABB（轴对齐包围盒）算法检查矩形区域重叠：wo.y + wo.height > this.y && ...。若子弹命中敌方，敌方扣血；若英雄机直接撞毁敌机，双方均触发损毁逻辑并扣分/扣命。

游戏主循环与状态流转

所有游戏逻辑集中在一个 setInterval 定时器中，频率设为 10ms。通过全局变量 state 控制流程：

1. Start (0)：显示 Logo，等待用户点击画布。
2. Loading (1)：展示 4 帧加载动画，完成后自动转入 Running。
3. Running (2)：执行全套更新与绘制指令（背景、英雄机、子弹、敌人、碰撞检测、计分）。鼠标移入移出画布可切换暂停/继续状态。
4. Gameover (4)：生命值为 0 时停止逻辑刷新，显示 Game Over 文字及 Reboot 选项。

总结

本示例展示了如何使用原生 JavaScript 处理复杂的动画交互逻辑。通过拆分对象职责（绘制、移动、碰撞），避免了冗长的过程式代码，实现了清晰的模块化管理。

以上就是 JavaScript Canvas 简易飞机大战游戏开发的详细内容，更多关于前端游戏开发的技术教程请关注本站其它相关文章！