企业官网建设流程全解析

系列第 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.vy+=0.45;// 没挂的才掉f.y+=f.vy;}

4. 加「点击脱落」

我：点屏幕上的水果，让它掉下来。注意要容易点中。

AI：给画布加点击事件，手指坐标离圆心 < 1.55 倍半径就算命中，把状态改成掉落。

点屏幕(x,y){for(水果 f:场上列表){if(距离(f,x,y)<f.半径*1.55){f.anchored=false;// 摘下来，开始掉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 修 bug，说清楚三件事——① 你点了什么 ② 预期怎样 ③ 实际怎样。带截图更好。别只说"有 bug"。

8. 小结：第一版能玩了

到这步，游戏已经能：挂枝 → 点掉 → 滑动 → 进篮 → 同色消除 → 3 色判负。一个完整可玩循环。

下篇（第 3 篇）讲更难的：调掉落物理的"真实感"、碰撞不穿模、修"消除不成对"、换肤（三国/蜡笔小新）、关卡切换。

一句话总结：你不用会前端，只要会把设计拆成"加一个功能"这种小步，一步步喂给 WorkBuddy，它就能把游戏搭出来。下篇见。