大鱼吃小鱼：开局一条鱼，吞出海洋霸主

大鱼吃小鱼：开局一条鱼，吞出海洋霸主

一段需求，码道自动写出 163 行、约 6 KB 的单文件大鱼吃小鱼——鼠标控制小鱼在海洋里游动，5 种大小不同的 AI 鱼巡游其间，吃掉比自己小的鱼就长大一圈，撞上比自己大的鱼当场结束，双击 HTML 就能开玩

分类: ai-development
标签: CodeArts, AI编程, 大鱼吃小鱼, Canvas, 网页游戏, 鼠标控制
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

在码道 TUI 里贴了一段需求：「做一个大鱼吃小鱼海洋吞噬网页游戏，鼠标控制、5 种 AI 鱼、吃掉小鱼长大、碰到大鱼结束……」。排队等了片刻，约 3 分 16 秒后，一个 163 行、约 6 KB 的完整游戏就自动生成了：金黄色的小鱼跟着鼠标平滑游动，20 条颜色各异的 AI 鱼在深蓝渐变的海底穿梭，水泡从底部缓缓上浮；碰到比自己小的鱼一口吞掉、体型肉眼可见地长大一圈，碰到比自己大的鱼直接游戏结束，弹出半透明结算面板显示最终得分，点「重新开始」立刻再来一局。双击 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. 码道能力一览

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

• 自然语言编程：一句「大鱼吃小鱼」被理解成完整的游戏方案——玩家控制、AI 巡游、吞噬判定、体型成长、等级阶梯、结算重开
• 自主技术选型：CSS 渐变背景 + 28 个随机水泡动画负责氛围，Canvas 负责鱼群渲染，两类视觉完全分离
• 数值设计到位：5 种 AI 鱼半径 11/17/24/34/48、游速随体型递减，吞噬判定用 0.95/1.05 双阈值避免边界抖动，等级按半径阶梯计算
• 自检与收尾：生成后主动统计行数、验证文件完整性，再汇报功能清单

---

4. 任务描述

我想要一个「大鱼吃小鱼」海洋吞噬网页游戏，具体要求：

• 玩家用鼠标控制一条小鱼在海洋背景中游动，碰到比自己小的鱼就吃掉并长大一圈，碰到比自己大的鱼则游戏结束
• 场景里有 5 种大小不同、游速不同的 AI 鱼，被吃掉后从屏幕边缘补充新鱼
• 海洋背景带渐变和水泡动画，左上角实时显示分数和体型等级
• 游戏结束后显示最终得分和重新开始按钮
• 输出单个 index.html 文件，双击即可在浏览器运行，代码控制在 500 行以内

---

5. 开发过程及真实截图

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

码道先规划海洋背景、鱼群系统与吞噬判定的整体结构，再逐段生成代码：

约 3 分 16 秒后，码道汇报完成：已生成 index.html（163 行，远低于 500 行限制），并列出核心实现清单：

双击生成的 index.html 在浏览器中运行，深蓝渐变的海面上水泡上浮，左上角 HUD 显示「分数：0」「体型等级：1」，金黄色的玩家鱼与各色 AI 鱼同游：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

5 种 AI 鱼：用一个 SPECIES 数组定义鱼的大小、游速和颜色，半径越大游速越慢，大鱼沉稳、小鱼敏捷：

const SPECIES = [
  { r: 11, speed: 2.4, color: '#ffd166' },
  { r: 17, speed: 1.9, color: '#06d6a0' },
  { r: 24, speed: 1.5, color: '#118ab2' },
  { r: 34, speed: 1.1, color: '#ef476f' },
  { r: 48, speed: 0.75, color: '#9b5de5' },
];

吞噬判定：碰撞检测用「半径 × 0.95 / × 1.05」两个阈值做缓冲区，避免恰好相等时反复横跳；吃掉小鱼后分数加鱼半径、玩家半径增长 9%，等级按半径阶梯计算，被吃掉的鱼立刻从屏幕边缘重生：

if (f.r < player.r * 0.95) {
  score += Math.floor(f.r);
  player.r += f.r * 0.09;
  const nl = Math.floor((player.r - 16) / 5) + 1;
  if (nl > level) level = nl;
  fishes.splice(i, 1);
  spawnFish();
} else if (f.r > player.r * 1.05) {
  alive = false;
  document.getElementById('final').textContent = score;
  document.getElementById('over').style.display = 'flex';
}

玩家跟随鼠标：移动速度随距离自适应（Math.min(dist*0.12, 7)），离得远游得快、贴近了减速，手感细腻：

const sp = Math.min(dist * 0.12, 7);
player.x += dx / dist * sp;
player.y += dy / dist * sp;
player.dir = Math.atan2(dy, dx);

鱼的身体绘制：Canvas 用椭圆画身体、三角形画尾巴、白点黑点画眼睛，ctx.rotate 让鱼始终朝运动方向：

ctx.ellipse(0, 0, f.r * 1.2, f.r * 0.7, 0, 0, Math.PI * 2);
ctx.moveTo(-f.r * 1.1, 0);
ctx.lineTo(-f.r * 1.9, -f.r * 0.65);
ctx.lineTo(-f.r * 1.9, f.r * 0.65);
ctx.closePath();

---

7. 真实运行效果

打开 index.html，海洋渐变背景配 28 个随机水泡持续上浮，玩家鱼跟随鼠标游动，AI 鱼群从屏幕边缘游入再折返。吃掉一条小鱼，分数上涨、鱼身明显变大一圈，等级随体型阶梯提升；贪心去追大鱼，撞上就弹出「游戏结束」遮罩，显示最终得分，点「重新开始」立即重置。整局节奏紧凑：开局弱小只能绕着大圈捡漏，长大几轮后就能横冲直撞收割全场，正反馈非常直接。

---

8. 能力总结

• 单文件交付：163 行 HTML/CSS/JS 全部在一个 index.html 里，双击即玩，零依赖
• 视觉与逻辑分离：CSS 负责背景与水泡氛围，Canvas 负责鱼群与交互，代码结构清爽
• 数值手感好：吞噬双阈值防抖动、等级按半径阶梯、游速随体型递减，都是能直接上手玩的手感细节
• 生态位清晰：如果后续想加多人对战、道具、进化分支，在 SPECIES 和 update() 上扩展都很方便

9. 总结

从一句自然语言到可玩的小游戏，码道只用了 3 分 16 秒。大鱼吃小鱼这类「规则简单、反馈直接」的休闲游戏，正好是验证 AI 编程助手从需求理解、技术选型到代码生成全链路能力的试金石。想亲手试试，把上面的需求复制进码道 TUI，你也能收获一条属于自己的海洋霸主。