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

一段需求，码道自动写出 489 行、约 13.7 KB 的单文件水果合成游戏——自研 Canvas 圆球物理（重力 + 6 子步积分 + 弹性碰撞 + 质量加权位置修正）、樱桃到西瓜 12 级合成链、同级碰撞自动升级、双击 HTML 就能扔水果、合西瓜

分类: 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量exportPATH=~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK=你的AKexportCODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

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

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

3. 码道能力一览

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

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

4. 任务描述

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

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

5. 开发过程及真实截图

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

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

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

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

6. 代码解析

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

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

functionresolveBalls(){for(leti=0;i<balls.length;i++){for(letj=i+1;j<balls.length;j++){consta=balls[i],b=balls[j];if(a.dead||b.dead)continue;constdx=b.x-a.x,dy=b.y-a.y;constdist=Math.hypot(dx,dy);constmin=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;}constnx=dx/dist,ny=dy/dist;constoverlap=min-dist;constma=a.r*a.r,mb=b.r*b.r;consttotal=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，在碰撞点生成下一级球并加分：

functionmerge(a,b){a.merging=b.merging=true;a.dead=b.dead=true;constnx=(a.x+b.x)/2;constny=(a.y+b.y)/2;constnl=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记录球到达过的最低点，只有球确实先掉到警戒线下方、再回到红线以上并趋于静止时才判定结束，刚投下的新球不会被误判：

functioncheckGameOver(){for(constbofballs){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瞄准与左右方向键微调，手感流畅。

在浏览器中实际验证时，连续投放 4 个水果后草莓稳稳堆在画布底部，两个草莓相撞瞬间弹出「合成」toast 并出现扩散光环，画面稳定不抖动——6 子步物理在 60fps 下表现很好。

7. 真实运行效果

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

8. 能力总结

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

9. 总结

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