我用 AI 写了个 3D Web 游戏：在 52 座中国城市里，把 900 个英语单词读给词宠听

先说清楚：这不是一个成熟产品。

它是我用来验证一件事的实验——AI 到底能不能从零写完一个 3D Web 游戏。

结论先放出来：能写到"点开就玩"，但离"能用"还有一段距离。中间那段路，还是得人来走。

游戏已经在线部署：https://qtzu.com —— 浏览器直接打开就能试玩，不用下载安装、不用注册，手机和电脑都能玩。

• 在线试玩：https://qtzu.com/
• 源码仓库：https://github.com/dotnet9/qtzu （MIT，欢迎 fork）

项目叫 Q淘族（qtzu），纯前端、点开就能跑：填个昵称、挑个年级和家乡就能开始；不连后端也能玩，存档就放在本机。现在的状态是开发测试中：数据还在补，界面还在打磨，我不会把它当成一个真实的儿童英语教辅推荐给谁。

顺便说一句，这篇文章里的截图和动图，是脚本自己进游戏截的：Playwright 驱动、CDP 抓帧、gifenc 编码，全程没人手动点一下。这大概也算"AI 开发"的一部分。

1. 玩法：一句话说清

走近一颗发光的词宠蛋 → 听发音 → 🎤 大声读出来（自动评分，越准星星越多），或者 🧩 用字母块把单词拼出来 → 孵出词宠，屏幕蹦出一句"淘了个蛋！"

两个我比较在意的设计：

• 复习伪装成喂养：每关有一半是复习蛋，就是以前城市学过的词，读一遍就过。遗忘曲线不叫遗忘曲线，叫"你的词宠想你了"。
• 永无失败惩罚：读错不扣分，没有失败界面；语音识别不支持或者识别服务连不上，会自动降级成字母块拼词，100% 可玩。

组关的 seed 由"昵称 + 课本册数"派生，所以同一个人前后两次进来遇到的词是同一批，换个人则不一样。

2. 城市：巡游中国 52 座城市

这是整个项目最花时间的部分。

data/cities/index.json 里现在正好 52 座城市，成都起步（默认家乡），北京收尾。每座城市是一整屏 3D 地图：奶油色的"院墙"围出城市边界，墙内是草地、树丛和低模高楼。

拉远镜头，是整张立体中国地图：邻城用真实轮廓画出来，每座城挂着自己的状态牌（待闯关 / 已攻克 / 通关后再来），一条金色虚线画出你已经走过的巡游路线。

城里立着几十块探索立牌：蓝色是大学 🎓、橙色是美食 🍜、绿色是风景 🏞️，点开就是图文小百科，走近会朗读英文名。点城市中央的欢迎牌，还能翻一张城市卡——历史、大学、美食、风景四个页签，里面放的是真实照片。

街上还有 NPC 在走：游客、小贩、学生等六种角色，走近打招呼，点一下聊天，气泡自动分页，聊的是"为什么要饭前便后洗手""彩虹是怎么来的"这类小知识。

3. 我最得意的一块：一校一门

大学立牌点开是校园介绍，那 3D 里总得有个校门。

于是有了 js/uni-gates.js：52 所大学单独定制校门，其余的一律按校名关键词落进风格族（20 条规则 + 古典柱式兜底）。

定制的那些很好认：清华二校门、北大西门牌楼、哈工大苏式主楼、武大牌坊、厦大嘉庚门、苏大园林月亮门、藏大藏式门、敦煌九层楼。

风格族则按学校类型出造型：航空航天是火箭发射架，铁道是蒸汽机车，邮电是信号塔，海洋是灯塔和鲸尾，农林是麦穗风车，中医药是药葫芦，政法是天平，艺术是琴键加调色盘……同族里还会按校名种子微调柱色、高矮和装饰，校徽贴在门楣上，所以不会有两所大学的门长得一模一样。

4. 词宠、图鉴和那些小心思

孵出来的词宠会住进城里的乐园，会饿、会想被摸头，摸一下它会讲一句自己的小故事；读得特别准的（95 分以上）会标成稀有词宠，带一层柔光入场。孵过的都会记进词宠图鉴，随时能翻自己收了多少只。

星星攒够能去许愿井换装扮（帽子、王冠、气球、魔法棒），每天有一个小任务，连续打卡有额外奖励。还有护眼提醒：连续玩 30 分钟会弹一次休息卡。

手机和电脑都能玩：电脑是 WASD 走路、右键转视角、E 键交互；手机是摇杆 + 双指缩放 + 点立牌。整站还带了 PWA，添加到主屏幕后离线也能玩。

5. 学习设计：对齐人教版，但我不敢吹效果

词库按人教版 PEP 3-6 年级 8 册组织（js/curriculum.js 里的 3a…6b），每个 Unit 后面还挂了拓展词汇和短语，按册切关，不把 8 册揉成一锅。单词和短语都会生成语音，都支持跟读评分。

但这一段我必须说清楚：词汇覆盖不等于教学效果。

这个项目没有做过任何教学验证，也没有教育专家参与。它的目标是把"读单词"这件事做得不让人抵触，而不是替代课本和老师。真要让小朋友用它学英语，至少得先过一轮真实使用验证——这正是它现在没做到的部分。

6. 技术侧：一个 3D 游戏，没有一行构建配置

这块是我认为最值得分享的部分。

• 纯前端、零构建：ES Modules + Three.js 0.160（CDN importmap），打开 HTML 就跑，没有打包器，没有 node_modules。
• 程序化建模：项目里没有任何外部模型文件。树、灌木、楼、校门、词宠，全是代码里长出来的；js/models/ 按域拆成了几何工具箱、宠物基础形、参数化词宠、场景物等几层。
• 内容全 JSON 驱动：加城市、加大学、加美食、加风景，只需要加 JSON，零代码。缺文件自动跳过，空数据兜底，不会因为少一个 JSON 就崩。
• 体量参考：js/ 下 35 个模块，game.js 315KB、ui.js 150KB、world.js 135KB，还有 795KB 的 city-shape-data.js 专门存真实城市轮廓。
• 语音三级降级：Web Speech API → 本地 Whisper → 字母块拼词。发音用的是 Wikimedia 真人录音预生成的 mp3，离线也能播。
• 存档：localStorage 为主，另外带一套可选的 Node 后端（排行榜、账号、跨设备存档）；后端不在就自动降级成本机存档，游戏照常玩。
• 换皮：fork 之后只改 data/app.json 一个文件，名字、标语、站点、仓库链接全换掉，不用碰代码。

AI 在其中干了多少？代码、数据管线、文案、图示，包括这篇文章和文章里的图，它都深度参与了。人主要负责定规则、做验收，以及砍掉它一开始想做的一大堆东西。

7. 怎么玩、怎么跑起来

最省事的方式：直接在浏览器打开 https://qtzu.com ，手机和电脑都能玩，不用下载、不用装、不用注册。

电脑：WASD 走路，点地面走一步，右键转视角，滚轮或 + - 缩放，E 键交互。

手机：摇杆走路，点地走一步，双指缩放，点立牌和蛋交互。

想跑本地：

node scripts/serve.js 6100      # 零依赖开发服务器
# 打开 http://localhost:6100/

Windows 下双击 run.bat 就行（同样是 6100 端口）。注意语音识别需要 HTTPS 或 localhost，不支持时会自动降级成字母块。

8. 现在到哪一步了

说实话的部分：

• 还在开发测试阶段，没商业化，也不打算商业化。
• 部分城市的图片来自 Wikimedia，质量参差；有些大学的门目前还是风格族造型，没单独定制。
• 语音识别依赖浏览器的识别服务，国内网络环境下经常连不上，所以降级链路是必须的，不是锦上添花。
• 移动端布局和长时运行的性能还在打磨。

所以它现在的真实定位是：一份公开的 AI 开发实验记录。

想亲自玩一下很简单：浏览器打开 https://qtzu.com 就行。如果你愿意一起玩这个实验，最需要的帮助是补城市数据、补校门造型、吐槽语音跟读体验。

• 在线试玩：https://qtzu.com/
• 提 Issue / PR：https://github.com/dotnet9/qtzu

9. 最后

这次验证的结论，我写在这里：

AI 已经能把"巡游 52 座城市、900 多个单词、程序化建模、语音跟读"这个体量的 3D Web 游戏，从零写到点开就能玩。

但"能玩"和"能用"之间那段路，还是得人来走——定规则、做取舍、盯验收。

代码全在仓库里，MIT 协议，欢迎来 fork 成你自己的城市、你自己的课本，也欢迎直接告诉我哪里做得不对。