厌倦了广告里那种货不对板的魔性小游戏？这次用AI工具从零开始复刻了经典玩法。通过对话式编程，实现了蓝色小人过门增员的完整游戏逻辑，支持手机电脑双端游玩，让创意不再受限于技术门槛。
智能速览
用AI工具Coder实现广告同款小游戏开发
Quest模式实现自动化编程，无需手动确认
游戏支持手机电脑双端游玩
通过Agent Skills提升网页设计质量
实测解决视锥体裁剪等技术问题
部署服务器实现线上可玩
精华内容
AI编程工具的出现，让零基础开发者也能将创意变为现实。通过对话式交互，复杂的项目开发变得如同聊天般简单，真正实现了技术民主化。
游戏核心设计
游戏采用自动前进的蓝色小人作为主角，通过左右移动选择穿过带有算式的门。
每个门都有对应的数学运算，如+10或x2，穿过后小人数量会相应变化。遇到红色敌人会等量抵消，碰到尖刺则人数减半。
当人数归零时游戏结束，目标是在保证生存的同时尽可能多地带小人到达终点。这种玩法简单直观，却又充满策略性。
AI编程工具选择
选用了来自阿里的Coder，其Quest模式特别适合新手使用。
界面设计如聊天软件般友好，通过文字描述需求即可让AI执行复杂编程任务。内置的智能路由调度系统能够调用最适合的模型来生成代码。
整个过程无需手动确认每一步操作，可以完全放手让AI自主完成编程工作，大幅降低了开发门槛。
自动化开发流程
启用Spec模式后，AI会先规划项目结构并生成规范文档。
对于不确定的细节，如小人外观形状，AI会主动询问确认。确认方案后，Coder会自动执行编程任务，无需干预每个步骤。
这种Spec驱动的开发方式，让复杂的3D游戏项目变得井然有序，即使是新手也能轻松管理。
技术问题解决
测试中发现小人数量多时会出现消失问题，原因是Three.js的视锥体裁剪机制。
InstancedMesh的包围盒不会自动更新，导致被错误裁剪。通过设置frustumCulled=false禁用该功能，问题得以解决。
此外还修正了操作方向反向的问题，让鼠标移动与小人移动方向保持一致，提升了操作体验。
视觉设计升级
为提升游戏视觉效果，采用了Agent Skills功能中的Frontend Design技能。
安装方法简单，只需将技能包放入.qoder/skills文件夹即可。启用后，AI会自动调用该技能进行网页设计。
相比未使用技能时的简单界面，设计质量显著提升，呈现出更专业、更具差异化的视觉效果。
跨端部署实现
为了让更多人能体验游戏，额外要求Coder添加了手机端适配功能。
最终将游戏部署到服务器上，生成了可通过浏览器直接访问的链接。
无论是手机还是电脑，只需打开链接即可游玩，真正实现了跨平台体验。游戏地址已公开，方便大家随时体验。
AI编程工具的出现，让创意实现不再受技术壁垒限制。通过对话式交互，即使是编程小白也能开发出完整的游戏应用。未来，随着AI能力的持续进化，每个人都有可能成为数字内容的创造者。你还有什么创意想要实现？
关键评论
Coder上线首个自进化智能体Quest，主动澄清需求、规划方案，只需验收结果
用的是什么Claude模型？
就喜欢这种无脑小游戏
前排
