深入理解js A*寻路算法原理与具体实现过程


Posted in Javascript onDecember 13, 2018

本文实例讲述了js A*寻路算法原理与具体实现过程。分享给大家供大家参考,具体如下:

这两天研究了下 A* 寻路算法, 主要学习了这篇文章, 但这篇翻译得不是很好, 我花了很久才看明白文章中的各种指代. 特写此篇博客用来总结, 并写了寻路算法的代码, 觉得有用的同学可以看看. 另外因为图片制作起来比较麻烦, 所以我用的是原文里的图片.

当然寻路算法不止 A* 这一种, 还有递归, 非递归, 广度优先, 深度优先, 使用堆栈等等, 有兴趣的可以研究研究~~

简易地图

深入理解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( 目标格已经在 "开启列表", 这时候路径被找到)

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

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

主要代码

程序中的 "开启列表" 和 "关闭列表"

List<Point> CloseList;
List<Point> OpenList;

Point 类

public class Point
{
  public Point ParentPoint { get; set; }
  public int F { get; set; } //F=G+H
  public int G { get; set; }
  public int H { get; set; }
  public int X { get; set; }
  public int Y { get; set; }
  public Point(int x, int y)
  {
    this.X = x;
    this.Y = y;
  }
  public void CalcF()
  {
    this.F = this.G + this.H;
  }
}

寻路过程

public Point FindPath(Point start, Point end, bool IsIgnoreCorner)
{
  OpenList.Add(start);
  while (OpenList.Count != 0)
  {
    //找出F值最小的点
    var tempStart = OpenList.MinPoint();
    OpenList.RemoveAt(0);
    CloseList.Add(tempStart);
    //找出它相邻的点
    var surroundPoints = SurrroundPoints(tempStart, IsIgnoreCorner);
    foreach (Point point in surroundPoints)
    {
      if (OpenList.Exists(point))
        //计算G值, 如果比原来的大, 就什么都不做, 否则设置它的父节点为当前点,并更新G和F
        FoundPoint(tempStart, point);
      else
        //如果它们不在开始列表里, 就加入, 并设置父节点,并计算GHF
        NotFoundPoint(tempStart, end, point);
    }
    if (OpenList.Get(end) != null)
      return OpenList.Get(end);
  }
  return OpenList.Get(end);
}

完整实例代码点击此处本站下载

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

Javascript 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
js中getter和setter用法实例分析
Aug 14 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 #Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 #Javascript
js实现黑白div块画空心的图形
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 #Javascript
You might like
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
授权委托书格式范文
2014/08/02 职场文书
好媳妇事迹材料
2014/12/24 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
上学路上观后感
2015/06/16 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
用CSS3画一个爱心
2021/04/27 HTML / CSS
Docker下安装Oracle19c
2022/04/13 Servers