用AI每天复刻一个微信小游戏 · Day ：打个螺丝

写在前面

Day 选的是《打个螺丝》。

这款游戏在微信畅玩榜上排名第四。但我选它不主要是因为热度——而是因为它是这份清单里逻辑最干净的一个：没有复杂的物理引擎、没有数值程序、没有需要设计师的美术资产，主要就是一个"拆、放、消"的循环。适合给整个系列开一个好头，也适合第一次在微信小游戏环境里跑通 AI 写代码 → 截图看效果这个闭环。

结果比预期复杂一点——但也所以学到了更多东西。

一 游戏介绍

玩法概述：

• 目标：把板子上的螺丝拧下来按颜色送进对应的工具箱。说起来，
• 挑战点：上层木板会压住下层螺丝。导致需先拆解顺序，说起来，工具箱数量少于颜色种类，迫使玩家利用备选区等待。
• 主要机制：拆解、放置、消除的循环，策略主要在于规划顺序与备选区管理。

二 过程记录

第一步先这方面。先调研，再写代码

路可以走。

Day 《打个螺丝》复刻：帮我调研这款游戏的主要玩法规则，还有我复刻需要的素材渠道。接下来根据调研，产出一个实现规划文档 doc/-day-screw-plan.md。验收标准这方面，只要微信端能跑。不要浏览器兼容，第一轮不用素材但保留占位。其实，

Ai 先搜了一圈这款游戏的玩法说明。整理出主要规则和实现规划，接下来产出了 doc/-day-screw-plan.md。规划文档里包括：玩法三件套定义、关卡生成逻辑、素材渠道推荐还有技术栈选择。

痛点1：需求理解偏差——AI 对规则初始误读导致后续多轮纠正耗时。

至于接下来。脚手架选型的插曲

I 直接让 AI 用原生 Canvas 写了一版，但跑起来发现 UI 层几乎全靠手算坐标。于是强制改用 Phaser 并寻找 Gitee 上模板 wbgbg/phaser-wx-template.

要用 Phaser。模板仓库在 Gitee，不在 GitHub，叫 wbgbg/phaser-wx-template，用这个作为脚手架。对了玩法理解错了...

痛点2：脚手架资源分布不均，导致 AI 搜索耗时且错误率高。

：跑通第一版，接下来遇到截图超时

代码写完后用 wx-minigame-helper 本地预览。日志正常，但截图一直超时；按理说，对了 wx.getSystemInfoSync 替代 .toFixed。移除无效 zoom.

痛点3：沙箱环境缺失 devicePixelRatio 导致渲染错误；截图性能瓶颈未及时发现，

从第一轮完善来看。颜色、动画、随机性

Ai 认为四种颜色足够，但实际会让游戏无压力可赢；缺少动画与细节，板子重力和随机性缺失导致可玩性低。

目前颜色太少了... 缺少动画和细节...

• 痛点4： AI 对“可玩性”指标把握不足，需要人机交互持续迭代才能逼近真实体验。
• 痛点5： 每颗螺丝独立 tween 入场导致截图超时高并发动画需性能调整。不过，
• 痛点6： 备选区位置误差导致后续逻辑混乱。 需要精确布局调整，

至于第二轮完善。性能调整 + 备选区位置 + 严格 膜/板规则

• 痛点7： 多对象绘制造成 Canvas 卡顿，需要批量绘制 Graphics 与纹理预生成方法。不过，
•  痛点8： 备选区从底部搬到顶部工具箱与主区域之间。实现视觉一致性与功能完整性提高。
•  痛点9： 严格规定每块板子固定三颗螺丝。并保持间距> 直径+8px，提高视觉可读性与操作准确度。

从"第三轮完善来看。遮挡粒度、备选回流、布局分布"

• - 隔离板子形状单一问题，引入随机宽高组合与网格铺满布局，明显提高视觉多样性与挑战深度。
• - **遮挡改为螺丝粒度** ：从整块板子锁定升级为每颗螺丝单独判断。精准控制点击权限，从而避免“一起被锁死”的尴尬局面。
• - **备选区视觉** ：将方块替换为圆角矩形框 + 五个圆形凹洞。使得玩家能够直观识别哪颗螺丝待处理，也兼顾美观简洁。其实，
• - **备选区自动回流** ：当工具箱刷出新颜色后立即扫描备选区。将同色螺丝飞回工具箱并左移对齐；若超过容量则触发失败，链式触发保证了不出现死局，让玩家始终拥有继续尝试机会。

"三 复刻成果"

• 关卡生成 : 每局随机生成，共72色×12颗=864颗螺丝 ;多种宽高组合 & 行列网格铺排 & 随机抖动，全局支持 seed 固定调试.
主要玩法三件套 :

T0 上方,每箱装满。消除后闪光 &>

动画与交互 : 点击 螺丝 → 飞入对应孔洞 → 工具箱闪光消除;备选 匹配即自动飞回并左移;入场整体淡入滑落，通关/失败结果界面;随机新关卡重开.
性能 : CANVAS 模式下同类图形批量绘制 &><, 纹理预生成复用 , 单 Tween 控制整体入场.
未做内容 : 音效 / 美术素材 / 难度分级 / 道具程序 等.

"四 今天沉淀的主要内容"

"Phaser 微信小游戏模板"

• .

---

请参考以下文件结构：

bash game.js ← 入口 game.json ← 配置 js/main.js ← Phaser 启动 js/libs/ ← Phaser + wx 适配层 js/scene/GameScene.js ← 示例场景 project.config.json ← 开发者工具配置

---

---

微信小游戏开发经验 Skill

工作流这方面，

 run_game → preview_url → 等待 → get_logs → capture_screenshot 标准流程；当断连时自动重连或提示使用者检查网络。再看渲染性能模式，合批 Graphics / 预生成纹理 / Tween 合批；三件事对 CANVAS 模式性能影响量级。玩法设计模式这方面，元素粒度遮挡判定；缓冲槽自动回流，可重播随机关卡生成 —— 三种模式在益智小游戏中频繁出现。

---

系列复盘文章

除了这篇文章，还在 doc/-day-screw.md 写了一篇技术向复盘专门讲实现细节。

如果你对圆‑矩相交判定或 buffer 回流链式触发感兴趣，可以去看那篇。

---

六 接下来

Day 是《消个水果》。一样属于 “收纳消除” 类型，但主要机制从 “分层遮挡 + 工具箱配色” 转变为 “悬浮元素 + 底槽 + 相邻同类三消”。话说回来，

预计今天已完成工程基础设施。Day 可以更快进入玩法设计本身。

---