最近有打算写个迷宫玩玩,无意中发下了这个库,很强大!又是开源在github的,并且有一个相当酷的demo。这个库不仅支持浏览器端的运行,而且可以运行在node.js上。怎么用到服务器上这里就不涉及了,主要还是翻译一下官方的demo。

一、基本应用

  首先我们要定义一个二维的图

var grid = new PF.Grid(width, height); //这里的两个参数定义了图的长和宽

然后我们可以设置这个图中一些不能走的节点,用setWalkableAt函数

grid.setWalkableAt(0, 1, false);

这段代码的意思是设置(0,1)这个点不能走。

当然这样的话如果图非常大,不能走的点很多就很复杂了,不过还有一种方法可以让我们直接用矩阵定义图,用0,1表示能否到达

 var matrix = [
[0, 0, 0, 1, 0],
[1, 0, 0, 0, 1],
[0, 0, 1, 0, 0],
];
var grid = new PF.Grid(5, 3, matrix);

图建好了之后我们就可以开始最激动人心的地方了,那就是这个库为我们提供的九种寻路函数。要知道这个要是自己实现还是有不少的困难的。这九中算法分别是:

  • AStarFinder *
  • BreadthFirstFinder *
  • BestFirstFinder
  • DijkstraFinder *
  • BiAStarFinder
  • BiBestFirstFinder
  • BiDijkstraFinder *
  • BiBreadthFirstFinder *
  • JumpPointFinder *

这九个函数中尾部加了星号的是保证能找到最短路的,从第五个开始四个前缀bi的则是双向搜索的意思。

要使用这些函数需要首先建立一个查找的对象,一第一种查找为例:

var finder = new PF.AStarFinder();

然后我们用它查找所建立的图上两点的路径:

var path = finder.findPath(1, 2, 4, 2, grid);//表示搜索(1,2)到(4,2)的最短路,运行后path=[ [ 1, 2 ], [ 1, 1 ], [ 2, 1 ], [ 3, 1 ], [ 3, 2 ], [ 4, 2 ] ]

当然它这个算法的实现貌似是直接在原图上操作的,所以各种算法运行后图就变了,所以你要多次应用的话就要先复制一份,就像:

var gridBackup = grid.clone();

二、高级应用

1、你可以设置是否允许走斜线:

var finder = new PF.AStarFinder({
allowDiagonal: true
});

然后再走斜线的基础上,你可以设置是否允许从不能走的方块角上过去:

var finder = new PF.AStarFinder({
allowDiagonal: true,
dontCrossCorners: true
});

2、我们知道很影响寻路算法的速度的就是他们的启发函数,在PathFinding中也允许我们定义自己的启发函数

对于 AStarFinder, BestFirstFinder 以及他们加了 Bi 前缀,我们就可以设置他的启发函数,本身提供了三个备选的

1、PF.Heuristic.manhattan   (默认值)

2、PF.Heuristic.chebyshev

3、PF.Heuristic.euclidean

如果要修改启发函数:

var finder = new PF.AStarFinder({
heuristic: PF.Heuristic.chebyshev
});

或者是定义自己的启发函数

var finder = new PF.BestFirstFinder({
allowDiagonal: true,
heuristic: function(dx, dy) {
return Math.min(dx, dy);
}
});

三、由于返回的路径是路径话说那个的每个点,你也可以只返回那些标志点:

var newPath = PF.Util.smoothenPath(grid, path);

这样如果原来的path是[[0, 1], [0, 2], [0, 3], [0, 4]]那么修改之后就是 [[0, 1], [0, 4]]

这样,有了这个库歇一歇类似寻路的游戏就不用担心算法问题啦(当然你追求速度要自己弄个高档的启发函数就另说啦),实在是很方便啊!

PathFinding.js 寻路类神器的更多相关文章

  1. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  2. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  3. JS常用类

    JS常用类 一.Number 1.常用数字 整数:10 小数:3.14 科学计数法:1e5 | 1e-5 正负无穷:Infinity | -Infinity 2.常用进制 二进制:0b1010 八进制 ...

  4. JS创建类的方法--简单易懂有实例

    版权声明:本文为博主原创文章,转载请注明出处 Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class. ...

  5. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  6. js构建类的方法

    Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...

  7. JS实现 类的 1.判断 2.添加 3.删除 4切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  9. 【原创】JS文件替换神器--Chrome ReRes插件

    本文仅供学习交流使用,如侵立删! JS文件替换神器--Chrome ReRes插件 ReRes插件安装配置 ReRes项目官方地址:https://github.com/annnhan/ReRes 谷 ...

随机推荐

  1. 【架构】linkerd:来自Twitter为微服务而生的开源RPC解决方案

    大家要如何以规模化方式运维微服务应用程序?实践当中会出现哪些问题,我们又该如何加以解决?在大规模与非预测性工作负载场景当中,我们需要满足哪些条件才能运行一款大型微服务应用程序,而又能够确保不必受到功能 ...

  2. ios中的addChildViewController 和 android中的fragment

    刚才突然感觉这2个东西的功能特别像,记录一下,待研究!

  3. google API 点连线

    这个是模拟的数据,用于测试,为了方便学习 弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 setInterval 或者for 以减少冗余. <!DOCTYPE html> < ...

  4. 关于TortoiseSVN的一些知识

    TortoiseSVN的一切命令都是相对于它自己来说的 1.Import,导入,指的是导入SVN的代码库,即Repository. 2.Export,导出,指的是将代码从Repository中导出到你 ...

  5. Divide and conquer:K Best(POJ 3111)

     挑选最美的珠宝 题目大意:挑选k个珠宝使得∑a/∑b最大,输出组合数 最大化平均值的标准题型,二分法就好了,一定要注意范围(10e-7),如果是10e-8就会tle,10e-6就是wa #inclu ...

  6. 最喜欢的VS 键盘快捷键摘抄

    最喜欢的Visual Studio键盘快捷键(关闭)   336年最喜欢的 425年 你最喜欢的Visual Studio键盘快捷键是什么? 我总是让我的手在键盘上,远离鼠标! 一个请每回答. net ...

  7. 【XLL 框架库函数】 Excel/Excel12f

    Excel/Excel12f 这两个库函数分别包装了 C API 中的 Excel4 和 Excel12 函数,它们会检查函数没有参数时是否为零,它将表明创建临时的 XLOPER 或 XLOPER12 ...

  8. IOS- 数据存储

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: 1.NSKeyed ...

  9. Jquery获取select 控件的change事件时选中的值

    HTML代码如下: <div class="col-sm-9 col-xs-12"> <select id="groupid" class=& ...

  10. ios waxpatch lua语法

    Wax Lua 使用方法 说一下 Wax 的特点,它支持你在脚本里使用任何 OC 的类,同样也支持你创建一个类. 使用一个类时你会这样使用: 1 2 NSString -- Returns the N ...