javascript解决迷宫求解问题

最新推荐文章于 2024-08-26 20:22:20 发布

儛飓

最新推荐文章于 2024-08-26 20:22:20 发布

阅读量1k

点赞数 1

文章标签： javascript html html5 css

本文链接：https://blog.csdn.net/weixin_45353138/article/details/106414602

版权

本文介绍了使用JavaScript解决迷宫求解问题的方法。通过栈的数据结构，结合先进后出的原理，当遇到可通行的位置时将其入栈，并尝试找到出口。当无法前行时，回溯并尝试其他路径。同时，文章提到了模块划分，数据结构的设计，以及JavaScript中实现迷宫动态显示的关键代码和效果截图。用户可以通过交互操作，如生成随机迷宫、寻找路径等，体验迷宫求解的过程。

摘要由CSDN通过智能技术生成

javascript解决迷宫求解问题

基本要求：

用户进入主界面，点击开始时，进入迷宫页面，点击随机迷宫生成一个随机迷宫，点击寻找路径一个物体从起点（1,1）开始动态显示，有探索过程（进去出来），到达终点探索到路径则在下方显示”找到路径”，点击正确路径则显示刚才探索路径中的正确路径（无进去出来过程），可以在console控制台动态显示坐标，再点击随机地图则创建一个新迷宫，依旧可以实现上面的功能，点击回到主界面则回到主界面。

算法思想

这是c语言的版本:
主要运用用栈的先进后出的思路进行迷宫求解
求解路径函数的算法主要如下：
Do{
若当前位置可通，
则{
将该位置插入栈顶；
若该位置是出口位置，则调用函数将栈元素输出显示路径，结束函数；
否则换当前位置的东邻方块为新的当前位置；
}
否则，
若栈不空且栈顶位置尚有其他方向未经探索，
则设定新的当前位置为沿顺时针方向旋转找到的栈顶位置的下一相邻块；
若栈不空但栈顶位置四周均不可通，
则{
删去栈顶位置；
若栈不空则重试新的栈顶位置，
直到找到一个可通的相邻块或出栈至栈空；

}
}while（栈不空）；
循环结束无解则输出该路径无解

javascript改进后:
var timeId=setInterval{
Function（）{
若当前位置可通
则{
将该位置插入栈顶；并且当前位置该位置；
若该位置是出口位置，则结束定时器，在下方显示”找到路径”；

否则换当前位置的东邻方块为新的当前位置；
}
否则，
{
若栈不空
{
删除栈顶元素，当前栈顶元素为当前位置
如果栈不空且所有方向都探索过
{
删除栈顶元素，当前栈顶元素为当前位置
}
如果栈不空且该位置有其他方向未经探索{
换当前位置的东邻方块为新的当前位置并入栈；
}
否则{
结束定时器，在下方显示”没有找到路径”；
}
}
}
}，t);//调用定时器，间隔为每t ms调用函数

模块划分

数据结构

function Maze(div) {
this.post = div.getAttribute(“index”);
this.di = 1;
this.foot = 0;
this.pass = 1;
}//Maze对象包括post ，di ，foot ，pass四个属性
var maze = [];//全局数组，保存迷宫所有元素
var path = [];//全局数组，保存成功路径的迷宫元素
运用js中的数组模拟栈的使用，有push和pop函数 在这里插入代码片
Math.random()产生0-1的随机数字
setInterval定时器函数的使用
function Current(x, y, width, height, color) {
this.x = x || 20;
this.y = y || 70;
this.width = width || 20;
this.height = height || 20;
this.color = color || “brown”;
that = this;
}//当前位置Current的对象以及对Current.prototype原型的使用来节省内存

代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
    
            padding: 0px;
            margin: 0px;
        }
        /*去除所有标签的内边距，外边距*/
        .maze{
    
            width: 20px;
            height: 20px;
            background-color: black;
            float: left;
        }
        /*迷宫不可通的类样式，为黑色，长高为20*20px*/
        .pass {
    
            width: 18px;
            height: 18px;
            background-color: green;
            float: left;
            border: 1px solid black;
        }
        /*迷宫可通可通的类样式，加上黑色的1px边界，所以长高需要减2，18*18px*/
        #map {
    
            width: 440px;
            height: 440px;
            overflow: hidden;
            position: relative;
            float:left;
        }
        /*地图的样式，浮动为左*/
        #content{
    
            width: 640px;
            overflow: hidden;
            margin: 200px auto;
            position: relative;
            display:none;
        }
        /*主要内容的样式*/
        #begin{
    
            width: 440px;
            overflow: hidden;
            margin: 200px auto;
            position: relative;
            height:490px;
           background-image:url(images/maze.jpg);
           background-repeat:no-repeat;
        }
        /*开始的主界面*/
        #title {
    
            text-align: center;
            height: 50px;
            color: black;
            font-weight: bold;
            font-size: 25px;
        }
        /*迷宫求解文字的样式*/
        #btn {
    
            text-align:center;
            height:100px;
            width:200px;
            border:2px solid black;
            position:absolute;
            background-color:green;
            border-radius:25%;
            line-height:100px;
            left:125px;
            top:125px;
            cursor:pointer;
        }
        /*开始界面开始按钮的设置*/
        #start {
    
        position:absolute;
        height:440px;
        width:198px;
        left:440px;
        background-color:red;
        float:left;
        border:1px solid black;
        text-align:center;
        }
        /*主要内容地图旁边盒子的样式，浮动为左*/
        input{
    
            margin-top:70px;
        }
        /*所有按钮的外边距设置*/
        #inner{
    
            overflow: hidden;
        }
        /*包含map和start的父级盒子样式*/
    </style>
</head>
<body>
    <div id="begin">
        <div id="btn">
            开始
        </div>
    </div>
    <div id="content">
        <div id="title">迷宫 求解</div>
        <div id="inner">
        <div id="map"&g