30分钟，AI 编程智能体“复刻”了糖果缤纷乐，连“上瘾机制”都写好了
由coder创建，最终由coder 被浏览 10 用户
无论是大人还是小孩，从人人玩游戏到每个人可以创作游戏，我们会收获不一样的快乐。
作为一名开发者，我们习惯了将 AI 当作代码补全工具或者搜索引擎的替代品。但如果把 AI 当作一个全能的“技术合伙人”——懂产品、懂设计、懂心理学，还能秒修 Bug，开发体验会变成什么样？
昨天，我心血来潮，想写一个三消游戏。为了测试 Coder 超级编程智能体（这次使用的是 Claude Code + Claude Opus 4.5）的极限，我给这次开发设定了 30 分钟 的倒计时。
结果完全超出了我的预期。它不仅写出了代码，还教我怎么设计游戏更让用户“上瘾”。
以下是全过程复盘。
\
第一阶段：不仅是 Coder，更是产品经理
通常我们写游戏，上来就是画格子、写交互。但我决定先“考考”它。
我： “我想开发一款三消类的游戏...帮我调研下市场哪些三消游戏做得比较好，有哪些创新玩法可以参考。”
我原本以为它会给我列几个游戏名字，结果它直接启动了 Web Search，几秒钟后，给我扔出了一份深度竞品分析报告。
它分析了《Candy Crush》、《Royal Match》和《Gardenscapes》，并列出了创新方向表。更离谱的是，它甚至直接给了我一个名为“魔法厨房”的完整策划案，包含核心玩法、Meta 玩法（餐厅装修）和技术栈建议（Canvas + GSAP）。
这就是 MakeCoder 和普通补全工具的区别：它有主动思考和规划的能力。
第二阶段：由简入繁，从 Demo 到移动端适配
得到策划案后，我只回了一句：“好的，开发。”
它迅速生成了 index.html 和 game.js，第一版代码就写了 1000 多行。我在本地跑了一下，逻辑跑通了，但体验很粗糙，只能在电脑上点。
我： “优化这款游戏，使其在手机浏览器上也可以玩。”
接下来的操作让我看到了它对细节的把控。它没有简单地加个 media query，而是：
- 修改了
viewport禁止缩放。 - 添加了触摸事件（Touch Events）并统一了指针处理逻辑。
- 甚至考虑到了 iOS 的安全区域（safe-area-inset），并加了一个“请竖屏使用”的提示层。
最让我震惊的一个细节发生在 Debug 环节。 中间有一段代码在处理特殊消除时报错了。代码文件已经膨胀到上千行，我懒得看，直接把报错信息扔给它。它居然精准定位到了数组越界的那一行，并在几秒钟内重写了整个匹配检测算法。这种从海量代码中“大海捞针”的能力，确实比我自己排查要快太多。
第三阶段：注入灵魂——复制“糖果”的质感
Demo 跑通了，但画面还是像个程序员做的。我想给它上点难度。
我： “看了你做的效果，有点简单，复制《糖果缤纷乐》的 UI 体验。”
这一步是质变。它没有仅仅改颜色，而是重构了整个渲染逻辑：
- 视觉升级： 用 Canvas 的径向渐变（Radial Gradient）模拟糖果的 3D 质感和高光。
- 动态背景： 加上了漂浮的糖果粒子和呼吸效果。
- 交互反馈： 引入了
navigator.vibrate，让手机在消除时有震动反馈。
它甚至自己引入了 Google Fonts 的 Fredoka One 字体，让界面瞬间有了商业游戏的味道。
第四阶段：AI 的“心理学”时刻
游戏好看了，但还不够好玩。我问了一个非技术问题：
我： “深入分析《糖果缤纷乐》，为什么它能吸引用户？”
MakeCoder 再次联网搜索，并给出了一个基于心理学的答案：可变比率强化、近失效应（Near-Miss Effect）、损失厌恶。
它建议我加入：
- 音效系统（消除音阶变化）。
- 更爽的 Combo 反馈（Amazing! Unbelievable!）。
- 每日奖励和关卡地图。
我直接让它：“深入学习并优化这个游戏。”
于是，在最后的几分钟里，它自己用 Web Audio API 合成了音效（因为无法下载素材），写了一套基于 localStorage 的存档系统，还做了一个带有锁定机制的关卡地图。
最后一步：一键上线
30 分钟结束。游戏已经从一个简陋的 Demo 变成了一个有特效、有音效、有存档的完整 Web App。
我只用了一行命令：
coder pub --name match3
游戏直接部署上线，生成了可访问的链接。
🎮 亲自上手体验
点开下面的链接，体验一下这款由 AI 在 30 分钟内“主刀”完成的游戏。同时，我还用同样的方式让它生成了其他经典游戏：
- 🍬 糖果消消乐 (本次案例): https://match3.coder.pub/ （在PC端界面、音效、流畅度好很多，手机上还待优化）
- 🔢 2048: https://2048.coder.pub/
- 💣 扫雷: https://minesweeper.coder.pub/
🚀 你的回合：复现与超越
你完全可以复现我的开发过程，甚至比我做得更好。也许你想给游戏加个排行榜？或者换成“猫咪消除”的主题？
现在就开始你的 AI 结对编程之旅：
-
安装 Coder CLI： 查看文档：https://makecoder.com/wiki/doc/AYAdIIlKxs (安装过程非常简单，几分钟即可配置好你的专属智能体)
-
拿走这份“提示词作弊条”： 这是我开发过程中使用的关键 Prompt，你可以直接复制进 Coder，看看你的 AI 队友会给你什么样的惊喜。
阶段一：从 0 到 1 的策划与实现
“我想开发一款三消类的游戏，用 html。帮我调研下市场哪些三消游戏做得比较好，有哪些创新玩法可以参考，帮助我设计一款三消游戏”
阶段二：移动端适配
“优化这款游戏，使其在手机浏览器上也可以玩”
阶段三：视觉升级（注入灵魂）
“看了你做的效果，有点简单，复制 糖果缤纷乐 的UI体验”
阶段四：产品思维与机制设计
“深入分析 糖果缤纷乐，为什么他能吸引用户”
阶段五：深度迭代
“深入学习 糖果缤纷乐，并优化这个游戏”
期待看到大家用 MakeCoder 创造出更多有趣的作品！Happy Coding with AI!