魏 蜀 吴
三国志探险
让历史知识好玩起来
我自己一个人做的手机游戏，把三国历史塞进去了
答题  ·  抽卡  ·  大富翁  ·  探险  ·  擂台
H5 手游 自己一个人做的 AI 帮了我很多 Claude Code
我的第一个游戏  ·  2026
起点

我为什么
要做这个游戏？

01
我最近特别迷三国
刘备、曹操、诸葛亮……这些人太有意思了！越读越上头，就想让朋友也了解
02
但大家都嫌太难记了
人名一堆、战役一堆，光靠看书枯燥，没有同学愿意主动去学
03
那我把它做成游戏不就行了！
答题能得奖励、打仗能用武将，玩着玩着就把三国记住了
「我想把我喜欢的东西
做成游戏
和朋友一起玩」
这就是最开始的想法，很简单
让三国从「要我背」变成「我想玩」
核心思想

三国知识 × 游戏性 = 三国志探险

📚
三国知识
200+ 历史人物
数十场关键战役
典故策略文化
×
🎮
游戏性
主动参与感
收集与成长系统
社交竞争排名
=
⚔️
三国志探险
玩着玩着就记住了
朋友间互相讨论
学习变成享受
🎯 知识嵌入游戏机制，而非附加其上
🔄 每次操作都在「用」知识，不是「背」知识
🌐 降低门槛，H5 即开即玩，朋友拉朋友
整体框架

六大模块
构成完整游戏循环

六个玩法模块环环相扣
每一步操作都与其他模块产生连接
⚔️ 闯关
→ 答题积分
📜 答题
→ 抽卡积分
🗺️ 探险
→ 金币 + 抽卡积分
🎲 大富翁
→ 金币
↓
↓
💎
抽卡积分
用于抽取武将
🪙
金币
用于升级武将
↓
↓
✨ 抽卡
→ 获得武将/碎片
👥 升级武将
金币 + 碎片
↓
⚡ 武将战力↑ 闯关 / 探险更轻松
↓
⚔️ 玩家PK → 🏆 排行榜巅峰
📜
答题闯关
300题 · 20章
✨
武将抽卡
36将 · 保底30抽
🎲
三国大富翁
66格 · 三方争霸
⚔️
地下城探险
6×6 Roguelike
🏆
武将擂台
PvP · 全服排名
🗺️
关卡地图
12关 · 三档难度
武将系统

36位英雄
是知识的载体

每位武将都是一段历史——立绘、台词、属性、事件
抽卡的同时，也在了解这个人物
★★★
传说 · 7人 曹操、诸葛亮、关羽、刘备…
保底30抽
★★
稀有 · 15人 张辽、周瑜、黄忠、陆逊…
保底10抽
★
普通 · 14人 荀彧、鲁肃、魏延…
🔼 升级系统：Lv1→5，消耗金币 + 武将碎片
传说 Lv5：1200金币 + 40碎片，战力提升约 80%
初始赠送：刘备 · 关羽 · 张飞（Lv1）
★★★
诸葛亮
★★★
曹操
★★★
关羽
★★★
周瑜
★★★
赵云
★★★
吕布
★★★
司马懿
答题系统

知识问答
是游戏的灵魂

三国知识分 20 章、300 题
按《三国演义》章节顺序编排
答题获得抽卡积分，推动整个游戏循环
📚
300题
20章
⏱️
15秒
每题限时
💎
首次翻倍
全对×2
💡 答题后展示详细历史解析
每道错题都是一次记忆强化
章节解锁：前章 60% 正确率才能开启下一章
答题闯关界面
大富翁 × 探险

两大深度玩法
带来持续乐趣

🎲 三国大富翁
掷骰子移动 · 答题占城 · 征兵攻城 · 收税赚钱
金币可升级武将，小投入博大收获
智慧与运气并重，魏蜀吴三方争霸
⚔️ 地下城探险（Roguelike）
选武将进入 6×6 格子，每步皆是未知
战斗 · 答题 · buff叠加 · debuff减益，打败关底 Boss 进入下一关
赢得金币与抽卡积分 · 越深越难 · 挑战极限层数
🌟 大富翁积分排行榜
🗺️ 探险最深楼层排行
🎲 三国大富翁
三国大富翁游戏界面
⚔️ 乱世探险
乱世探险游戏界面
武将擂台

以武会友
争霸全服排名

选出最强三人阵容上架擂台
系统自动与其他玩家队伍对战
战力排行实时更新，全服竞争
⚔️ 战斗系统设计
💪 战力 = 武力 + 智力 + 魅力 + 稀有度加成 + 等级加成
🎯 回合制 3v3，暴击 / 闪避 / 计谋伤害随机触发
📊 胜负记录云端同步，战报可回看
⚔️
战力榜
队伍总战力
🗺️
探险榜
最深楼层
🎲
大富翁榜
最高积分
曹操
魏 · 传说
曹操
司马懿
魏 · 传说
司马懿
吕布
群 · 传说
吕布
VS
诸葛亮
蜀 · 传说
诸葛亮
关羽
蜀 · 传说
关羽
周瑜
吴 · 传说
周瑜
制作流程

从一个想法到完整游戏

💡
STEP 1 · 策划
明确目标玩家群体
设计六大玩法模块
规划三种货币循环
拆解数据结构需求
🤖
STEP 2 · 开发
Claude Code 辅助编码
逐模块迭代上线
纯原生 JS，零框架
约 9500 行代码
🎨
STEP 3 · 美术
AI 绘图生成全部资源
36张武将立绘
13张历史场景图
统一风格压缩 webp
🚀
STEP 4 · 上线
Supabase 接入云端
Zeabur 一键部署
GitHub 自动 CI/CD
推送即上线
🛠️ 使用到的工具
🤖
Claude Code
AI 编程 CLI
🎨
AI 绘图
全部美术资源
🌐
原生 Web
HTML/CSS/JS
⚡
Supabase
云端数据库
🚀
Zeabur
一键部署
🐙
GitHub
版本管理 CI/CD
~9500
行代码
0
框架依赖
16
个 JS 模块
Claude Code × 开发

AI 如何真正
参与到开发中？

不是"让 AI 帮我写代码"
而是把 AI 当成一个随时在线的协作伙伴
从设计、编码、调试到重构，全程介入
💬
用自然语言描述需求
「帮我做一个大富翁，棋盘要有魏蜀吴三个势力，玩家答题才能占城」→ Claude 给出方案并实现
🔄
快速迭代，边玩边改
发现问题直接描述 → Claude 定位并修复 → 再次测试，一个功能通常几轮对话就成型
🏗️
架构也靠 AI 把关
状态管理混乱时，Claude 建议引入发布订阅模式 → 重构 gameState 解决所有模块同步问题
⚡
我专注于「想清楚」
游戏设计决策由我来，具体实现交给 AI。人机分工清晰，效率大幅提升
📦 模块开发顺序（从核心到外围）
1
状态管理 gameState · localStorage
2
武将数据 + 抽卡系统
3
答题系统 + 300题录入
4
回合制战斗 + 关卡地图
5
大富翁 (66格 + AI对手)
6
Roguelike 探险地牢
7
Supabase 云端 + 排行榜
8
成就系统 (63个) + 签到
美术资源生产

全部图片由 AI 生成

🎨 36张武将立绘（cardart）— 现代二次元游戏风格，每位武将独立生成，统一古风配色
🏔️ 13张历史场景图（scenes）— 写实暗色油画风，赤壁、官渡、三顾茅庐等标志性场景
🎭 36张 Q版头像（characters）— chibi 贴纸风格，用于用户头像选择
🗺️ 背景 + 入口图（8张入口 + 6张背景）— 史诗战场、抽卡传送门、大富翁地图等
📦 全部转换为 webp 格式压缩，保证移动端加载速度
云端架构

Supabase + Zeabur

🗄️ Supabase 数据库表设计
sanguo_users
用户名 · 密码哈希
昵称 · 头像 · 登录时间
sanguo_saves
完整存档 JSON
战力快照 · 更新时间
sanguo_leaderboard
战力 · 卡数 · 胜场
探险楼层 · 大富翁分
sanguo_arena
擂台队伍配置
战斗日志记录
🚀 部署流程
本地开发
→
git push
→
GitHub
→
Zeabur 自动部署
→
✅ 上线
全程无需手动操作服务器，push 代码即完成发布
技术挑战与解决方案

踩过的坑，学到的东西

🗄️
无框架状态管理
挑战：模块间数据同步混乱，各处重复读写 localStorage
→ 设计统一的 gameState 对象 + 发布订阅
→ 所有模块通过事件通信，状态单一来源
☁️
云存档冲突
挑战：多设备登录时本地与云端存档互相覆盖
→ 基于 updated_at 时间戳 判断新旧
→ 云端更新才覆盖本地，否则上传云端
🎲
大富翁路径分叉
挑战：66格棋盘有4个分叉口，图结构路径计算复杂
→ 每格存储 next[]数组，分叉口随机选路
→ AI 玩家用贪心算法评估城市价值
⚖️
战力数值平衡
挑战：武将等级差异过大导致低分段玩家体验极差
→ 传说仅比普通强 35%，等级最多提升 80%
→ 战力公式统一整数运算，避免数值膨胀
📱
移动端适配
挑战：iOS 底栏遮挡、安全区不一致、键盘弹出布局错乱
→ 用 safe-area-inset + dvh 动态视口单位
→ Tab 栏自身吸收底部安全区，不依赖 body padding
🔒
无后端的安全鉴权
挑战：纯前端项目，密码不能明文存，也没有服务端可用
→ 纯 JS 实现 MurmurHash 加盐哈希
→ Supabase Row Level Policy 限制数据访问权限
魏 蜀 吴
三国志探险
让历史知识好玩起来
学习是内核，游戏是载体
用游戏化的方式，让三国走进更多人的生活
36
位武将
300
道题目
6
大玩法
63
个成就
0
个框架依赖
📱
扫码体验
sanguogame.zeabur.app · 2026