这个想法很朴素：一个典故，一个小游戏。孩子不是读故事，而是亲手砸开混沌、把天撑起来、把石头一块块搬上船。七个典故已经能玩，还有很多在排队。
真正麻烦的不是玩法，而是------怎么让第 30 个游戏，比第 1 个好做？下面用几张图聊聊它的搭法。
一、合集长什么样：一栋四层小楼
图 1 · 外壳只是最上面那层；引擎和玩法都在楼下，进门才叫醒
外壳是孩子看到的第一层：典故馆、图鉴、开始按钮。游戏包一层，只管自己这个典故怎么玩；公共零件层放着契约、玩法模板和内容档案；底座管存档、声音和复习计划。
有一条规矩贯穿全楼：换典故 = 加一个包 + 一份文字档案，外壳一行代码不动。而且引擎（Phaser，359 KB）只住在游戏那一侧------孩子在大厅翻图鉴时，它还在门外等着。
二、一个典故怎么拼出来：盘古的流水线
图 2 · 模板提供「手感」，专属场景提供「气质」
每个典故 = 模板骨架 + 内容档案 + 专属气质，大约 60% 复用、40% 定制。
盘古是最完整的例子：两幕绘本开场；连点四下，把蛋壳砸开；连点三十次，把天撑到一万八千年------画面里的盘古真的会被一截截拉长；再把六团光拖回太阳、月亮和江河；最后领走典故卡。
模板只负责交互的「手感」，故事和画面每个典故都是自己的，这样才不至于「玩起来都一个味」。
|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| 
| 
|
| 砸蛋：连点四下 | 撑天：盘古被一截截拉长 |
图 3 · 盘古的「砸」与「撑」实机画面
三、体积账单：把 359 KB 关在门外
图 4 · 首屏只有 72.6 KB；真正的大家伙等孩子点进去才现身
网页游戏最怕「点进去先转圈」。项目给自己定了硬预算，而且真有一条命令守着它。实测：外壳首屏 72.6 KB；引擎 359 KB，比七个游戏的业务代码加起来还大十倍不止；每个小游戏的业务代码只有 1.2--3.2 KB。
好消息是：轮到第二个游戏的时候，引擎早就在浏览器缓存里了------等于免费。
四、给孩子玩的三条「反常识」
- 少写字，多动手：最关键的一步（比如「换成石头，让水痕对上」）不靠选择题，靠孩子自己拖出来。
- 不惩罚：把最后一个太阳也射了，天只会黑一下，太阳自己回来------孩子撞一次就懂了。
- 不靠颜色：补天靠形状配对，色弱的孩子照样能玩；称重读数一度只有 1.48:1 的对比度，几乎看不见，后来垫了张卡片底，才成了全场焦点。
|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 一屏一句话 | 把大象换成石头 | 补天靠形状配对 |
图 5 · 实机画面：少写字、多动手、不靠颜色
五、「做完了」谁说了算：六个关卡，全绿才算数
图 6 · 一条命令从代码体检到产物；超预算直接失败
合集里的「完工」不靠感觉，靠一条命令：pnpm verify。类型、风格、92 项单元测试、内容和翻译的完整性、构建、体积预算，六关全绿才行。
最有意思的是后两关：翻译漏了会在构建时被拦下，而不是等用户切到英文才发现；连「英文标题把典故卡撑爆」这种事，也有专门的截图巡检盯着------每部游戏、两种语言、每个画面，全部截图留档。
六、一份产物，三种壳
图 7 · 同一个 dist，套上不同的壳就是浏览器版、桌面版、安卓版
同一份网页产物，外面套不同的壳：浏览器 / PWA 扫码即玩；Windows 轻量桌面双击即玩；安卓 App 装上就能离线玩。游戏代码完全不知道自己在哪运行------要存档、要发音、要报进度，都找同一个「服务前台」。
七、三条家规
图 8 · 家规写进了代码检查和验证命令里，不靠自觉
这三条不是口号：逻辑层不许随机、不许看表，测试才能一秒跑完；游戏层碰不到本地存储，将来换平台只换接口；每个游戏都能 ?autoplay=1 自动通关，机器人才验证得了。
八、三个真实的坑
- 最新版 TypeScript 装不上：升级到「最新」反而直接报错，最后把它请回 5.9.3。
- 慢手机按住 6 秒也追不上太阳：跑步进度原本按「帧」算，慢机器上帧被拖慢，进度跟着缩水；改成按「手表」算，还加了一条把 CPU 拖慢 6 倍的测试守着。
- 英文标题把卡片撑爆：中文五个字，英文三十个字母，固定版面必然重叠；现在所有卡片都「先量后排」，宁可字小一点，也绝不重叠。
九、实机画面一览
最后放几张实机截图（手机竖屏）。值得一提的是：画面里的太阳、小鸟、石头和按钮，全部是代码用几何图形画出来的，项目里没有一张美术素材------所以改颜色、改造型，改的都是代码。
|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 典故馆：外壳首屏 | 石头过秤，得出 3000 | 后羿拉弓瞄准 |
|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 精卫填到一半 | 夸父手杖化成桃林 | 一键切到英文 |
图 9 · 外壳与五个典故的实机画面
项目地址