01 / 03
A*：带启发式的搜索
左边是控制区（选算法、调动画速度、生成随机迷宫），右边是网格。蓝色是算法实际访问过的节点，金色是最终最短路径。A* 用曼哈顿距离估计到终点的代价，所以它不会像 BFS 那样向四周均匀铺开——先朝终点方向探路。同一张迷宫下它只访问了 397 个节点，是四种算法里最省的。
- 交互 —— 拖动起点/终点、按住鼠标左键画墙体
- 统计 —— 访问节点数 / 路径长度 / 求解耗时 / 是否可达
概述 · Overview
零依赖的纯前端工具，用一张 21 × 45 的网格演示 BFS / DFS / Dijkstra / A* 四种经典算法的搜索过程。 四种算法各自独立实现，统一返回 { visitedInOrder, path }，方便直接比较它们的搜索顺序与效率差异。
这一页只放两张图，因为这个工具本身就这么大 —— 它的价值在交互里，不在页面上。
界面 · Screens
02 / 03
同一套网格，四种算法横向对比
这两张跑的是同一张迷宫。因为迷宫用递归回溯生成，本质上是一棵生成树——任意两点之间只有唯一一条通路，所以四种算法求出的路径长度全是 162，差别只落在「访问了多少个节点」上：A* 397、Dijkstra 405、BFS 405、DFS 427。这正是这个工具想让人看到的东西：路径一样长，搜索过程却完全不同。
- 统一接口 —— 四种算法都返回 { visitedInOrder, path }
- 迷宫生成 —— 奇偶网格 + 随机化 DFS 回溯，天然是一棵连通生成树，不会把终点堵死
03 / 03
一点说明：为什么这四个数字放在一起
运行统计里那四个数字（访问节点数、路径长度、求解耗时、是否可达）是四种算法唯一的公共输出， 也是比较它们的唯一公平口径。耗时按毫秒记，小网格上经常是 0 ms —— 想看出差别得把速度拉慢、看访问顺序。
项目信息 · At a Glance
| 项目名称 | PathFinder Lab · 寻路算法可视化实验室 |
|---|---|
| 算法 | BFS｜DFS｜Dijkstra｜A*（曼哈顿距离启发式） |
| 网格 | 21 × 45 = 945 个节点 |
| 同图实测 | 同一张迷宫：A* 访问 397 · Dijkstra 405 · BFS 405 · DFS 427 个节点；四者路径长度均为 162（生成树性质决定路径唯一） |
| 迷宫生成 | 奇偶网格 + 随机化 DFS 回溯（recursive backtracker），保证起点到终点拓扑连通 |
| 技术 | 纯 HTML / CSS / JS · 零依赖 · 单文件 · DOM 节点渲染 + CSS class 切换 + @keyframes 动画 |
| 许可 | MIT |
← 窄屏可左右滑动查看完整表格 →