A-Star算法穿越迷宫效果代码
代码语言:html
所属分类:其他
代码描述:A-Star算法穿越迷宫效果代码,A*算法,A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法,也是解决许多搜索问题的有效算法。算法中的距离估算值与实际值越接近,最终搜索速度越快。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #222; height: 100vh; display: grid; place-items: center; margin: 0; } [hidden] { display: none; } canvas { display: block; width: var(--size, 90vmin); height: var(--size, 90vmin); margin: 0 auto; } #out { position: fixed; background: rgba(0,0,0, 0.5); color: #fff; top: 0; left: 0; font-family: monospace; } </style> </head> <body> <svg hidden id="wall" width="32" height="32"><path fill="#f52" d="M0 1h21v15H0zM22 1h10v15H22zM0 17h11v15H0zM12 17h20v15H12z"/></svg> <svg hidden id="poo" width="32" height="32"> <path fill="#654" d="M8 30 q-4 0-4-4q0-4 4-4h16q4 0 4 4 q0 4 -4 4z M10 21.5q-3 0-3-3q0 -3 3-3h12q3 0 3 3q0 3-3 3zM12 15q-2 0-2-2q0-2 2-2h8q2 0 2 2 q0 2 -2 2z M16 10.5q-2 0-2-1v-1 q 0 -2 -2 -2 h2 q 4 0 4 2q0 2-2 2z"/> </svg> <canvas role="img" aria-label="It's a shitty maze with walls and piles of poo. There is an algorithm running that finds the path with the lowest cost"></canvas> <div id="out"></div> <script > const EXTRA_COST_POO = 5; console.clear(); const $ = document.querySelector.bind(document); const wallPath = new Path2D($`#wall path`.getAttribute`d`); const pooPath = new Path2D($`#poo path`.getAttribute`d`); const canvas = $`canvas`; const ctx = canvas.getContext`2d`; // manhattan distance function const manhattan = (x, y) => Math.abs(x) + Math.abs(y); let laby, dimX, dimY, ready; function paint(open, closed) { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < laby.length; y++) { for (let x = 0; x < laby[0].length; x++) { if (closed) { const fieldIsClosed = closed.find(n => n.x === x && n.y === y); ctx.fillStyle = "#400"; if (fieldIsClosed) { ctx.fillRect(x * 32, y * 32, 32, 32); } } if (open) { const fieldIsOpen = open.find(n => n.x === x && n.y === y); ctx.fillStyle = "#040"; if (fieldIsOpen) { ctx.fillRect(x * 32, y * 32, 32, 32); } } const symbol = laby[y][x]; if (symbol === -1) { ctx.save(); ctx.translate(x * 32, y * 32); ctx.fillStyle = "#c24"; ctx.fill(wallPath); ctx.restore(); } if (symbol > 0) { ctx.save(); ctx.translate(x * 32, y * 32); ctx.fillStyle = "#654"; ctx.fill(pooPath); ctx.restore(); } } } } function paintPath(path) { if (path && path.length > 0) { ctx.beginPath(); ctx.moveTo(16 + path[0].x * 32, 16 + path[0].y * 32); for (let i = 1; i < path.length; i++) { ctx.lineTo(16 + path[i].x * 32, 16 + path[i].y * 32); } ctx.strokeStyle = "#fff7"; ctx.lineWidth = 12; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.stroke(); } } function generateWorld(dimX, dimY) { const laby = Array.from( { length: dimY }, (_, y) => { return Array.from({ length: dimX }, (_, x) => { return x === 0 || y === 0 || x === dimX - 1 || y === dimY - 1 ? -1 : Math.random() < 0.2 ? -1 : Math.random() < 0.2 ? EXTRA_COST_POO : 0; }); }); laby[1][1] = laby[dimY - 2][dimX - 2] = 0; retur.........完整代码请登录后点击上方下载按钮下载查看
网友评论0