寻路算法可视化：摆墙设障碍，一眼看懂 A* 和 BFS 谁先找到出口

在网格上随手画几堵墙、把起点终点一摆，点「开始寻路」，就能看到 A*、BFS、DFS、Dijkstra 各自怎么一圈圈往外探索，最后哪条才是真正的最短路径。搜索过程一格一格动画展示，访问过多少格、路径多长、花了多少毫秒都实时统计。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它把「寻路算法」变成了一格一格能看懂的动画演示：

四种算法：A*（曼哈顿启发式）、BFS（广度优先）、DFS（深度优先）、Dijkstra（优先队列），切换算法立刻重跑。
摆墙设障：选「墙 / 起点 / 终点 / 擦除」工具后，在网格上点击或拖拽就能画迷宫，拖拽绘制用 pointermove 连续打点。
搜索动画：已访问格随搜索进度逐个点亮（蓝色渐变），最后把最短路径用橙色连出来，一眼分清「探索过」和「最终路径」。
网格可调：网格大小 10–55 档，格子越密越能看出不同算法搜索范围的差别。
随机迷宫 + 重置：一键 🎲 随机迷宫、单独清墙、全部重置，拿来反复对比很方便。
实时统计：访问格数、路径长度、算法耗时；起终点被墙完全隔断时，动画跑完会提示「未找到路径」。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「寻路算法可视化」网页应用：在网格上点击或拖拽放置起点、终点和障碍墙，支持选择 A*、BFS、DFS、Dijkstra 等寻路算法，点击开始后动画展示搜索过程、访问过的格子和最终路径，可调节动画速度和网格大小，支持一键生成随机迷宫和清空重来，界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是把通用 AI 能力复述一遍，而是它在这篇项目里的实际动作：

读取沙箱路径后，在 /workspace/pathfinding-visualizer 下新建项目目录。
发现 PYTHONHOME 指向损坏的 python3.12 会导致端口检测异常，逐层排查后清掉环境变量，用 /usr/bin/python3 检测空闲端口。
写出约 935 行的单文件 index.html，过程中自己也发现一处 <?span> 笔误和一段冗余的 fixLegend，当场 edit 修正并删除。
检测到 3002 端口空闲，nohup python3 -m http.server 3002 --bind 0.0.0.0 起服务，curl 自检返回 HTTP 200，再用 node --check 校验抽取出的 JS 语法通过。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. A* 用曼哈顿距离做启发式

每次弹最小 f 的节点，f = g + h，其中 g 是已走步数，h 是当前点到终点的曼哈顿距离。启发式保证它比纯 BFS 更少地「到处乱摸」：

function manhattan(a,b){ return Math.abs(a.r-b.r)+Math.abs(a.c-b.c); }

const tent = gScore[k] + 1;
if (tent < gScore[nk]) {
  gScore[nk] = tent;
  cameFrom[nk] = {r:cur.r, c:cur.c};
  open.push({r:n.r, c:n.c, f: tent + manhattan(n, end)});
}

2. Dijkstra 用数组 + 线性取最小

这个规模的网格不需要二叉堆，每次遍历 open 数组取最小距离节点即可，代码简单也够快：

let mi = 0;
for (let i = 1; i < open.length; i++) {
  if (open[i].d < open[mi].d) mi = i;
}
const cur = open.splice(mi, 1)[0];

3. BFS 与 DFS 只差一个数据结构

同一个 seen + cameFrom 骨架，BFS 用队列（先来先走，找的是最短路径），DFS 用栈（一路到底，路径往往绕）：

// BFS：队列
const q = [start];
let head = 0;
while (head < q.length) {
  const cur = q[head++];
  // ...
}

// DFS：栈
const stack = [start];
while (stack.length) {
  const cur = stack.pop();
  // ...
}

4. 动画速度用幂函数映射

滑块值 1–100 到延迟毫秒数不是线性映射，而是幂函数：滑块拉满约 1ms 一步，最低约 120ms 一步，慢档和快档都有足够区分度：

function speedToDelay(v) {
  return Math.round(120 * Math.pow(1/120, (v - 1) / 99));
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-pathfinding-visualizer

总结

寻路算法可视化把「算法怎么走」这件事翻译成了可点、可画、可回放的网格动画：A* 的启发式、Dijkstra 的最短距离、BFS/DFS 的队列与栈，四种思路用同一个网格对比，差异一眼可见。技术上主要是 Canvas 网格渲染、pointer 事件画墙、优先队列/队列/栈三种搜索骨架，以及访问序列的异步动画回放。后续还可以加对角线走动、加权地形或多起点对比。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-04 09:05 新科技观察员阅读(2) 评论(0) 收藏举报

刷新页面返回顶部