一段需求码道自动写出 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. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 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(leti0;iballs.length;i){for(letji1;jballs.length;j){constaballs[i],bballs[j];if(a.dead||b.dead)continue;constdxb.x-a.x,dyb.y-a.y;constdistMath.hypot(dx,dy);constmina.rb.r;if(distmindist0.0001){if(a.levelb.levela.releasedb.released!a.merging!b.merginga.age2b.age2){merge(a,b);continue;}constnxdx/dist,nydy/dist;constoverlapmin-dist;constmaa.r*a.r,mbb.r*b.r;consttotalmamb;a.x-nx*overlap*(mb/total);a.y-ny*overlap*(mb/total);b.xnx*overlap*(ma/total);b.yny*overlap*(ma/total);// 冲量更新速度...}}}}同级合成两个同等级、且都已释放的球相撞年龄 2 帧防止刚生成的球误合并就标记为 merging在碰撞点生成下一级球并加分functionmerge(a,b){a.mergingb.mergingtrue;a.deadb.deadtrue;constnx(a.xb.x)/2;constny(a.yb.y)/2;constnla.level1;scoreFRUITS[Math.min(nl,FRUITS.length-1)].score;effects.push({x:nx,y:ny,r:a.r,max:a.r30,life:1});if(nlFRUITS.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.maxFallenDANGER_Y60b.y-b.rDANGER_YMath.abs(b.vy)0.6Math.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 圆球物理、碰撞检测与合并逻辑或者刚学前端想看看「一个游戏是怎么从零写出来的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。