迷宫算法可视化

一个纯前端的迷宫算法演示项目，用 HTML、CSS 和 JavaScript 展示同一座完美迷宫下，不同算法的搜索过程、路径结果和算法讲解。

上图展示了项目的主界面：左侧可以切换 BFS、DFS、A*、右手定则、Trémaux、ACO 和 SMA 等算法；中间区域展示同一座完美迷宫上的搜索动画；右侧同步显示当前算法的原理讲解、参数说明和运行统计。这样可以在不更换迷宫的前提下，对比不同算法的搜索过程和路径表现。

核心规则

• 页面首次加载时生成一座完美迷宫。
• 同一次打开页面时，切换 BFS、DFS、A*、右手定则、Trémaux、ACO、SMA，都使用同一座迷宫。
• 点击“重新生成迷宫”才会在当前页面中换迷宫。
• 刷新浏览器页面后会生成新的迷宫。
• 每个算法都有独立 JS 文件，也有对应中文讲解。

启动方式

项目自带一个简单 Python 静态服务器，固定使用 7777 端口。

python3 server.py

然后在浏览器打开：

http://127.0.0.1:7777/

server.py 会给静态资源加 no-cache 响应头，方便开发时看到最新 JS 和 CSS。

当前功能

• 随机 DFS 生成完美迷宫。
• 标签卡切换算法。
• 统一动画控制：开始、暂停、单步、重置算法、重新生成迷宫。
• 统一统计面板：状态、动画步数、访问节点、路径长度、当前步。
• 每个算法都有中文讲解面板和参数说明。
• CSS 使用版本化文件名：css/style.v1.css。

已实现算法

• BFS：广度优先搜索，保证无权迷宫中的最短路径。
• DFS：深度优先搜索，展示深入和回溯过程。
• A*：启发式搜索，使用曼哈顿距离。
• 右手定则：模拟只靠局部墙面信息的机器人走法。
• Trémaux：通过边标记破解迷宫。
• ACO：蚁群算法教学演示版，用信息素展示概率收敛。
• SMA：黏菌算法教学演示版，用离散格子权重模拟脉管正负反馈。

目录结构

maze-algorithms/
├── index.html
├── server.py
├── README.md
├── prd.md
├── project-tree.md
├── css/
│   └── style.v1.css
├── js/
│   ├── main.js
│   ├── config.js
│   ├── core/
│   ├── algorithms/
│   ├── algorithm-meta/
│   └── ui/
└── assets/
    └── README.md

开发说明

算法文件位于 js/algorithms/。每个算法只接收当前迷宫数据并返回动画步骤，不直接操作 DOM，也不能重新生成迷宫。

讲解文案位于 js/algorithm-meta/。这样可以单独维护算法说明，不影响算法计算逻辑。

页面入口是 js/main.js。它持有当前页面会话中的唯一迷宫 currentMaze，并负责把同一座迷宫交给不同算法求解。

后续可扩展

• 让参数面板支持实时编辑算法参数。
• 增加算法对比模式，同时展示多个算法的路径长度和访问节点数。
• 增加迷宫生成算法标签，例如 Prim、Kruskal。
• 优化 ACO 和 SMA 的离散化模型，让收敛过程更稳定。