欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现的A*寻路算法详解

程序员文章站 2022-03-04 13:18:15
本文实例讲述了js实现的a*寻路算法。分享给大家供大家参考,具体如下: 这两天在做百度前端技术学院的题目,其中有涉及到寻路相关的,于是就找来相关博客进行阅读。 看了cr...

本文实例讲述了js实现的a*寻路算法。分享给大家供大家参考,具体如下:

这两天在做百度前端技术学院的题目,其中有涉及到寻路相关的,于是就找来相关博客进行阅读。

看了create chen写的理解a*寻路算法具体过程之后,我很快就理解a*算法的原理。不得不说作者写的很好,通熟易懂,图片也做的很好,可见作者在这上面是花了心思的。如果让我写,我是写不来这么好的。

唯一的不足就是,因为我学的是js,因此最后给我的源码我是用不了的......因此才有自己写一篇的打算,方面学习js人的学习。然而前面的描述我就借用他的了,因为如果然我的表达能力实在是太渣了。

简易地图

JS实现的A*寻路算法详解

如图所示简易地图, 其中绿色方块的是起点 (用 a 表示), 中间蓝色的是障碍物, 红色的方块 (用 b 表示) 是目的地. 为了可以用一个二维数组来表示地图, 我们将地图划分成一个个的小方块.

二维数组在游戏中的应用是很多的, 比如贪吃蛇和俄罗斯方块基本原理就是移动方块而已. 而大型游戏的地图, 则是将各种"地貌"铺在这样的小方块上.

寻路步骤

1. 从起点a开始, 把它作为待处理的方格存入一个"开启列表", 开启列表就是一个等待检查方格的列表.
2. 寻找起点a周围可以到达的方格, 将它们放入"开启列表", 并设置它们的"父方格"为a.
3. 从"开启列表"中删除起点 a, 并将起点 a 加入"关闭列表", "关闭列表"中存放的都是不需要再次检查的方格

JS实现的A*寻路算法详解

图中浅绿色描边的方块表示已经加入 "开启列表" 等待检查. 淡蓝色描边的起点 a 表示已经放入 "关闭列表" , 它不需要再执行检查.

从 "开启列表" 中找出相对最靠谱的方块, 什么是最靠谱? 它们通过公式 f=g+h 来计算.

f = g + h
    g 表示从起点 a 移动到网格上指定方格的移动耗费 (可沿斜方向移动).
    h 表示从指定的方格移动到终点 b 的预计耗费 (h 有很多计算方法, 这里我们设定只可以上下左右移动).

JS实现的A*寻路算法详解

我们假设横向移动一个格子的耗费为10, 为了便于计算, 沿斜方向移动一个格子耗费是14. 为了更直观的展示如何运算 fgh, 图中方块的左上角数字表示 f, 左下角表示 g, 右下角表示 h. 看看是否跟你心里想的结果一样?

从 "开启列表" 中选择 f 值最低的方格 c (绿色起始方块 a 右边的方块), 然后对它进行如下处理:

4. 把它从 "开启列表" 中删除, 并放到 "关闭列表" 中.
5. 检查它所有相邻并且可以到达 (障碍物和 "关闭列表" 的方格都不考虑) 的方格. 如果这些方格还不在 "开启列表" 里的话, 将它们加入 "开启列表", 计算这些方格的 g, h 和 f 值各是多少, 并设置它们的 "父方格" 为 c.
6. 如果某个相邻方格 d 已经在 "开启列表" 里了, 检查如果用新的路径 (就是经过c 的路径) 到达它的话, g值是否会更低一些, 如果新的g值更低, 那就把它的 "父方格" 改为目前选中的方格 c, 然后重新计算它的 f 值和 g 值 (h 值不需要重新计算, 因为对于每个方块, h 值是不变的). 如果新的 g 值比较高, 就说明经过 c 再到达 d 不是一个明智的选择, 因为它需要更远的路, 这时我们什么也不做.

JS实现的A*寻路算法详解

如图, 我们选中了 c 因为它的 f 值最小, 我们把它从 "开启列表" 中删除, 并把它加入 "关闭列表". 它右边上下三个都是墙, 所以不考虑它们. 它左边是起始方块, 已经加入到 "关闭列表" 了, 也不考虑. 所以它周围的候选方块就只剩下 4 个. 让我们来看看 c 下面的那个格子, 它目前的 g 是14, 如果通过 c 到达它的话, g将会是 10 + 10, 这比 14 要大, 因此我们什么也不做.

然后我们继续从 "开启列表" 中找出 f 值最小的, 但我们发现 c 上面的和下面的同时为 54, 这时怎么办呢? 这时随便取哪一个都行, 比如我们选择了 c 下面的那个方块 d.

JS实现的A*寻路算法详解

d 右边已经右上方的都是墙, 所以不考虑, 但为什么右下角的没有被加进 "开启列表" 呢? 因为如果 c 下面的那块也不可以走, 想要到达 c 右下角的方块就需要从 "方块的角" 走了, 在程序中设置是否允许这样走. (图中的示例不允许这样走)

JS实现的A*寻路算法详解

就这样, 我们从 "开启列表" 找出 f 值最小的, 将它从 "开启列表" 中移掉, 添加到 "关闭列表". 再继续找出它周围可以到达的方块, 如此循环下去...

那么什么时候停止呢? —— 当我们发现 "开始列表" 里出现了目标终点方块的时候, 说明路径已经被找到.

如何找回路径

JS实现的A*寻路算法详解

如上图所示, 除了起始方块, 每一个曾经或者现在还在 "开启列表" 里的方块, 它都有一个 "父方块", 通过 "父方块" 可以索引到最初的 "起始方块", 这就是路径.

将整个过程抽象

把起始格添加到 "开启列表"

do
{
       寻找开启列表中f值最低的格子, 我们称它为当前格.
       把它切换到关闭列表.
       对当前格相邻的8格中的每一个
          if (它不可通过 || 已经在 "关闭列表" 中)
          {
                什么也不做.
           }
          if (它不在开启列表中)
          {
                把它添加进 "开启列表", 把当前格作为这一格的父节点, 计算这一格的 fgh
          if (它已经在开启列表中)
          {
                if (用g值为参考检查新的路径是否更好, 更低的g值意味着更好的路径)
                    {
                            把这一格的父节点改成当前格, 并且重新计算这一格的 gf 值.
                    }
} while( 目标格已经在 "开启列表", 这时候路径被找到)

如果开启列表已经空了, 说明路径不存在.

最后从目标格开始, 沿着每一格的父节点移动直到回到起始格, 这就是路径.

js代码:

//其中的map.arr是二维数组
function searchroad(start_x,start_y,end_x,end_y){
  var openlist=[],  //开启列表
    closelist=[],  //关闭列表
    result=[],   //结果数组
    result_index;  //结果数组在开启列表中的序号
  openlist.push({x:start_x,y:start_y,g:0});//把当前点加入到开启列表中,并且g是0
  do{
    var currentpoint = openlist.pop();
    closelist.push(currentpoint);
    var surroundpoint=surroundpoint(currentpoint);
    for(var i in surroundpoint) {
      var item = surroundpoint[i];        //获得周围的八个点
      if (
        item.x>=0 &&              //判断是否在地图上
        item.y>=0 &&
        item.x<map.rows &&
        item.y<map.cols &&
        map.arr[item.x][item.y] != 1 &&     //判断是否是障碍物
        !existlist(item, closelist) &&     //判断是否在关闭列表中
        map.arr[item.x][currentpoint.y]!=1 &&  //判断之间是否有障碍物,如果有障碍物是过不去的
        map.arr[currentpoint.x][item.y]!=1) {
        //g 到父节点的位置
        //如果是上下左右位置的则g等于10,斜对角的就是14
        var g = currentpoint.g + ((currentpoint.x - item.x) * (currentpoint.y - item.y) == 0 ? 10 : 14);
        if (!existlist(item, openlist)) {    //如果不在开启列表中
          //计算h,通过水平和垂直距离进行确定
          item['h'] = math.abs(end_x - item.x) * 10 + math.abs(end_y - item.y) * 10;
          item['g'] = g;
          item['f'] = item.h + item.g;
          item['parent'] = currentpoint;
          openlist.push(item);
        }
        else {                 //存在在开启列表中,比较目前的g值和之前的g的大小
          var index = existlist(item, openlist);
          //如果当前点的g更小
          if (g < openlist[index].g) {
            openlist[index].parent = currentpoint;
            openlist[index].g = g;
            openlist[index].f=g+openlist[index].h;
          }
        }
      }
    }
    //如果开启列表空了,没有通路,结果为空
    if(openlist.length==0) {
      break;
    }
    openlist.sort(sortf);//这一步是为了循环回去的时候,找出 f 值最小的, 将它从 "开启列表" 中移掉
  }while(!(result_index=existlist({x:end_x,y:end_y},openlist)));
  //判断结果列表是否为空
  if(!result_index) {
    result=[];
  }
  else {
    var currentobj=openlist[result_index];
    do{
      //把路劲节点添加到result当中
      result.unshift({
        x:currentobj.x,
        y:currentobj.y
      });
      currentobj=currentobj.parent;
    }while (currentobj.x!=start_x || currentobj.y!=start_y);
  }
  return result;
}
//用f值对数组排序
function sortf(a,b){
  return b.f- a.f;
}
//获取周围八个点的值
function surroundpoint(curpoint){
  var x=curpoint.x,y=curpoint.y;
  return [
    {x:x-1,y:y-1},
    {x:x,y:y-1},
    {x:x+1,y:y-1},
    {x:x+1,y:y},
    {x:x+1,y:y+1},
    {x:x,y:y+1},
    {x:x-1,y:y+1},
    {x:x-1,y:y}
  ]
}
//判断点是否存在在列表中,是的话返回的是序列号
function existlist(point,list) {
  for(var i in list) {
    if(point.x==list[i].x && point.y==list[i].y) {
      return i;
    }
  }
  return false;
}

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结

希望本文所述对大家javascript程序设计有所帮助。