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

完整代码：

    
    
    


    单击灰色格子将其设置为障碍( 黑色 )，单击障碍清空障碍
    

    开始寻路
    生成环状障碍
    生成点状障碍

广度优先搜索算法求解最短路径的过程就是在构筑一棵多叉树，当找到表示目标节点的叶子节点时，显而易见该叶子节点到根节点( 开始节点 )的高度即是路径的长度，所以哪个叶子节点最先被发现是目标节点，显然该节点距离根节点的高度肯定是最短的，因为最先结束嘛，但是这也是广度优先搜索算法的局限性，就是要求任意两个连通节点之间的距离相等，如果这里A到B，A到C，B到D，C到F等的距离不是相等的，显然算法执行过程中最先搜到目标节点距离根节点的距离不一定是最短的，所以需要改进一下该算法，怎么改进呢？其实大名鼎鼎的 Dijkstra  迪杰斯特拉算法就是改进的广度优先搜索算法，不过迪杰斯特拉算法不是那么显而易见，即不是显而易见的傻瓜式的就能想到的，需要思考一下逻辑。其实我们可以换一种思维，在n*m网格中做文章，比如网格中的一个 code = "3_4"的格子（ 即第3行第4列的格子 ），其距离为5 ，我们可以把它拆分成5个虚拟格子，code 分别为 "3_4_1"、 "3_4_2"、 "3_4_3"、 "3_4_4"、 "3_4_5"，正常的一个格子，不考虑障碍物、边界、已经走完的格子，是有4个可达格子的，分别是其上、右、下、左边的格子，对于虚拟出的格子，它的可达格子只能是下一个虚拟格子( 当然对于最尾部的虚拟格子，它的可达格子和正常的格子是一样的，都是上右下左 )，如图：

a为起点，k为终点，f格子的距离为5，其余格子的距离都为1，带了虚拟格子的搜索树长如下这样：