用码道 AI 编程助手开发合成大西瓜水果合成网页游戏

分类: ai-development

标签: CodeArts, AI编程, 合成大西瓜, Canvas, 物理引擎, 网页游戏

难度: 初级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个合成大西瓜水果合成网页游戏，单个 HTML 文件即可运行……」约 4 分钟后，一个 489 行、约 13.7 KB 的完整游戏就自动生成了：水果从顶部掉落，两个同等级水果碰撞后自动合成下一级（樱桃→草莓→葡萄→柠檬→猕猴桃→番茄→桃子→菠萝→椰子→半个西瓜→西瓜），两个西瓜相撞直接消除加 78 分；鼠标移动瞄准、点击/空格/下键投放，左右方向键微调位置；水果堆超过警戒线判定游戏结束；合成瞬间有 toast 提示和扩散光环特效。整个物理引擎是码道自研的——重力积分、圆-圆/圆-墙弹性碰撞、按质量加权的穿透修正，6 子步迭代保证堆叠稳定不抖。双击 HTML 就能开玩，最高分还会存进 localStorage。

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:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

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

3. 码道能力一览

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

1. 自然语言编程：我说「合成大西瓜」，码道直接理解成物理引擎 + 合成逻辑 + 结束判定 + 界面美化的完整方案
2. 自主技术选型：自研 Canvas 圆球物理（重力 + 6 子步积分 + 圆-圆/圆-墙弹性碰撞 + 质量加权位置修正），不依赖第三方物理库
3. 工程细节到位：结束判定用 maxFallen 记录球的最高落点，避免刚下落的新球被误判为游戏结束；投放后加 480ms 冷却防止连点
4. 自检与收尾：生成后主动做语法检查验证文件完整性，再汇报功能清单

4. 任务描述

我想要一个「合成大西瓜」水果合成网页游戏（Fruit Merge / Watermelon Game），具体要求：

1. 水果从顶部掉落，相同等级的两个水果碰撞后合成下一级（樱桃→草莓→葡萄→橘子→柠檬→猕猴桃→番茄→桃子→菠萝→椰子→半个西瓜→西瓜），Canvas 圆球绘制并区分颜色大小
2. 点击或按方向键控制掉落位置，水果堆积超过警戒线则游戏结束
3. 显示当前分数、合成等级提示和最高分（localStorage 持久化）
4. 提供重新开局按钮
5. 深色主题界面美观，包含操作提示
6. 双击 HTML 文件即可在浏览器中运行

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

码道在 Thinking 中规划物理引擎与游戏机制（下落冷却、结束判定、待投放球逻辑）：

约 4 分钟后，码道汇报完成：文件已创建、输出功能清单：

双击生成的 watermelon.html 在浏览器中运行，投放几个水果后，画布中已堆起草莓等水果，左侧面板显示分数/最高分/下一个水果预览和操作提示：

6. 代码解析

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

自研物理引擎：每帧跑 6 个子步，每步先积分重力与速度，再做墙壁和球之间的碰撞求解。球-球碰撞用质量加权（ma = r²）分摊穿透量，并用冲量公式更新速度，堆叠起来非常稳定：

function resolveBalls(){for (let i = 0; i < balls.length; i++){for (let j = i + 1; j < balls.length; j++){const a = balls[i], b = balls[j];if (a.dead || b.dead) continue;const dx = b.x - a.x, dy = b.y - a.y;const dist = Math.hypot(dx, dy);const min = a.r + b.r;if (dist < min && dist > 0.0001){if (a.level === b.level && a.released && b.released && !a.merging && !b.merging && a.age > 2 && b.age > 2){merge(a, b);continue;}const nx = dx / dist, ny = dy / dist;const overlap = min - dist;const ma = a.r * a.r, mb = b.r * b.r;const total = ma + mb;a.x -= nx * overlap * (mb / total);a.y -= ny * overlap * (mb / total);b.x += nx * overlap * (ma / total);b.y += ny * overlap * (ma / total);// 冲量更新速度...}}}}

同级合成：两个同等级、且都已释放的球相撞（年龄 > 2 帧防止刚生成的球误合并），就标记为 merging，在碰撞点生成下一级球并加分：

function merge(a, b){a.merging = b.merging = true;a.dead = b.dead = true;const nx = (a.x + b.x) / 2;const ny = (a.y + b.y) / 2;const nl = a.level + 1;score += FRUITS[Math.min(nl, FRUITS.length - 1)].score;effects.push({x: nx, y: ny, r: a.r, max: a.r + 30, life: 1});if (nl < FRUITS.length){balls.push({x: nx, y: ny, vx: 0, vy: 0, r: FRUITS[nl].r, level: nl,released: true, dead: false, merging: false, maxFallen: ny, age: 0});showToast('合成 ' + FRUITS[nl].name + '！');} else {showToast('双西瓜消除！+78');}}

结束判定防误判：用 maxFallen 记录球到达过的最低点，只有球确实先掉到警戒线下方、再回到红线以上并趋于静止时才判定结束，刚投下的新球不会被误判：

function checkGameOver(){for (const b of balls){if (!b.released) continue;if (b.maxFallen > DANGER_Y + 60 && b.y - b.r < DANGER_Y &&Math.abs(b.vy) < 0.6 && Math.abs(b.vx) < 0.6){endGame();return;}}}

投放冷却：每次投放后 480ms 内不能再投，配合 aimX 瞄准与左右方向键微调，手感流畅。

7. 真实运行效果

双击 watermelon.html 即可开始：右侧是深色渐变画布，顶部有虚线「警戒线」，鼠标在画布上移动时一个半透明水果跟随瞄准、点击（或空格/下键）投放；左右方向键可以微调投放位置。两个同等级水果碰撞后合成下一级并弹出 toast 提示与扩散光环特效，逐级合成到「半个西瓜」「西瓜」；两个西瓜相撞直接消除加 78 分。左侧面板实时显示当前分数、最高分（localStorage 持久化）、下一个水果预览，以及完整的操作说明与规则；水果堆超过警戒线判定游戏结束，「重新开局」按钮一键重来，触屏设备也支持。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件水果合成游戏，全程约 4 分钟，无需手工补代码
2. 物理方案专业：自研重力积分 + 6 子步迭代 + 弹性碰撞 + 质量加权修正，堆叠稳定不抖动，不依赖第三方库
3. 交互细节到位：瞄准/投放/微调三套操作、投放冷却、防误判结束判定、合成特效与 toast、最高分持久化，体验闭环完整
4. 工程习惯良好：物理求解/合成/渲染/状态管理函数拆分清晰，生成后主动做语法检查，代码可读性好

9. 总结

用码道开发合成大西瓜这类网页游戏，最大的感受是「需求即产品」：把玩法要点说清楚，码道就能给出包含自研物理引擎、合成逻辑与视觉特效的成品。对想了解 Canvas 圆球物理、碰撞检测与合并逻辑，或者刚学前端想看看「一个游戏是怎么从零写出来的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。