html 版 A*算法 自動(dòng)尋路

image.png

<!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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末黄虱,一起剝皮案震驚了整個(gè)濱河市萨赁,隨后出現(xiàn)的幾起案子枢里,更是在濱河造成了極大的恐慌,老刑警劉巖悼潭,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坟冲,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡邪蛔,警方通過(guò)查閱死者的電腦和手機(jī)急黎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)店溢,“玉大人叁熔,你說(shuō)我怎么就攤上這事〈材粒” “怎么了荣回?”我有些...
    開封第一講書人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)戈咳。 經(jīng)常有香客問(wèn)我心软,道長(zhǎng),這世上最難降的妖魔是什么著蛙? 我笑而不...
    開封第一講書人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任删铃,我火速辦了婚禮,結(jié)果婚禮上踏堡,老公的妹妹穿的比我還像新娘猎唁。我一直安慰自己,他們只是感情好顷蟆,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開白布诫隅。 她就那樣靜靜地躺著,像睡著了一般帐偎。 火紅的嫁衣襯著肌膚如雪逐纬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評(píng)論 1 299
  • 那天削樊,我揣著相機(jī)與錄音豁生,去河邊找鬼。 笑死漫贞,一個(gè)胖子當(dāng)著我的面吹牛甸箱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播迅脐,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼芍殖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了仪际?” 一聲冷哼從身側(cè)響起围小,我...
    開封第一講書人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎树碱,沒(méi)想到半個(gè)月后肯适,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡成榜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年框舔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赎婚。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刘绣,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挣输,到底是詐尸還是另有隱情纬凤,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布撩嚼,位于F島的核電站停士,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏完丽。R本人自食惡果不足惜恋技,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逻族。 院中可真熱鬧蜻底,春花似錦、人聲如沸聘鳞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)搁痛。三九已至长搀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鸡典,已是汗流浹背源请。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留彻况,地道東北人谁尸。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像纽甘,于是被迫代替她去往敵國(guó)和親良蛮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容