系列第 3 篇实战下。接着上篇游戏已经能玩了但手感和完整性还差得远。这篇讲怎么把粗糙的第一版打磨成成品以及两个加分项换肤和关卡切换。示例图1. 调掉落物理越掉越快、碰到停住我水果掉下来要有重力感越来越快碰到东西要停住叠上去不能穿过去。AI每帧给掉落水果加速度碰到下方水果就用碰撞分离顶在上方。每帧{f.vy0.45;// 重力越掉越快f.vy*0.985;// 空气阻力很小f.yf.vy;// y 朝下y 变大 往下// 碰到下方水果时碰撞分离把它顶住vy 清零}用真实数字看越掉越快初始 y100, vy0帧1: vy0.45 → y100.45 帧2: vy0.89 → y101.34 帧3: vy1.33 → y102.67 帧4: vy1.76 → y104.43 帧5: vy2.18 → y106.61每帧下落距离 0.45→0.89→1.33→1.76→2.18越来越大 加速下落。2. 调碰撞不重叠、滑落、卡缝、级联我水果不能叠在一起单果上要滑落不能粘两个果之间的窄缝要卡住点走一个它上面失去支撑的才掉。AI 把碰撞拆成两块碰撞分离两两重叠就各退一半重复 10 次for(每对 a,b){dist两点距离(a,b);if(dista.半径b.半径){// 重叠重叠量(a.半径b.半径)-dist;沿连线 各退 重叠量/2;// 刚好分开}}支撑判断掉到固定水果圆面上用上一帧在面上、本帧到面下判定穿过单支撑滑落、双支撑窄缝卡住if(掉落果穿过某个挂枝果圆面){if(支撑只有1个)沿圆面切线滑落;if(两个支撑且开口1.45倍半径)卡住不动;}踩坑实录有次水果从容纳不下的窄缝穿过去。我截图说缝隙容不下一个水果却穿过去了。AI 加了上一帧位置快照比对穿模修好了。这种 bug 给 AI 看截图最有效。级联掉落只放直接失去支撑的那层不递归点走水果X{释放X正上方、且只靠X撑着的水果;// 不递归释放更上面的留到下一帧再判断}3. 修「消除不成对」的坑配对完整性我玩到最后剩 4 个消不掉还有蓝色水果不成对。你计算错了AI 查了三处根因不是算法错是数据漏了根因现象修法生成数量奇数某种颜色多一个永远消不完每种颜色生成偶数个摆不下被静默丢弃屏幕放不下多出的没进队列摆不下的全部进补位队列道具只删一个消除按钮只删当前果配对断档同步删同色配对生成关卡(){每种颜色数量偶数;摆不下的水果 → 补位队列.add(它);// 别丢}给后端同学的提醒这坑你最该在意——本质就是数据一致性。我让 AI 加了个assertPairable()校验函数启动时检查每种颜色都是偶数、场上队列总数配对不配对直接报错。后端做单测那套思路直接用。4. 换肤让 AI 用 AI 生图三国 → 蜡笔小新我第二关水果换成三国人物第三关换成蜡笔小新图片用 AI 生成。AI用图像生成工具出 10 张透明底 Q 版头像存到heroes/和shinchan/画水果时按关卡换图。代码只改画什么逻辑不动皮肤不影响本质画水果(f){if(当前关2三国图就绪)圆形裁剪里画(三国头像[f.类型]);elseif(当前关3小新图就绪)圆形裁剪里画(蜡笔小新头像[f.类型]);else画(普通水果[f.颜色]);}加分项AI 生成的图要预加载完再显示否则第一帧会闪。AI 加了onload回调没加载完就先画普通水果兜底。5. 加关卡切换功能我加个能切换关卡的功能。AI顶部第 X 关徽章改成可点弹出 1~5 关选择面板点哪个重开哪关。点关卡徽章(){弹出面板(显示1~5关,当前关高亮);}选关卡(lv){当前关lv;清空三个筐;按 关卡规则(lv)重新生成;关掉面板;}6. 方法论怎么让 AI 高效修 bug做了 26 个 bug总结出让 AI 修得又快又准的 4 条说清三步你点了啥 → 预期咋样 → 实际咋样。带截图 圈出问题点视觉 bug 截图比文字强 10 倍。给坐标 / 数字依据说dist14不如说a在(300,115) b在(350,115) 半径50 所以 dist50——AI 才能验证。一次一个功能别顺便把物理也调了容易改崩。7. 总结26 个 bug 复盘完真正的算法错误只有 5 个其余 21 个都是需求理解偏差比如 y 轴朝下搞反和参数没调对迭代次数、阈值。给后端同学的话你不是不能做前端游戏你只是缺把想法翻译成需求这一步。WorkBuddy 帮你写代码、跑、预览你只管想清楚 说清楚。这个游戏从空壳到成品我一行前端没从头写全是对话出来的。系列完。源码在fruit-game.html设计思路在第 1 篇实战在上/下两篇。去试试做个你自己的小游戏。一句话收尾设计想清楚第1篇→ 搭骨架上篇→ 调手感加料下篇 一个能玩、能发、能换皮的游戏。
系列第 3 篇实战下。接着上篇游戏已经能玩了但手感和完整性还差得远。这篇讲怎么把粗糙的第一版打磨成成品以及两个加分项换肤和关卡切换。示例图1. 调掉落物理越掉越快、碰到停住我水果掉下来要有重力感越来越快碰到东西要停住叠上去不能穿过去。AI每帧给掉落水果加速度碰到下方水果就用碰撞分离顶在上方。每帧{f.vy0.45;// 重力越掉越快f.vy*0.985;// 空气阻力很小f.yf.vy;// y 朝下y 变大 往下// 碰到下方水果时碰撞分离把它顶住vy 清零}用真实数字看越掉越快初始 y100, vy0帧1: vy0.45 → y100.45 帧2: vy0.89 → y101.34 帧3: vy1.33 → y102.67 帧4: vy1.76 → y104.43 帧5: vy2.18 → y106.61每帧下落距离 0.45→0.89→1.33→1.76→2.18越来越大 加速下落。2. 调碰撞不重叠、滑落、卡缝、级联我水果不能叠在一起单果上要滑落不能粘两个果之间的窄缝要卡住点走一个它上面失去支撑的才掉。AI 把碰撞拆成两块碰撞分离两两重叠就各退一半重复 10 次for(每对 a,b){dist两点距离(a,b);if(dista.半径b.半径){// 重叠重叠量(a.半径b.半径)-dist;沿连线 各退 重叠量/2;// 刚好分开}}支撑判断掉到固定水果圆面上用上一帧在面上、本帧到面下判定穿过单支撑滑落、双支撑窄缝卡住if(掉落果穿过某个挂枝果圆面){if(支撑只有1个)沿圆面切线滑落;if(两个支撑且开口1.45倍半径)卡住不动;}踩坑实录有次水果从容纳不下的窄缝穿过去。我截图说缝隙容不下一个水果却穿过去了。AI 加了上一帧位置快照比对穿模修好了。这种 bug 给 AI 看截图最有效。级联掉落只放直接失去支撑的那层不递归点走水果X{释放X正上方、且只靠X撑着的水果;// 不递归释放更上面的留到下一帧再判断}3. 修「消除不成对」的坑配对完整性我玩到最后剩 4 个消不掉还有蓝色水果不成对。你计算错了AI 查了三处根因不是算法错是数据漏了根因现象修法生成数量奇数某种颜色多一个永远消不完每种颜色生成偶数个摆不下被静默丢弃屏幕放不下多出的没进队列摆不下的全部进补位队列道具只删一个消除按钮只删当前果配对断档同步删同色配对生成关卡(){每种颜色数量偶数;摆不下的水果 → 补位队列.add(它);// 别丢}给后端同学的提醒这坑你最该在意——本质就是数据一致性。我让 AI 加了个assertPairable()校验函数启动时检查每种颜色都是偶数、场上队列总数配对不配对直接报错。后端做单测那套思路直接用。4. 换肤让 AI 用 AI 生图三国 → 蜡笔小新我第二关水果换成三国人物第三关换成蜡笔小新图片用 AI 生成。AI用图像生成工具出 10 张透明底 Q 版头像存到heroes/和shinchan/画水果时按关卡换图。代码只改画什么逻辑不动皮肤不影响本质画水果(f){if(当前关2三国图就绪)圆形裁剪里画(三国头像[f.类型]);elseif(当前关3小新图就绪)圆形裁剪里画(蜡笔小新头像[f.类型]);else画(普通水果[f.颜色]);}加分项AI 生成的图要预加载完再显示否则第一帧会闪。AI 加了onload回调没加载完就先画普通水果兜底。5. 加关卡切换功能我加个能切换关卡的功能。AI顶部第 X 关徽章改成可点弹出 1~5 关选择面板点哪个重开哪关。点关卡徽章(){弹出面板(显示1~5关,当前关高亮);}选关卡(lv){当前关lv;清空三个筐;按 关卡规则(lv)重新生成;关掉面板;}6. 方法论怎么让 AI 高效修 bug做了 26 个 bug总结出让 AI 修得又快又准的 4 条说清三步你点了啥 → 预期咋样 → 实际咋样。带截图 圈出问题点视觉 bug 截图比文字强 10 倍。给坐标 / 数字依据说dist14不如说a在(300,115) b在(350,115) 半径50 所以 dist50——AI 才能验证。一次一个功能别顺便把物理也调了容易改崩。7. 总结26 个 bug 复盘完真正的算法错误只有 5 个其余 21 个都是需求理解偏差比如 y 轴朝下搞反和参数没调对迭代次数、阈值。给后端同学的话你不是不能做前端游戏你只是缺把想法翻译成需求这一步。WorkBuddy 帮你写代码、跑、预览你只管想清楚 说清楚。这个游戏从空壳到成品我一行前端没从头写全是对话出来的。系列完。源码在fruit-game.html设计思路在第 1 篇实战在上/下两篇。去试试做个你自己的小游戏。一句话收尾设计想清楚第1篇→ 搭骨架上篇→ 调手感加料下篇 一个能玩、能发、能换皮的游戏。
