打飞碟射击场：霓虹星空下飞碟满天飞，鼠标点射一枪一个

一句话需求丢给码道 TUI，自动生成一个网页版打飞碟射击游戏：深色星空中飞碟从两侧随机飞入，鼠标移动跟随霓虹准星，左键开火命中即爆出彩色粒子，60 秒倒计时里飞碟越打越快、越打越多。双击 index.html 就能玩，单文件零依赖。

分类 : ai-development

标签 : CodeArts, AI编程, 打飞碟, 射击游戏, 网页游戏

难度 : 初级

读者: 前端开发者、游戏爱好者、Canvas 动画爱好者

1. 开头钩子

街机厅里的打靶游戏，现在用一句话就能让 AI 给你写一个：我把它丢给码道 TUI「做一个网页版打飞碟射击小游戏」，几分钟后它交出一个单文件 index.html------霓虹星空背景带闪烁星星，飞碟带着顶灯从左右两侧沿正弦曲线飞入，鼠标移动有脉冲准星跟随，点击左键从屏幕底部炮台射出带拖尾的黄色子弹，命中瞬间飞碟爆成 30 多颗彩色粒子加冲击波环。击杀越多，飞碟越快、同时出现的越多，倒计时 60 秒结束时结算得分。按住鼠标扫一圈，满屏都是爆炸的光。

2. 码道 TUI 安装

码道 CLI 官方提供 Windows 和 macOS/Linux 两种安装方式，按自己的系统选一种即可。

Windows（仅支持在 PowerShell 执行）

powershell 复制代码

# 1. 一键安装
irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex

# 2. 配置环境变量
$env:CODEARTS_CLI_AK="你的AK"
$env:CODEARTS_CLI_SK="你的SK"

# 3. 启动 TUI
codearts

macOS / Linux（终端）

bash 复制代码

# 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

安装成功后终端会回显码道 CLI 的版本号。在 PowerShell 或终端里输入 codearts 回车，即可打开码道 TUI，把开发需求贴进输入框。

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

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

3. 码道能力一览

霓虹星空背景：径向渐变深空 + 星云光斑 + 自适应数量闪烁星星（含十字星芒）
会飞的飞碟：椭圆圆盘 + 半球顶罩 + 闪烁顶灯 + 底部灯串，左右随机入场、正弦曲线 + 二次扰动飞行
射击手感：底部霓虹炮台指向鼠标、黄色拖尾子弹、椭圆碰撞检测、枪口火花
爆炸特效：命中爆出 26~40 颗彩色粒子（带重力）+ 14 点冲击波环 + 浮动加分文字
难度成长：每击杀 5 只提速 6%、增加 1 个同时上限（最多 6 只）、生成间隔缩短
完整 HUD：得分 / 倒计时（≤10s 变红闪烁）/ 击杀数，结束页结算平均分
细节到位：触摸支持、DPR 高清适配、resize 自适应、脉冲旋转霓虹准星
单文件交付：HTML/CSS/JS 全在一个 index.html 里，双击即用、零依赖

4. 任务描述

需求就一段话，丢进码道 TUI 的输入框：

做一个网页版打飞碟射击小游戏（Saucer Shooting Gallery），单文件 index.html（内嵌 CSS 和 JS）。用 canvas 实现：深色星空背景带闪烁星星，飞碟（圆盘+顶灯）从屏幕左右两侧随机飞入并沿曲线移动，鼠标移动显示跟随准星，点击左键发射子弹命中飞碟，命中时飞碟爆炸成彩色粒子并加分；倒计时 60 秒结束后显示得分与重新开始按钮；随击杀数量提高飞碟速度与同时出现数量；界面好看：霓虹配色、粒子爆炸特效、流畅帧率。

5. 开发过程及真实截图

码道从提交需求到生成完成，直接输出一个可运行的 index.html，并给出能力清单：星空背景、飞碟曲线飞行、底部炮台射击、粒子爆炸、难度成长、倒计时与结算。打开浏览器就能上手玩。

6. 代码解析（从项目源码提取）

飞碟的曲线飞行。每个飞碟随机从左侧或右侧入场，x 方向匀速前进，y 方向叠加两条正弦波，一条是主波浪、一条是低频扰动，飞碟看起来忽高忽低地飘：

js 复制代码

update(dt) {
  this.t += dt;
  this.x += this.vx * dt;
  // 沿正弦曲线移动
  this.y = this.baseY + Math.sin(this.t * this.freq + this.phase) * this.amp
                 + Math.sin(this.t * 0.4 + this.bob) * 8;
  this.spin += dt * 2.5;
  this.lightPhase += dt * 6;
  // 出界
  if (this.fromLeft && this.x > W + this.r + 30) this.alive = false;
  if (!this.fromLeft && this.x < -this.r - 30) this.alive = false;
}

椭圆碰撞判定。飞碟是扁的圆盘，用椭圆方程判定子弹是否命中------横向判定半径取 1.15 倍、纵向取 0.6 倍，比圆形碰撞更贴合飞碟形状，手感也更准：

js 复制代码

hit(px, py) {
  const dx = px - this.x, dy = py - this.y;
  // 椭圆碰撞（圆盘扁宽）
  const a = this.r * 1.15, b = this.r * 0.6;
  return (dx * dx) / (a * a) + (dy * dy) / (b * b) <= 1;
}

开火与爆炸。点击左键从屏幕底部炮台发射子弹并喷出枪口火花；命中时一次生成 26~40 颗彩色粒子，外加一圈 14 个点的冲击波环------粒子带重力、速度随机，看起来像真的炸开：

js 复制代码

function fireBullet(tx, ty) {
  const sx = W / 2;
  const sy = H + 10;
  state.bullets.push(new Bullet(sx, sy, tx, ty));
  state.muzzleFlash = 0.12;
  // 枪口火花
  for (let i = 0; i < 6; i++) {
    state.particles.push(new Particle(sx, sy - 4, '#ffea00'));
  }
}

function explode(x, y, color) {
  const n = randi(26, 40);
  const palette = [color.body, color.light, '#ffffff', '#ffea00', '#ff00ea', '#00f0ff'];
  for (let i = 0; i < n; i++) {
    state.particles.push(new Particle(x, y, palette[randi(0, palette.length)]));
  }
  // 冲击波环（用大粒子模拟）
  for (let i = 0; i < 14; i++) {
    const p = new Particle(x, y, color.body);
    const ang = (i / 14) * TAU;
    p.vx = Math.cos(ang) * 260;
    p.vy = Math.sin(ang) * 260;
    p.gravity = 0;
    state.particles.push(p);
  }
}

难度成长曲线。三行函数把「击杀数」翻译成「速度倍率 / 同时上限 / 生成间隔」，击杀越多飞碟越快越密，但收敛在上限内，不会彻底失控：

js 复制代码

function speedScaleForKills(k) { return 1 + k * 0.06; }
function maxSaucersForKills(k) { return Math.min(6, 2 + Math.floor(k / 5)); }
function spawnIntervalForKills(k) { return Math.max(0.45, 1.2 - k * 0.03); }

7. 真实运行效果

双击 index.html 打开：点击 START 开始，60 秒倒计时启动。霓虹星空里飞碟带着顶灯从两侧飘进来，鼠标移动时脉冲准星紧跟光标，底部炮台始终指向准星。看准时机点左键，黄色子弹拖着光尾飞出去，命中瞬间「嘭」地爆成一团彩色粒子，浮动数字弹出加分；连打几只后飞碟明显变快、同时出现三四只。倒计时最后 10 秒数字变红闪烁，时间归零结算总分、击落数和平均分，点 RESTART 随时再来一局。

8. 能力总结

亮点	说明
霓虹星空	渐变深空 + 星云光斑 + 闪烁星星，科幻氛围拉满
曲线飞碟	双正弦波扰动飞行，轨迹不呆板
射击手感	椭圆碰撞 + 拖尾子弹 + 枪口火花，命中判定准确
爆炸特效	30+ 彩色粒子 + 冲击波环 + 浮动分数，打击感强
难度成长	击杀提速、加密度，收敛可控不失控
完整闭环	开始/倒计时/结算/重开一应俱全
零依赖交付	单文件 index.html，双击即用

9. 总结

这次用码道 TUI 做打飞碟射击场，最惊喜的是「一句话把一个街机小游戏变成能玩的网页」：从星空背景、飞碟飞行到粒子爆炸、难度曲线，码道都自己设计好了，还顺手做了触摸支持和 DPR 高清适配。如果你想体验这种「描述想法 → 拿到可玩应用」的流程，装好码道 TUI 后，把需求说清楚丢进去就行。可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz