系列第 2 篇实战上。我是 Java 后端前端很弱。这个游戏我一行前端代码都没从头写过全是跟 WorkBuddy 对话出来的。如果你也后端出身、想做点小游戏试试水这篇就是给你看的。示例图1. WorkBuddy 是什么一句话WorkBuddy 是个AI 助手但它不只会聊天——它能写文件、跑命令、开浏览器给你看效果。你用大白话告诉它我要做什么它直接把代码写到项目里、跑起来、给你预览。三种工作模式Craft说做就做直接动手写代码、改文件、出结果Plan先计划先给你方案你确认了再干Ask只聊只回答问题不动文件做游戏我用Craft最多——想到哪说到哪它当场改。2. 第一步把设计思路喂给 AI回到第 1 篇那份设计我把它整理成一段需求直接发给 WorkBuddy不用写代码写人话我用户做一个手机竖屏的 Canvas 水果消除游戏。顶部水果挂枝固定点一下脱落下落碰屋檐顺坡滑向中间口子篮子顶部相邻同色消除3 色失败、清空胜利。先给我一个能跑的空壳画布 游戏循环 画一个水果。AI 回了我一个fruit-game.html打开就能看到一个水果在动。关键第一版不要贪多先要能跑的空壳。很多人一上来就要完整游戏AI 容易写崩。3. 加「挂枝固定」我水果应该挂在屋檐下一排固定不动不是随便飘。用 anchored 状态表示挂着。AI好给水果加anchored标记挂枝的每帧不参与重力。伪代码AI 实际写的逻辑for(水果 f:场上列表){if(f.anchored)continue;// 挂着的别动f.vy0.45;// 没挂的才掉f.yf.vy;}4. 加「点击脱落」我点屏幕上的水果让它掉下来。注意要容易点中。AI给画布加点击事件手指坐标离圆心 1.55 倍半径就算命中把状态改成掉落。点屏幕(x,y){for(水果 f:场上列表){if(距离(f,x,y)f.半径*1.55){f.anchoredfalse;// 摘下来开始掉break;// 一次只摘一个}}}踩坑实录第一版 AI 用的命中半径是 1.2 倍水果小不好点。我截图说点不中AI 改成 1.55 倍好了。给 AI 反馈要带现象别只说不行。5. 加「屋檐滑动」我水果掉下来碰到屋檐斜坡要顺着滑到中间的口子不是直直掉下去。AI屋檐画成两条斜线水果落到斜面上时给它一个沿斜面向中心的横向速度。if(水果碰到屋檐斜面){f.vx朝向中心的方向*0.4;// 往中间滑f.vy*0.6;// 竖直速度减弱}踩坑实录有颗水果卡在单个水果圆面上不动。我圈出来截图说它应该滑下去不是粘住。AI 改成落在单个圆面上沿切线滑落修了。截图 圈出问题点AI 修得最准。6. 加「篮子相邻消除」我水果滑进中间篮子口落进竖井顶部相邻两个同色就消掉。AI篮子用列表存进篮时检查倒数两个是否同色。水果进篮(f){篮子列表.add(f);if(篮子列表.size()2){Fruita倒数第1个,b倒数第2个;if(a.颜色b.颜色){删掉 a 和 b;// 消除if(补位队列非空)从顶部补一个;}}if(篮子里颜色种类3)游戏结束(输);}7. 跑起来发现的真问题 让 AI 修第一版能玩了但几个真 bug 是这么修的现象我说的AI 的修法点不中水果命中半径 1.2R → 1.55R水果重叠颤动碰撞分离每帧迭代 3 次 → 10 次新水果自动掉补位水果误设 falling → 改成 anchored掉落顺序反了改成只释放失去唯一支撑的那层受控级联方法论记住这个跟 AI 修 bug说清楚三件事——① 你点了什么 ② 预期怎样 ③ 实际怎样。带截图更好。别只说有 bug。8. 小结第一版能玩了到这步游戏已经能挂枝 → 点掉 → 滑动 → 进篮 → 同色消除 → 3 色判负。一个完整可玩循环。下篇第 3 篇讲更难的调掉落物理的真实感、碰撞不穿模、修消除不成对、换肤三国/蜡笔小新、关卡切换。一句话总结你不用会前端只要会把设计拆成加一个功能这种小步一步步喂给 WorkBuddy它就能把游戏搭出来。下篇见。