学数学时，我经常遇到一种情况：定义里的每个字都认识，放在一起却很难形成直觉。
什么是连通？绕着一个洞走一圈，和原地不动有什么区别？为什么看起来相似的两条路径，在数学上会有不同的性质？
这些问题可以用公式表达，也可以画图解释。我想再尝试一种方式：让人进入一个空间，走一走、转一转、操作机关，再理解背后的数学。
于是，我做了 Math Valley · 数学漫游。
图 1：数学漫游实机画面。左侧是可以探索的三维建筑，右侧手札呈现目标、操作与原理入口。
这是一个通过立体空间解谜学习数学的网页游戏。玩家可以旋转视角、探索多层建筑、构造数学对象，并在部分关卡中提交解题证据。
在线体验：math-valley.vercel.app
源码仓库：MartinDelophy/math-valley
一、从数学知识目录，到可以探索的空间
项目最初的想法很简单：整理数学的大类和小类，让自己知道不同分支之间有什么关系，再沿着目录继续学习。
目录帮助我找到方向。接下来，我想让其中一些抽象概念变得可以观察、可以操作。
因此，项目逐渐发展成了一个交互式实验：把数学结构变成场景，把数学约束变成操作规则，让玩家通过行动接触概念。
当前内容面向已有一定大学数学基础的学习者，包含序章和两个正式章节：
| 内容 | 主题 |
|---|---|
| 序章：方向与旋转 | 熟悉视角切换与空间操作 |
| 第一章：桥与连通，共 16 关 | 生成树、不交路径、割、流与残量网络等 |
| 第二章：回环之塔，共 12 关 | 绕数、逆路径、同伦、有限覆盖与万有覆盖等 |
二、把数学概念转化为游戏规则
制作这类游戏，首先需要回答：玩家做什么动作，才能接触到这个概念的关键性质？
以图论为例，建筑中的平台和通路，很容易让人联想到节点与边。但只有视觉映射，还不足以支撑数学玩法。
还需要加入约束：哪些连接必须保留，哪些路径不能相交，怎样满足连通要求，以及如何给出有效证据。
这样，玩家既要探索路线，也要思考构造是否满足条件。
拓扑章节则围绕路径展开。
在有洞的空间里，起点和终点并不能完整描述一次行走。路径绕过什么、以什么顺序经过回环，都可能影响结果。
项目使用月井环塔、双井叠庭和螺旋高塔三类场景，承载不同的路径问题。开头截图展示的就是螺旋高塔：环绕运动与层数变化被放在同一个空间里，帮助玩家观察路径和绕数之间的联系。
这里需要保持一个边界：空间直觉帮助理解，严格的规则与证明负责确认结论。
三、技术实现：React + Three.js + Vite
项目使用 React 构建界面，Three.js 呈现三维场景，Vite 负责开发与构建。
主要代码组织如下：
src/
├── chapter/ 图论章节与共享三维舞台
├── topology/ 拓扑关卡、数学规则与几何
└── i18n/ 多语言文本与运行逻辑
tests/ 数学、翻译、界面与打包检查
docs/ 截图与开发说明
在实现中，数学规则与视觉表现各自承担明确职责。
场景让结构可见，让操作有反馈；规则判断操作和解题证据是否有效。这样也便于针对数学逻辑进行检查。
当前测试覆盖关卡可解性、图论与拓扑规则、覆盖置换、证明约束，以及多语言和静态打包等内容。
对于数学游戏，除了画面与交互体验，还必须检查关卡表达的数学规则是否可靠。
四、多语言需要覆盖完整的解题过程
目前项目支持简体中文、英文、日文和韩文，可以在旅途菜单中切换。
图 2：书页式旅途菜单，集成章节入口、提示、视角操作和四种语言选项。
数学游戏的翻译涉及目标、提示、原理说明和操作反馈。如果这些内容表达不一致，玩家可能会把语言问题误认为数学问题。
因此，多语言需要覆盖完整的解题过程。切换语言时，项目会保留正在进行的解题状态，方便对照阅读。
完成记录和上次选择的关卡保存在浏览器本地。当前版本无需登录或后端服务即可体验；整页刷新后，会重新开始当前关卡。
五、如何在本地运行
如果你想研究实现，或者修改关卡，可以直接克隆仓库：
git clone https://github.com/MartinDelophy/math-valley.git
cd math-valley
npm ci
npm run dev -- --host 127.0.0.1
运行环境需要 Node.js 20+、npm 和支持 WebGL 的浏览器。启动后，访问终端显示的网址即可。
构建与测试：
npm run build
npm test
当前线上版本部署在 Vercel，仓库也保留了 Netlify 部署配置。生产构建发布目录为 dist/client，具体配置可以查看仓库中的部署说明。
六、接下来还想探索什么
数学漫游目前是一个可玩的原型，美术细节和关卡难度还需要继续打磨。
我想继续探索的问题包括：哪些数学概念适合空间交互，哪些适合构造任务，以及怎样设计提示，帮助玩家自己发现规律。
如果你对数学可视化、Three.js 或交互式学习感兴趣，欢迎先体验，再到仓库看看实现：
- 在线试玩数学漫游：体验旋转建筑与路径解谜。
- 查看 GitHub 源码：研究实现，或在本地运行。
- 提交问题与建议：告诉我卡在哪一关，或者哪个数学概念值得加入。
如果这个方向对你有启发，也欢迎给仓库一个 Star，关注后续更新。
