寻路算法可视化 - BFS/DFS/A*网格动画
在网格上设置起点/终点和障碍,动态演示广度优先、深度优先、A*等搜索过程。
UD5工具箱
DFS(Depth-First Search)是一种图遍历算法,它沿着一条路径尽可能深入探索,直到无法继续后再回溯。在迷宫求解中,DFS使用栈来存储待探索节点,每次都深入最新发现的路径。DFS不保证找到最短路径,但通常能快速找到一条可行路径。其时间复杂度为O(V+E),空间复杂度为O(V)。
BFS(Breadth-First Search)是一种逐层扩展的图遍历算法。它从起点开始,先探索所有距离为1的节点,再探索距离为2的节点,依此类推。BFS使用队列来管理探索顺序。在无权图中,BFS保证找到最短路径(经过最少步数的路径)。时间复杂度同样为O(V+E)。
数据结构不同:DFS使用栈(后进先出),BFS使用队列(先进先出)。
探索方式不同:DFS深入探索单一路径,BFS逐层均匀扩展。
路径结果不同:BFS保证最短路径(无权图),DFS不保证。
内存使用:DFS通常在深图中小,BFS在宽图中可能消耗更多内存。
在本工具中,您可以分别运行两种算法,直观对比它们的探索模式差异。
本工具使用递归回溯算法(Recursive Backtracking)生成迷宫。该算法从一个单元格开始,随机选择一个未访问的相邻单元格,打通它们之间的墙壁,然后递归访问新单元格。当所有相邻单元格都被访问后回溯。这样生成的迷宫保证所有单元格连通,且从起点到终点一定存在路径。
点击"设起点"按钮进入起点设置模式(按钮会高亮),然后在迷宫画布上点击通路位置即可设置新起点。同样,点击"设终点"按钮后点击画布设置终点。设置完成后,求解算法将从自定义的起点搜索到终点。注意:起点和终点不能设置在墙壁上。
使用控制面板中的速度滑块即可调节动画播放速度。范围从5ms/步(极快)到200ms/步(慢速)。默认速度为30ms/步,适合观察搜索过程。较慢的速度有助于理解算法每一步的决策逻辑,特别是在教学场景中。
BFS按层扩展,当它第一次到达终点时,经过的层数就是最短距离。而DFS会深入探索一条路径,可能绕很远才找到终点,因此路径长度通常更长。在本工具中对比两种算法的路径长度统计,可以清晰看到这一差异。这也是为什么在需要最短路径的场景(如导航)中通常使用BFS或其变体。
本工具完全响应式设计,支持桌面端、平板和手机。在移动端,控制面板会自动移至画布上方,按钮和滑块针对触摸操作优化。建议在较小屏幕上选择10×10或15×15的迷宫以获得最佳体验。画布支持触摸点击来设置起终点。
在网格上设置起点/终点和障碍,动态演示广度优先、深度优先、A*等搜索过程。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
点击某个格子会反转自身和十字范围内所有格子的灯,目标点亮全部或熄灭全部。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
创建一份让参与者寻找的物品或地标清单,可分享或打印。
输入一组单词,自动生成网格字母谜题,可调整网格大小和方向,导出打印。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
自定义原生 <dialog> 元素的样式、动画和遮罩效果,一键复制生成语义化且无障碍的模态框代码。
随机可视化Skip List的层级结构和快速查找过程,对比链表效率。
拖拽与门、或门、非门等构建组合逻辑电路,输入高/低电平观察输出。
在二维函数曲面上动态展示梯度下降算法的迭代过程,可调节学习率和初始点。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。
构建 Promise 链并显示每个 then/catch 的执行时间与状态,帮助理解微任务调度。
输入开发者名单,依规则随机组成搭档,尽量不重复近期配对。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
在绘图板画几条直线,算法自动利用霍夫变换检测并高亮出这些线段。
上传文件或粘贴十六进制头部,根据魔数识别真实文件格式,无视扩展名伪装。
勾选需要展示的选项(接受/拒绝/设置),生成纯净HTML/JS代码,自行套用样式。
输入URL模式字符串(通配符、命名组)和测试URL,验证是否匹配并提取参数。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
以自然语言描述想要的表情或符号(如“微笑”、“箭头”),在Unicode库中匹配。
将任务拖入紧急/重要的四象限中,可视化管理和优先处理待办事项。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
用Canvas绘制经典的洛伦兹吸引子轨迹,可拖拽旋转视角展示蝴蝶形奇怪吸引子。