js迷宫求解

已于 2022-06-27 10:08:03 修改
阅读量566 收藏 4
点赞数
分类专栏： javascript 算法 文章标签： 算法
于 2021-05-30 15:24:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43840202/article/details/117398825
版权

在生成随机迷宫的基础上进行操作

生成随机迷宫异步: https://web03.cn/blog/252

通用的css以及js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成迷宫</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        #map {
            display: inline-block;
            border: 2px solid #6a6f77;
            margin-top: 120px;
        }

        .line {
            height: 30px;
            width: 100%;
        }

        .wall, .road, .path {
            width: 30px;
            height: 30px;
            display: inline-block;
        }

        .wall {
            background: #45494c;
        }

        .road {
            background: #ffffff;
        }

        .path {
            background: #f57a7a;
        }
    </style>
</head>
<body>
<div id="map">

</div>
</body>
<script>
    const basicMap = [] // 迷宫数据
    const visited = [] // 逻辑访问数据
    const range = [[-1, 0], [0, 1], [1, 0], [0, -1]] // 偏移量
    const pathVisited = []//求解访问数据
    let exitX = 0
    let exitY = 0
    /**
     * 生成地基，每个可通行的方格都间隔一堵墙
     */
    function createBasis(x, y) {
        for (let i = 0; i < x; i++) {
            let line = new Array(y).fill(0)
            visited.push(new Array(y).fill(false))
            pathVisited.push(new Array(y).fill(false))
            if (i % 2 === 1) {
                for (let j = 0; j < line.length; j++) {
                    if (j % 2 === 1) {
                        line[j] = 1
                    }
                }
            }
            basicMap.push(line)
        }
    }

    /**
     * 渲染map
     */
    function renderMap() {
        const className = ['wall', 'road', 'path']
        let dom = ''
        for (let i = 0; i < basicMap.length; i++) {
            let line = '<div class="line">'
            for (let j = 0; j < basicMap[i].length; j++) {
                line += `<div class="${className[basicMap[i][j]]}"></div>`
            }
            line += '</div>'
            dom += line
        }
        const mapDom = document.getElementById('map')
        mapDom.style.height = 30 * basicMap.length + 'px'
        mapDom.style.width = 30 * basicMap[0].length + 'px'
        mapDom.innerHTML = dom
    }

    /**
     * 判断是否越界
     * @param x
     * @param y
     * @returns {boolean|boolean}
     */
    function isRange(x, y) {
        return x > 0 && x < basicMap.length - 1 && y > 0 && y < basicMap[0].length - 1
    }

    function* createMaze() {
        let stack = []
        stack.push({x: 1, y: 1})
        visited[1][1] = true
        while (stack.length > 0) {
            let curPos
            if (Math.random() > 0.5) {
                curPos = stack.shift()
            } else {
                curPos = stack.pop()
            }
            for (let i = 0; i < 4; i++) {
                let newX = curPos.x + range[i][0] * 2  // 两步是 *2
                let newY = curPos.y + range[i][1] * 2
                // 坐标没有越界 且 没有被访问过
                if (isRange(newX, newY) && !visited[newX][newY]) {
                    yield
                    basicMap[(newX + curPos.x) / 2][(newY + curPos.y) / 2] = 1
                    if (Math.random() > 0.5) {
                        stack.push({x: newX, y: newY})
                    } else {
                        stack.unshift({x: newX, y: newY})
                    }
                    visited[newX][newY] = true
                }
            }
        }
    }
</script>
</html>

深度优先、递归求解

在基础代码上增加求解方法

    let answerStep = 0 // 播放动画延时栈数
	    /**
     * 求解
     */
    function getMazePath(x, y) {
        if (isRange(x, y)) {
            pathVisited[x][y] = true // 求解时访问过
            // 渲染当前点
            timeOutRender(x, y, 2)
            if (x === exitX && y === exitY) {
                return true // 出口
            }
            // 遍历该点的四个方向是否可继续遍历
            for (let i = 0; i < 4; i++) {
                let newX = x + range[i][0]
                let newY = y + range[i][1]
                // 没有越界 是路 且没有被访问，继续访问
                if (isRange(newX, newY) && basicMap[newX][newY] === 1 && !pathVisited[newX][newY]) {
                    if (getMazePath(newX, newY)) {
                        return true
                    }
                }
            }
            // 没有return终止，回溯 遍历完四个方向都没有找到出口和其他能行的路（死胡同） 则表示该点不是解的路径上的点 还原为路
            timeOutRender(x, y, 1)
            return false
        }
    }

    /**
     * 延时动画
     * @param x
     * @param y
     * @param t
     */
    function timeOutRender(x, y, t) {
        setTimeout(() => {
            basicMap[x][y] = t
            renderMap()
        }, answerStep++ * 30)
    }

    // 创建29*29的地图，路的四面都为墙
    createBasis(29, 29)
    // 设置开始和结束点为左上角和右下角
    basicMap[1][1] = 1
    exitX = basicMap[0].length - 2
    exitY = basicMap.length - 2
    basicMap[exitX][exitY] = 1

    // 渲染地图
    renderMap()
    // 处理生成迷宫
    const createStep = createMaze()
    const t = setInterval(() => {
        let n = createStep.next()
        // 渲染地图
        renderMap()
        if (n.done) {
            // 求解
            getMazePath(1, 1)
            clearInterval(t)
        }
    }, 10)

过程
在这里插入图片描述

demo：https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/%E8%BF%B7%E5%AE%AB%E6%B1%82%E8%A7%A3_%E6%B7%B1%E5%BA%A6_%E9%80%92%E5%BD%92.html

非递归、栈、深度优先

    let prePath = [] // 上一次访问数据
    /**
     * 求解
     */
    function* getMazePath(x,y){
        let stack = []
        stack.unshift({x, y}) // 入栈
        while (stack.length > 0) {
            let curPos = stack.pop()
            pathVisited[curPos.x][curPos.y] = true // 求解时访问过
            basicMap[curPos.x][curPos.y] = 3
            renderMap()
            yield
            // 找到出口
            if (curPos.x === exitX && curPos.y === exitY) {
                // 绘制解
                basicMap[curPos.x][curPos.y] = 2
                renderMap()
                let prePos = prePath[curPos.x][curPos.y] // 获取上个点
                while(prePos != null) {
                    basicMap[prePos.x][prePos.y] = 2// 渲染上一个点
                    renderMap()
                    yield
                    prePos = prePath[prePos.x][prePos.y] // 获取上上个点
                }
                break;
            }

            for (let i = 0; i < 4; i++) {
                let newX = curPos.x + range[i][0]
                let newY = curPos.y + range[i][1]
                if (isRange(newX, newY) && basicMap[newX][newY] === 1 && !pathVisited[newX][newY]) {
                    prePath[newX][newY] = {x: curPos.x, y: curPos.y} // 记录新的点以及该点由谁走过来
                    stack.push({x: newX, y: newY}) // 入栈
                }
            }
        }
    }

    // 创建29*29的地图，路的四面都为墙
    createBasis(29, 29)
    // 设置开始和结束点为左上角和右下角
    basicMap[1][1] = 1
    exitX = basicMap[0].length - 2
    exitY = basicMap.length - 2
    basicMap[exitX][exitY] = 1

    // 渲染地图
    renderMap()
    // 处理生成迷宫
    const createStep = createMaze()
    const t = setInterval(() => {
        let n = createStep.next()
        // 渲染地图
        renderMap()
        if (n.done) {
            clearInterval(t)
            // 求解
            const answerStep = getMazePath(1,1)
            const t2 = setInterval(() => {
                let n2 = answerStep.next()
                // 渲染地图
                renderMap()
                if (n2.done) {
                    clearInterval(t2)
                }
            }, 30)
        }
    }, 10)

过程
在这里插入图片描述

demo: https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/%E8%BF%B7%E5%AE%AB%E6%B1%82%E8%A7%A3_%E9%9D%9E%E9%80%92%E5%BD%92_%E6%B7%B1%E5%BA%A6_%E6%A0%88.html

非递归、栈、广度优先

    let prePath = [] // 上一次访问数据
    /**
     * 求解
     */
    function* getMazePath(x,y){
        let stack = []
        stack.unshift({x, y}) // 入栈
        while (stack.length > 0) {
            let curPos = stack.shift()
            pathVisited[curPos.x][curPos.y] = true // 求解时访问过
            basicMap[curPos.x][curPos.y] = 3
            renderMap()
            yield
            // 找到出口
            if (curPos.x === exitX && curPos.y === exitY) {
                // 绘制解
                basicMap[curPos.x][curPos.y] = 2
                renderMap()
                let prePos = prePath[curPos.x][curPos.y] // 获取上个点
                while(prePos != null) {
                    basicMap[prePos.x][prePos.y] = 2// 渲染上一个点
                    renderMap()
                    yield
                    prePos = prePath[prePos.x][prePos.y] // 获取上上个点
                }
                break;
            }

            for (let i = 0; i < 4; i++) {
                let newX = curPos.x + range[i][0]
                let newY = curPos.y + range[i][1]
                if (isRange(newX, newY) && basicMap[newX][newY] === 1 && !pathVisited[newX][newY]) {
                    prePath[newX][newY] = {x: curPos.x, y: curPos.y} // 记录新的点以及该点由谁走过来
                    stack.push({x: newX, y: newY}) // 入栈
                }
            }
        }
    }

    // 创建29*29的地图，路的四面都为墙
    createBasis(29, 29)
    // 设置开始和结束点为左上角和右下角
    basicMap[1][1] = 1
    exitX = basicMap[0].length - 2
    exitY = basicMap.length - 2
    basicMap[exitX][exitY] = 1

    // 渲染地图
    renderMap()
    // 处理生成迷宫
    const createStep = createMaze()
    const t = setInterval(() => {
        let n = createStep.next()
        // 渲染地图
        renderMap()
        if (n.done) {
            clearInterval(t)
            // 求解
            const answerStep = getMazePath(1,1)
            const t2 = setInterval(() => {
                let n2 = answerStep.next()
                // 渲染地图
                renderMap()
                if (n2.done) {
                    clearInterval(t2)
                }
            }, 30)
        }
    }, 10)

过程
在这里插入图片描述

demo: https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/%E8%BF%B7%E5%AE%AB%E6%B1%82%E8%A7%A3_%E9%9D%9E%E9%80%92%E5%BD%92_%E5%B9%BF%E5%BA%A6_%E6%A0%88.html

深度与广度的差别在于，取当前格子的时候使用shift()和pop()
因为入栈是push，旁边四个都是先入栈，在栈底，pop()取栈尾，会先寻找更深的路径【深度】，
相反，如果是shift()的话，你旁边的一入栈就进行路径的校验寻找，就会把边上所有的都找完才会去找更深的地方【广度】

【03】
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现创建迷宫，并求解最短路径(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-26 88
JavaScript实现创建迷宫，并求解最短路径(附完整源码)
javascript解决迷宫求解问题
weixin_45353138的博客
05-28 1003
javascript解决迷宫求解问题 基本要求： 用户进入主界面，点击开始时，进入迷宫页面，点击随机迷宫生成一个随机迷宫，点击寻找路径一个物体从起点（1,1）开始动态显示，有探索过程（进去出来），到达终点探索到路径则在下方显示”找到路径”，点击正确路径则显示刚才探索路径中的正确路径（无进去出来过程），可以在console控制台动态显示坐标，再点击随机地图则创建一个新迷宫，依旧可以实现上面的功能，点击回到主界面则回到主界面。 算法思想 这是c语言的版本: 主要运用用栈的先进后出的思路进行迷宫求解 求解路
js迷宫生成与迷宫求解算法
墨羽晨的博客
01-18 1212
js经典算法，迷宫的生成和自动求解，记叙迷宫生成步骤和自动求解原理，完整dome
走迷宫问题js实现
weixin_39991986的博客
02-26 298
走迷宫问题js实现
js迷宫自动走html,JavaScript简单实现迷宫问题求解
weixin_36221980的博客
06-07 633
前言想起大学时老师让用Java GUI解决迷宫问题，当时还真给做出来了，可惜代码不见了预览介绍使用JavaScript解决迷宫问题(使用vue-cli@3搭建环境)，使用深度优先搜索算法计算所有通路条数，并展示最优解之一环境使用了Element中一些组件和easyicon的一些图标实现核心组件迷宫问题实现-之间 图标来自href="https://www.easyicon.net"target="...
JS实现迷宫小游戏(完整代码)
m0_45293861的博客
03-04 2122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS打造的走迷宫游戏</title> </head&gt...
自动求解的javascript 迷宫游戏
07-13
**迷宫游戏与JavaScript自动化求解** 在编程领域，迷宫游戏是一种常见的练习项目，它涉及到路径搜索算法、数据结构以及用户交互等多个方面。在这个基于JavaScript的迷宫游戏中，开发者在原有的基础上进行了优化，...
MazeSolver:基于JavaScript的迷宫求解器
04-29
基于JavaScript的迷宫求解器。为什么？ 因为我可以。如何？ 通过分析从下拉列表或文件浏览器中选择的图像，我们可以确定墙壁和路径在哪里。 白色（255、255、255、255）是路径，黑色（0、0、0、0）是墙。 起点应该...
MazeSolver2:迷宫求解器暴力破解Javascript
03-26
迷宫 有关使用此代码的信息，请 Javascript蛮力迷宫求解器，玩家从起点开始，并且玩家随机移动，当玩家卡住时，向后退回一格，此点将被更改为卡住点，并且玩家无法再次进入该点
maze-exercise:迷宫创作迷宫求解练习
05-20
提供了迷宫求解器的参考实现，该求解器采用迷宫并找到通过同步和异步方式进行迷宫求解的方法 提供了一个“锻炼”骨架，可以将其视为采访问题：受访者应实施迷宫求解器，其行为与参考实施类似 迷宫求解器的参考实现是...
迷宫求解器：迷宫游戏
02-16
【描述】：“要求”部分指出，该迷宫求解器项目需要Node.js版本大于等于14.3.0，这表明项目依赖于Node.js环境运行。安装过程中，首先需要通过npm（Node.js包管理器）来安装必要的依赖包。执行“npm install”命令会...
简易的迷宫算法
07-28
简易的迷宫算法 js实现简单的迷宫模版生成
迷宫问题深度优先和广度优先，用js写的动态页面
05-12
用javascript写的一个迷宫动态网页程序，把栈和队列的深度优先和广度优先都应用了，自我感觉良好
迷宫问题-js实现
qq_36489998的博客
02-08 2303
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; var flag=true;
迷宫寻路算法-js-深度优先搜索
Pluto
10-07 5160
《啊哈！算法》 迷宫寻路算法，深度优先搜索 递归实现
JS手撸数据结构系列(四) ——Prim算法与迷宫生成
scargtt的博客
05-02 6528
迷宫问题一个100*100的方格的迷宫，障碍未知，只知道起点和终点，以第一视角进入，求最短距离路径。这是当时腾讯二面的面试官给我留的题目，当时只要求写出了BFS求最短路径的算法，那么就会很自然的想到如何生成迷宫呢？ 迷宫可以看成是一个图，也可以看成是一个二维数组，其中数组元素的值为1，代表可以走通，代表路，其中数组元素的值为0的话，代表不能走通，代表墙壁。要想生成随机迷宫，难点就在如何确保
js解二维迷宫
Vilien (Mr.Bin) 技术笔记
10-25 1896
今天无聊，自己写了一个解二维迷宫的js类，请指教。 /* 功能：解二维迷宫 * 制作：Vilien * 日期：2013.10.25 * * @usage new Maze(maze, x, y, epx, epy) * * @param maze * > 二维迷宫，必须，类型为二维数组 * > 0表示可通过，1表示不可通过 * * @param x * > 迷宫起点横坐
JS实现“老鼠走迷宫”算法
qq_40511157的博客
12-01 1984
问题描述 给定一个二维数组，数组中2表示墙壁，0表示通路，由此数组可展示为一个迷宫图。给定入口位置和出口位置，判断之间是否存在通路并显示出走出迷宫的道路。 思路 实际上是使用回溯算法求解该问题，就是在上下左右四个方向试探，倘若有路则走一步，在新的位置继续在四个位置试探，并且对走过的路进行标记，倘若走到死胡同里，则退回上一步再来试探，以此类推，使用递归来实现。 JS代码 //递归实现老鼠走迷宫算法 ...
简单生成随机迷宫的算法___Prim和DFS
Bigbao小码农
06-25 5377
快要大四了,要赶紧复习下数据结构好找工作,哈哈哈哈哈,所以最近在看图相关的算法,光看书没什么感觉,准备实践一下,写个迷宫算法 主要用Prim算法和DFS算法实现了一遍,没有用BFS是因为Prim的思路跟BFS的其实差不太多,但是看别的博客都说Prim比较自然 思路其实大同小异,主要为:常见迷宫(即任意两点间都能够找到路径,且仅有一条成功路径),迷宫可看做一组连通图(用数组储存),默认所有点间都...
迷宫求解
最新发布
05-26
迷宫求解可以采用深度优先搜索、广度优先搜索、A*算法等方法，以下是使用深度优先搜索求解迷宫的代码示例： ```python def DFS(maze, start, end): stack = [(start, [start])] visited = set() while stack: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值