使用 javascript 在 n*m 网格中演示 BFS 广度优先搜索算法在带权重图中求最短路径

普通的广度优先最短路径搜索算法只能解决无权重的图：

求出的最短路径没问题，但是如果上边的空缺格子的距离为100呢？这种方式搜出的最短路径可能就是错的：

我们可以找一个距离1作为基本距离，然后距离为100的格子在搜索时构筑搜索树结构时可以当成100个虚拟格子来处理，比如该格子本来的code为 xxx,则这100个格子的code分别为code1、code2、code3、...、code99、code100,其中code1~code99的可达格子只能是它的下一个虚拟格子:

如上图，f点的距离为5，则在搜索树上f这个物理节点体现为f1、f2、f3、f4、f5 五个逻辑节点，在算法处理上f1、f2、f3、f4、f5和其他节点，比如a、e、b没有任何区别，只是在n*m网格中不体现出来

最尾部的code100的可达格子和正常格子是一样的，不考虑障碍物、超越边界和已经走过的格子的话，分别是其上边、右边、下边、左边的格子( 正常格子或者虚拟格子链表的第一个虚拟格子 )，这样的话这个问题就迎刃而解了，改进后的BFS完整代码如下：

    
    
    


单击灰色格子将其设置为障碍( 黑色 )，单击障碍清空障碍,双击格子修改格子的距离

开始寻路
生成环状障碍
生成点状障碍
清空路线
生成随机距离

改进后的算法在带权图中求出的最短路径：