我这一生如履薄冰,如何才能走到对岸呢? pathfinding路径规划算法可以帮到你

效果图

BestFirstFinder

JumpPointFinder

支持跳跃

写在前面

最近突然有了兴趣研究路径规划算法,在网上找到了pathFinding路径规划算法库,用法也非常简单拿出来分享下,在此基础上改造可以实现简单的船舶避障,贪吃蛇简单的路径规划等等

git地址 www.npmjs.com/package/pat...

看这个文章前要知道的

  • svg基础,会使用svg的path标签绘制路径
  • 了解vue3语法

首先会绘制二维数组

js 复制代码
const boxs = ref(Array.from({ length: 10 }, () => new Array(10).fill(0)))

然后渲染,结果就是这样从0-0到9-9,因为PF也是基于二维数组

PF算法的核心要点

  • 需要起点和重点目标
  • 设置障碍物,也就是需要绕过的地方

设置起点坐标,我这块处理的时候按照坐标点显示对应的文案

js 复制代码
const START_COORDINATE = [9, 4] // 起点坐标
const END_COORDINAT = [0, 5] // 终点坐标

onBeforeMount(() => {
  // 设置初始起点终点
  const [x1, y1] = START_COORDINATE
  const [x2, y2] = END_COORDINAT
  boxs.value[x1][y1] = -1
  boxs.value[x2][y2] = -2
})

其中 empty表示空也就表示没有障碍物,block表示有障碍物,success表示对的路径我会在这个类名的样式中添加脚印

绘制路径代码

js 复制代码
const drawPath = async () => {
  clearPath()

  // 利用PF实现坐标路径规划
  const Grid = new PF.Grid(10, 10)
  const finder = new PF[unref(way)]()

  boxs.value.forEach((e, i1) => {
    e.forEach((e, i2) => {
      if (e === 1) {
        Grid.setWalkableAt(i1, i2)
      }
    })
  })

  const path = finder.findPath(
    START_COORDINATE[0],
    START_COORDINATE[1],
    END_COORDINAT[0],
    END_COORDINAT[1],
    Grid
  )
  if (path.length === 0) {
    ElMessage.warning("走不到对岸了")
    return
  }

// 坐标系转换
  const pathString = path
    .map((e) => `${e[1] * 50 + 25},${e[0] * 50 + 25}`)
    .join("L")

  svgPath.value = `M${pathString}`

  ElNotification({
    title: "提示",
    message: `【${way.value}】路径规划完成,共计${path.length}步`,
    duration: 0
  })
  for (let i = 0; i < path.length; i++) {
    await new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, 200)
    })
    const [x, y] = path[i]
    boxs.value[x][y] = 2
  }
}

其中注意点就是svg的path绘制路径的时候,path是以屏幕坐标系为起点计算,但是路径给我们的相当于是三角函数坐标系,这里要做转换。

相关推荐
J_Asia1 分钟前
如何exclude不必要的so文件?
前端
一鹿有你们~3 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
Sailing8 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
南雨北斗15 分钟前
Vue3 v-html的用法
前端
爱学习的茄子23 分钟前
Function Call:让AI从文本生成走向智能交互的技术革命
前端·深度学习·openai
aol12124 分钟前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
南雨北斗25 分钟前
vue3 attribute绑定
前端
一枚前端小能手25 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖28 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper29 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试