飞机大战：满屏弹幕火力全开，一打就停不下来

一段需求，码道 5 分 30 秒自动写出 475 行单文件飞机大战——鼠标移动控制战机左右腾挪并自动开火，敌机多路俯冲，击中瞬间爆炸粒子四溅、火光特效拉满：护盾自动恢复、被撞无敌闪烁、关卡随得分越打越难，双击 index.html 就能开打。

分类: ai-development
标签: CodeArts, AI编程, 飞机大战, 射击游戏, Canvas, 网页游戏
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

飞机大战是无数人街机厅记忆里的第一课：操控战机在弹幕间穿梭，击落一架架敌机，屏幕越打越热闹。在码道 TUI 里贴了一段需求：「做一个飞机大战网页小游戏，鼠标控制战机自动开火，敌机多路下落，击中爆炸加分……」排队约 5 分半钟后，码道自动生成一个 475 行的完整游戏：深色星空背景上，蓝色战机跟随鼠标左右滑动、子弹自动连射；红色、橙色、青色敌机多路俯冲，被击中的瞬间爆出一团彩色粒子；得分攒满自动升级，敌机更快、更密、血更厚，还会左右摇摆、朝你开炮；战机自带可自动恢复的护盾，破盾扣命后短暂无敌闪烁，三条命打光才结束。双击 index.html 就能开打，全程零依赖。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 玩法闭环完整：鼠标操控 + 自动连射、多路敌机、子弹碰撞判定、爆炸粒子加分，核心循环一步到位
• 难度曲线自然：敌机基础速度随关卡提升（1 + 关卡 × 0.25）、升级阈值按 1.5 倍递增，第 3 关起双翼副炮、敌机学会开炮，越打越有挑战
• 细节兜底齐全：护盾自动恢复、被撞后 90 帧无敌闪烁、三颗心生命值、游戏结束结算面板与一键重开，把射击游戏该有的反馈都补齐了
• 自检与收尾：生成后主动汇报核心实现清单（战机绘制、敌机生成、碰撞爆炸、关卡递进、护盾系统），再交付文件

---

4. 任务描述

我想要一个「飞机大战」网页小游戏，具体要求：

• 用单个 HTML 文件实现（CSS 和 JavaScript 内嵌），浏览器直接打开即可玩
• 鼠标移动控制战机在屏幕底部左右移动，战机自动开火
• 敌机从屏幕顶部多路下落，种类与速度随关卡递增；子弹击中敌机产生爆炸粒子特效并加分
• 战机有生命值/护盾：护盾自动恢复，被撞后扣血并短暂无敌闪烁
• 游戏结束显示最终得分与重新开始按钮
• HUD 实时显示得分/生命/关卡；深色星空背景，视觉效果精致
• 操作仅用鼠标（兼容触屏）

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求，码道先进入模型排队，随后开始拆解需求：

码道先规划战机控制、敌机生成与碰撞爆炸逻辑，再逐段生成代码：

约 5 分 30 秒后，码道汇报完成：已生成单文件飞机大战（475 行），并列出核心实现——鼠标操控自动开火、多路敌机、爆炸粒子、关卡递进、护盾与无敌闪烁：

双击生成的 index.html 在浏览器中运行，深色星空背景上显示「飞机大战」标题与玩法说明：

---

6. 代码解析

从生成的 index.html 中提取核心实现（475 行，Canvas 2D 渲染）：

游戏循环与主状态：requestAnimationFrame(loop) 驱动整个游戏，dt 按 16.67ms 归一化并锁上限，保证不同刷新率下移动速度一致：

let last = 0;
function loop(t) {
  const dt = Math.min((t - last) / 16.67, 2);
  last = t;
  if (!state.over) update(dt);
  render();
  requestAnimationFrame(loop);
}

敌机随关卡解锁：第 1 关只有小敌机，第 2 关解锁中号、第 3 关解锁摇摆快机、第 4 关解锁会开炮的大机，基础速度随关卡线性提升：

function spawnEnemy() {
  const lv = state.level;
  const types = ['small'];
  if (lv >= 2) types.push('small', 'mid');
  if (lv >= 3) types.push('mid', 'fast');
  if (lv >= 4) types.push('mid', 'fast', 'big');
  const type = types[Math.floor(Math.random() * types.length)];
  const baseSpeed = 1 + lv * 0.25;
  // small: hp1 得分10 / mid: hp3 得分30 / fast: hp1 左右摇摆 / big: hp8+关卡 会开炮
}

自动连射与火力升级：火控按关卡加速，第 3 关起从单发升级为三路副炮：

state.fireTimer -= dt;
if (state.fireTimer <= 0) {
  const rate = Math.max(4, 9 - state.level * 0.5);
  state.fireTimer = rate;
  bullets.push({ x: player.x, y: player.y - player.h / 2, w: 4, h: 14, speed: 12 });
  if (state.level >= 3) {
    bullets.push({ x: player.x - 14, y: player.y - player.h / 4, w: 3, h: 12, speed: 11 });
    bullets.push({ x: player.x + 14, y: player.y - player.h / 4, w: 3, h: 12, speed: 11 });
  }
}

碰撞与爆炸反馈：子弹命中敌机先爆小粒子，血量归零再触发大爆并加分；关卡累计分满自动升级，升级阈值按 1.5 倍放大：

if (hit(b, e)) {
  bullets.splice(j, 1);
  e.hp--;
  explode(b.x, b.y, e.color, 6, 0.6);
  if (e.hp <= 0) {
    state.score += e.score;
    explode(e.x, e.y, e.color, e.type === 'big' ? 40 : 20, e.type === 'big' ? 1.8 : 1);
    enemies.splice(i, 1);
    if (state.levelScore >= state.nextLevelScore) {
      state.levelScore -= state.nextLevelScore;
      state.level++;
      state.nextLevelScore = Math.floor(state.nextLevelScore * 1.5);
    }
  }
}

护盾与受击：护盾优先吸收伤害并随时间自动恢复，破盾扣命后进入 90 帧无敌闪烁，避免被连续撞击秒杀：

function damagePlayer(dmg) {
  if (state.shield > 0) {
    const absorbed = Math.min(state.shield, dmg * 30);
    state.shield -= absorbed;
    dmg -= absorbed / 30;
  }
  if (dmg > 0) {
    state.lives -= dmg;
    state.invincible = 90;
    explode(player.x, player.y, '#ff5b6e', 30, 1.5);
    if (state.lives <= 0) { state.lives = 0; gameOver(); }
  }
}

---

7. 真实运行效果

在浏览器中打开 index.html，深色星空背景铺满屏幕，顶部 HUD 实时显示得分、关卡与三颗生命心，护盾条在右上角缓慢回充。点击「开始游戏」后，蓝色战机跟随鼠标左右滑动、子弹自动连射，红橙青三色敌机从顶部多路俯冲，被击中的瞬间爆出粒子火花；得分攒满自动升级，敌机越密越快，还会左右摇摆躲避、朝战机开炮。被撞时护盾条先掉，破盾扣命并闪烁无敌，三条命用完后弹出结算面板显示最终得分与到达关卡，一键重新开始。

---

8. 能力总结

• 代码量适中：475 行单个 HTML 文件，玩法、反馈、HUD 全包含
• 画面表现力强：星空粒子背景 + 爆炸粒子 + 战机火焰拖尾，截图就能吸引点击
• 玩法体验完整：自动开火降低上手门槛，关卡递进与护盾机制让难度曲线平滑
• 直接可运行：双击 index.html 即玩，无任何构建依赖

---

9. 总结

从贴需求到能玩的飞机大战，码道 5 分 30 秒交付了一个 475 行、零依赖的单文件游戏：鼠标操控、自动连射、多路敌机、爆炸粒子、护盾无敌、关卡递进，一个都没少。如果你也想快速把一个小创意变成能玩的网页应用，不妨打开码道 TUI 试一试——你负责描述需求，剩下的交给码道。