一个12岁孩子的AI开发故事

我做了一款三国游戏

从一个疯狂的想法开始
借助AI，真正做出了一款可以玩的游戏 🎮

👦
12岁独立开发者
Claude Code · Supabase · Zeabur · GitHub · 全程AI辅助
开始探索↓
01 / 13
起因 · 灵感

为什么要
做这个游戏？

我特别喜欢三国的故事。但我发现，市面上没有一个能让人边玩边学三国历史的游戏。有一天，一个想法突然冒出来了……

「我不会写代码，但AI会。
如果我告诉AI我想要什么，
它能帮我做出来吗？」

—— 某个周末的灵光一闪 💡
📖
三国故事的热爱

刘备、关羽、诸葛亮……这些人物太有魅力了。我想让更多人喜欢上这段历史

🤖
发现了 Claude Code

一个可以用对话方式写代码的AI工具。我决定试试——12岁也能做出游戏吗？

🎯
目标：真正能上线的游戏

不是学校作业，是真正有网址、可以分享给朋友玩的完整游戏

😤
「你又不会编程，做不到的」

身边人这样说。这反而让我更想证明：有AI的时代，年龄不是障碍

02 / 13
关卡世界

12场经典战役 · 走遍三国大地 🗺️

赤壁之战 吴
⑥ 赤壁之战 · 火烧连环船，三国鼎立
涿郡起兵 蜀
① 涿郡起兵
官渡之战 魏
④ 官渡之战
长坂坡 蜀
⑤ 长坂坡
草船借箭 吴
⑦ 草船借箭
火烧连营 吴
⑪ 火烧连营
空城计 蜀
⑨ 空城计
三顾茅庐 蜀
③ 三顾茅庐
七擒孟获 蜀
⑩ 七擒孟获
03 / 13
武将图鉴

36位历史武将 · 三国群英齐聚 ⚔️

曹操
曹操
司马懿
司马懿
郭嘉
郭嘉
张辽
张辽
夏侯惇
夏侯惇
典韦
典韦
诸葛亮
诸葛亮
关羽
关羽
赵云
赵云
刘备
刘备
张飞
张飞
马超
马超
周瑜
周瑜
孙权
孙权
陆逊
陆逊
甘宁
甘宁
黄盖
黄盖
吕蒙
吕蒙
传说
稀有
普通
魏
蜀
吴
04 / 13
功能全览

从零到九大系统，一步一步搭起来 🏗️

⚔️
回合制对战
武将出招，攻防计算，战斗动画。普通/精英/传说三档难度，NPC强度递增
battle.js
🎴
抽卡系统
三种稀有度，保底机制，进度条显示，翻牌动画+粒子特效
gacha.js
📚
答题系统
100+道三国历史题目，答对获得抽卡积分，学习与游戏结合
quiz.js
🏰
探险地牢
连线配对小游戏，越深越难，层数排行榜，Boss战爆装备
dungeon.js
🎲
大富翁地图
三国城市格子，掷骰子走格，触发事件获得金币，升级武将
monopoly.js
❤️
体力系统
上限10点，每10分钟恢复1点，首页实时倒计时显示回满时间
stamina.js
⚡
扫荡系统
三星通关后解锁，每日最多10次，批量扫荡领取积分奖励
map.js
🏆
双榜排行
战力排行榜 + 探险层数榜，所有玩家同台竞技，云端实时更新
leaderboard.js
☁️
云端存档
Supabase数据库，多设备同步，时间戳策略确保进度不丢失
auth.js
05 / 13
技术架构

游戏是怎么搭起来的？🔧

用户
手机浏览器 桌面浏览器 微信内置浏览器
↓
界面层
HTML5 + CSS3 响应式设计 CSS动画 clamp()适配
↓
逻辑层
ES模块 state.js 状态管理 battle / gacha / dungeon localStorage 本地存档
↓
数据层
Supabase REST API 云端存档 排行榜 时间戳同步策略
↓
部署
GitHub 仓库 Docker + Nginx Zeabur 云平台 Webhook 自动部署 Claude Code AI
零框架 · 零构建工具 · 纯原生 Web · 25+ 个 JS 模块
06 / 13
AI的力量

没有AI，
这一切都不会发生

我不懂 JavaScript，不懂服务器，不懂数据库。但我知道我想要什么体验。AI把我用中文描述的想法，一行一行变成可以运行的代码。

「我负责想象，AI负责实现，而理解它们之间的桥梁，是我自己建的」
🤖
Claude Code（主力工具）
全程AI辅助——写代码、修Bug、设计架构、解释报错、优化UI
代码生成调试诊断架构设计中文理解多轮对话
🧠
Claude Sonnet 4.6 模型
理解我对功能体验的描述，转化为可运行的模块化代码
需求转化ES模块设计CSS动画
🗄️
Supabase（云数据库）
存储玩家数据和排行榜，AI帮我设计了同步策略和API调用
REST API云存档排行榜
🚀
GitHub + Zeabur（自动部署）
代码一推送，5分钟内网站自动更新。AI帮我写了 Dockerfile 和 nginx 配置
DockerNginxWebhookCI/CD
07 / 13
真实踩坑

当然，我遇到了好多崩溃的时刻… 😭

01
🚀 部署失败！朋友打开全是404
nginx配置监听了8080端口，但Zeabur期望的端口不对，网站完全打不开。把链接发给同学，他们全说"你的网站坏了"
→ 修改 nginx.conf 端口配置
02
📱 手机上页面全乱了
电脑上好好的，在手机里内容全被截断。微信浏览器更奇怪，底部导航被遮住，顶部被刘海挡住
→ 响应式CSS + safe-area-inset适配
03
🗄️ 想加数据库字段，权限不够
探险排行榜想加"达成时间"字段，用SQL执行后全是权限报错。发现anon key根本没有DDL权限，白忙一场
→ 改从 game_data JSON 字段读取
04
💾 刷新一次，进度全消失了
云端同步逻辑写反了，每次刷新都从云端拉旧数据覆盖本地。打了两小时的关卡进度，刷新一下全没了。这是最崩溃的一次
→ 时间戳比较，本地优先策略
05
⏱️ 体力回满时间显示乱码
访问静态类属性时返回undefined，导致计算出一个几百万分钟的奇怪时间。找了很久才发现是JavaScript静态字段的兼容问题
→ 改用本地 const REGEN_MS
06
🎴 新做的抽卡动画，网页没有变
代码明明改好了，push到GitHub了，但打开网页还是旧版本。盯着屏幕研究了半小时，才发现是Zeabur没有重新触发部署
→ 空commit触发webhook重部署
08 / 13
心路历程

那些开心和崩溃的时刻 💭

✨ 最开心的时刻
🎉
第一次打开网页，看到自己做的界面
当时感觉自己像个超级程序员。虽然只是一个空框架，但那是我做的！立刻截图发给爸妈
⚔️
第一场对战终于能打起来了
武将出招，血条扣减，胜利动画出现。我反复点了十几次，每次都觉得不可思议
🏆
朋友在排行榜上打败了我
自己做的游戏，被朋友认真玩，认真竞争——这是整个项目最有成就感的一刻
🎴
抽卡动画加上粒子特效那一刻
金色粒子飞出来，卡牌翻转，感觉瞬间从"学生作品"升级成了"真正的游戏"
😤 最崩溃的时刻
😭
努力了半天，刷新后全没了
存档同步逻辑写错，两小时的关卡进度全部清零。差点真的想放弃这个项目
🤯
代码改好了，网页没有变化
盯着屏幕半小时，怀疑自己是不是眼花，后来才知道是部署没触发。那种无力感很真实
😤
第一次看到满屏的报错信息
全是英文，红色的字，根本看不懂。后来学会了：直接把错误复制给AI，它会解释
🌙
调了很久一个bug，发现是粗心打错字
一个变量名多了个空格，调试了一个多小时。这让我学会了：认真看每一个细节
09 / 13
成果数字

最终我做出了什么？📊

🎮
12
个历史关卡
三种难度档次
⚔️
36
位三国武将
各有专属属性数值
📝
100+
道三国历史题目
边玩边学
📁
25+
个 JS 模块
功能清晰分离
🔧
39
次 git commit
记录每一步成长
🌐
1
个真正上线的游戏
全球可访问
10 / 13
收获满满

这次做游戏，我学到了什么？🎓

🏗️
软件架构怎么形成的
大功能拆成小模块，每个文件只做一件事。state.js、battle.js、gacha.js……改一处不影响其他
🤖
如何和AI有效沟通
描述"我想要玩家感觉爽"比"加个动画"更有效。AI需要的是体验描述，不是技术指令
🔍
调试的思维方式
报错不是终点，是线索。把错误信息丢给AI，分析原因，一步步缩小范围，问题总能解决
☁️
真实的云端部署流程
Docker、Nginx、GitHub Webhook……这些词从完全陌生到"哦就是这样"，没想到12岁就用上了
💾
数据同步没那么简单
本地存档 vs 云端存档，谁权威？时间戳、合并策略、本地优先……游戏存档背后有很多学问
🎯
完成比完美更重要
先做出来，再慢慢改好。第一版很丑没关系——它能运行，就是成功。完美是完成的敌人
11 / 13
我的感悟

AI不是在帮我「作弊」，
它是帮我把想象力变成现实的工具

以前我觉得编程是"天才"才能做的事。 但现在我知道——只要你有想法，有好奇心，知道自己想要什么体验， 借助AI，12岁也可以做出一个真正能玩的游戏。

这不是终点。我已经想好了下一个版本要加什么 😏

🎮 游戏开发 🤖 AI协作 ☁️ 云端部署 📚 历史学习 🔧 软件架构 💪 坚持不放弃 ✨ 想象力无边界
12 / 13
⚔️

三国志探险
正式上线

从一个疯狂的想法，到 39 次 commit，到真正上线的游戏。
一个12岁的孩子，用AI工具，独立完成。

🎮 立即体验游戏 📦 查看源代码
13 / 13