<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="big-bg" id="bg">
<div id="role">
<img src="箭頭圖片.png" alt="" width="40" id="arrow">
</div>
</div>
</body>
</html>
<script>
let unit = 40; // 一個(gè)單位的長(zhǎng)度,就是一個(gè)網(wǎng)格的寬高
let coordList = []; // 路徑點(diǎn)集合
let originNode = {}; // 起點(diǎn)
let targetNode = {}; // 終點(diǎn)
let xxx = [
{x: 12,y:12},
{x: 12,y:12},
{x: 12,y:12},
];
let targetCell = null;
let timer = null;
var bg = document.getElementById("bg")
for (let index = 0; index < 2000; index++) {
var cell = document.createElement("div");
cell.classList.add("cell")
bg.appendChild(cell)
}
// 獲取起點(diǎn)
let startCell = document.getElementById("role");
// 點(diǎn)擊的點(diǎn)定為終點(diǎn)
document.addEventListener("mousedown", (e) => {
let { x: x1, y: y1 } = startCell.getBoundingClientRect();
originNode = {
x: x1 / unit,
y: y1 / unit,
}
let { x: x2, y: y2 } = e.target.getBoundingClientRect();
targetNode = {
x: x2 / unit,
y: y2 / unit,
}
targetCell = e.target;
targetCell.style.backgroundColor = "#fff566"
pushNearNode()
})
function getNearNodes(originNode) {
let leftNode = {
name: "left",
x: originNode.x - 1,
y: originNode.y,
g: 1, // 附近點(diǎn)的距離终抽,水平垂直邊是定義為1個(gè)單位,斜邊定義為1.4個(gè)的單位(暫時(shí)不考慮斜邊)
h: 0, // 這點(diǎn)距離終點(diǎn)的水平距離x個(gè)單位 與 這點(diǎn)距離終點(diǎn)的垂直距離x個(gè)單位 之和
f: 0, // g 與 h 之和
};
setDistProp(leftNode);
let topNode = {
name: "top",
x: originNode.x,
y: originNode.y - 1,
g: 1,
h: 0,
f: 0,
};
setDistProp(topNode);
let rightNode = {
name: "right",
x: originNode.x + 1,
y: originNode.y,
g: 1,
h: 0,
f: 0,
};
setDistProp(rightNode);
let bottomNode = {
name: "bottom",
x: originNode.x,
y: originNode.y + 1,
g: 1,
h: 0,
f: 0,
};
setDistProp(bottomNode);
return [leftNode, topNode, rightNode, bottomNode,]
}
function setDistProp(node) {
if (!node.g) {
node.g = 0;
}
node.h = Math.abs(targetNode.x - node.x) + Math.abs(targetNode.y - node.y);
node.f = node.g + node.h;
}
// 遞歸找離目標(biāo)點(diǎn)最近的點(diǎn),push到數(shù)組當(dāng)中
function pushNearNode() {
let nearNodeArr = getNearNodes(originNode);
let minFNode = null; // 離目標(biāo)最近的點(diǎn)
for (let index = 0; index < nearNodeArr.length; index++) {
const node = nearNodeArr[index];
if (!minFNode) {
minFNode = node;
} else if (node.f <= minFNode.f) {
minFNode = node;
}
}
if (minFNode) {
coordList.push(minFNode);
originNode = minFNode;
if (minFNode.x == targetNode.x && minFNode.y == targetNode.y) { // 到達(dá)終點(diǎn)
coordList.push(targetNode);
let step = 0;
timer = setInterval(() => {
if (coordList[step]) {
startCell.style.left = coordList[step].x * unit + "px";
startCell.style.top = coordList[step].y * unit + "px";
switch (coordList[step].name) {
case "bottom":
startCell.style.transform = "rotate(0)"
break;
case "right":
startCell.style.transform = "rotate(-90deg)"
break;
case "left":
startCell.style.transform = "rotate(90deg)"
break;
case "top":
startCell.style.transform = "rotate(-180deg)"
break;
default:
break;
}
console.log(coordList[step], "coordList[step]");
step++;
} else {
targetCell.style.backgroundColor = "transparent";
coordList = []
clearInterval(timer);
}
}, 30)
} else {
pushNearNode();
}
}
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#role {
width: 40px;
height: 40px;
left: 680px;
top: 80px;
position: fixed;
background: linear-gradient(to bottom, #bae0ff, #1677ff);
transition: .3s;
display: flex;
justify-content: center;
align-items: center;
}
.big-bg {
width: 100vw;
height: 100vh;
background: #152439;
display: flex;
flex-wrap: wrap;
position: relative;
}
.cell {
width: 40px;
height: 40px;
border-bottom: 1px solid rgba(33, 233, 252, 0.12);
border-right: 1px solid rgba(33, 233, 252, 0.12);
}
.cell:hover {
background-color: rgba(33, 233, 252, 0.22);
}
.obstacle {
background-color: #f5222d;
color: #fff;
font-size: 14px;
line-height: 19px;
text-align: center;
}
</style>
html 版 A*算法 自動(dòng)尋路
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)店溢,“玉大人叁熔,你說(shuō)我怎么就攤上這事〈材粒” “怎么了荣回?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)戈咳。 經(jīng)常有香客問(wèn)我心软,道長(zhǎng),這世上最難降的妖魔是什么著蛙? 我笑而不...
- 正文 為了忘掉前任删铃,我火速辦了婚禮,結(jié)果婚禮上踏堡,老公的妹妹穿的比我還像新娘猎唁。我一直安慰自己,他們只是感情好顷蟆,可當(dāng)我...
- 文/花漫 我一把揭開白布诫隅。 她就那樣靜靜地躺著,像睡著了一般帐偎。 火紅的嫁衣襯著肌膚如雪逐纬。 梳的紋絲不亂的頭發(fā)上,一...
- 那天削樊,我揣著相機(jī)與錄音豁生,去河邊找鬼。 笑死漫贞,一個(gè)胖子當(dāng)著我的面吹牛甸箱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播迅脐,決...
- 文/蒼蘭香墨 我猛地睜開眼芍殖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了仪际?” 一聲冷哼從身側(cè)響起围小,我...
- 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎树碱,沒(méi)想到半個(gè)月后肯适,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡成榜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年框舔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赎婚。...
- 正文 年R本政府宣布撩嚼,位于F島的核電站停士,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏完丽。R本人自食惡果不足惜恋技,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逻族。 院中可真熱鬧蜻底,春花似錦、人聲如沸聘鳞。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)搁痛。三九已至长搀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鸡典,已是汗流浹背源请。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像纽甘,于是被迫代替她去往敵國(guó)和親良蛮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 思路講解在b站: https://www.bilibili.com/video/BV1fv4y1r7sE/[htt...
- http://xiaoze.info:8080/articles/2020/10/28/1603880094844...
- - 本文由 伯樂(lè)在線 - 威士忌 翻譯悍赢,黃利民 校稿决瞳。未經(jīng)許可货徙,禁止轉(zhuǎn)載!英文出處:theory.stanford...
- A* 路算法原理可以參考這個(gè)文章蠢棱,已經(jīng)寫的很詳細(xì)了http://www.cppblog.com/mythit/ar...