javscript实现一个迷宫，最短路径生成

最新推荐文章于 2024-07-25 17:54:26 发布
最新推荐文章于 2024-07-25 17:54:26 发布
阅读量197 收藏 2
点赞数 1
分类专栏： 算法 文章标签： leetcode 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kissyulu/article/details/123873478
版权

​

迷宫问题-寻找最短路径

思路一般使用bfs
原文：http://www.jiajiajia.club/blog/artical/112

采用

  • 算法：广度优先搜索
  • 数据结构：队列，链表

javascript实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var flag=true;
            window.onload = function() {
                var wid=20;
                var box = document.getElementById('box');
                var top = 0;
                for(i = 0; i < wid; i++) {//初始化地图
                    var left = 0;
                    for(j = 0; j < wid; j++) {
                        var odiv = document.createElement('div');
                        odiv.className = 'odiv';
                        odiv.style.top = top + 'px';
                        odiv.style.left = left + 'px';
                        odiv.setAttribute("state","1");
                        //odiv.innerHTML=(i+1)+"-"+(j+1);
                        odiv.setAttribute("id",(i+1)+"-"+(j+1));
                        box.appendChild(odiv);
                        left += 31;
                    }
                    top += 31;
                }
                
                function Node(i, j, n) { //节点信息
                    this.i = i;//
                    this.j = j;//自身节点位置坐标
                    this.n=n;//记录父节点
                }
                
                function ArrayQueue(){  //队列
                    var arr = [];  
                    this.push = function(element){  //入队
                        arr.push(element);  
                        return true;  
                    }  
                    this.pop = function(){  //出队
                        return arr.shift();  
                    }
                    this.size = function(){ //队列长度
                        return arr.length;  
                    }  
                }
                var mark = new Array(); //初始化地图标记信息
                function remark(){
                    for(var x = 0; x < (wid+2); x++) {
                        mark[x] = new Array(); //
                        for(var y = 0; y < (wid+2); y++) {
                            mark[x][y] = 0; //数组初始化为0
                        }
                    }
                }
                remark();
                //方位增量
                var move = [
                    [0, 0],
                    [0, 1],
                    [1, 0],
                    [0, -1],
                    [-1, 0]
                ];
                var maze = [//初始化地图信息
                            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                            [1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1],
                            [1,0,1,1,1,1,1,1,0,1,0,0,0,1,0,0,0,0,0,0,1,1],
                            [1,0,0,0,0,0,0,1,0,1,0,1,0,1,0,1,1,1,1,0,1,1],
                            [1,0,1,0,1,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,0,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,1,1,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,1,0,0,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,1,1,1,1,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,0,0,0,0,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,0,0,1,1,1,1,1,0,1,0,1,0,1,0,0,1,0,1,1],
                            [1,0,1,1,1,1,1,1,1,1,0,1,0,0,0,1,0,0,1,0,1,1],
                            [1,0,0,0,0,0,0,0,0,1,0,0,1,1,1,1,0,0,1,0,1,1],
                            [1,1,1,1,1,1,1,0,0,1,1,0,0,1,1,0,0,0,1,0,1,1],
                            [1,0,0,0,0,0,0,0,0,1,1,1,0,0,1,1,1,1,1,0,1,1],
                            [1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,0,1,1],
                            [1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,1],
                            [1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1],
                            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
                            
                var interval;    
                var f=false;
                function mazes(){
                    var q=new ArrayQueue();
                    q.push(new Node(1,1,null));
                    var n;
                    
                    interval = window.setInterval(function() {
                        n=q.pop();
                        //console.log(n);//访问元素
                        document.getElementById(n.i+"-"+n.j).style.background="greenyellow";
                        if(n.i==wid&&n.j==wid){
                            console.log(n);
                            var p=n;
                            f=true;
                            while(p!=null){
                                document.getElementById(p.i+"-"+p.j).style.background="green";
                                p=p.n;
                            }
                            clearInterval(interval);
                        }
                        for(var v=1;v<=4;v++){
                            var g = n.i+move[v][0],
                                h = n.j+move[v][1];
                            if(maze[g][h] == 0 && mark[g][h] == 0){
                                q.push(new Node(g,h,n));
                                mark[g][h]=1;
                            }
                        }
                        if(q.size()<=0){
                            if(!f){
                                console.log("没有找到出口");
                                alert("没有找到出口");
                                clearInterval(interval);
                            }
                        }
                    },50);
                }
                
                //初始化地图背景
                function draw(){
                    for(q=1;q<=20;q++){
                        for(w=1;w<=20;w++){
                            if(maze[q][w]==1){
                                document.getElementById(q+"-"+w).style.background="#aaa";
                                document.getElementById(q+"-"+w).setAttribute("state","1");
                            }else{
                                document.getElementById(q+"-"+w).style.background="#eee";
                                document.getElementById(q+"-"+w).setAttribute("state","0");
                            }
                        }
                    }
                }
                draw();
                
                function begin(){
                    if(flag){
                        mazes();
                        flag=false;
                    }else{
                        alert("请重新绘制地图");
                    }
                }
                //从新绘制地图
                function clear(){
                    clearInterval(interval);
                    remark();
                    draw();
                    flag=true;
                }
                //调整地图局部
                function odivclick(){
                    var ij=this.getAttribute("id");
                    var arr=ij.split("-");
                    if(maze[parseInt(arr[0])][parseInt(arr[1])]==0){
                        maze[parseInt(arr[0])][parseInt(arr[1])]=1;
                    }else{
                        maze[parseInt(arr[0])][parseInt(arr[1])]=0;
                    }
                    clear();
                }
                
                document.getElementById("begin").onclick = begin;
                document.getElementById("clear").onclick = clear;
                //单元格添加点击事件
                var list=document.getElementsByClassName('odiv');
                for(var i in list) {
                    list[i].onclick=odivclick;
                }
                
            }
        </script>
        <style>
                .odiv {
                    width: 30px;
                    height: 30px;
                    background: #aaa;
                    position: absolute;
                    font-size: 5px;
                    text-align: center;
                    line-height: 30px;
                }
                
                #box {
                    width: 620px;
                    height: 620px;
                    position: relative;
                    float: left;
                    border: 3px solid red;
                }
                #sss{
                    width: 1000px;
                    height: 500px;
                    float: left;
                }
        </style>
    </head>
    <body>
        <div id="box">
        </div>
        <input type="button" value="开始寻找出口" id="begin" />
        <input type="button" value="从新绘制地图" id="clear" />
    </body>
</html>

​

程序员斯文
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript实现创建迷宫，并求解最短路径(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-26 90
JavaScript实现创建迷宫，并求解最短路径(附完整源码)
前端:运用HTML+CSS+JavaScript实现迷宫游戏
坚持不懈的大白的博客
04-15 1261
最近感到挺无聊的，于是想到了大学期间关于栈的应用知识，于是就写了这篇博客！
HTML+CSS+JavaScript 迷宫生成算法 【建议收藏】
zhtbs的博客
08-17 2839
最近开始写博客了，发现很多人都在发算法类的博客，今天就献丑使用HTML,CSS和JavaScript制作一个简单的迷宫生成小代码。 迷宫生成有很多种算法，今天给大家展示的是钻孔法（道路延伸）。 1 首先将数组所有属性都设置成为墙。 2 进行道路挖掘，在数组中进行道路属性值设置。每次随机选择点打桩，在打桩数据旁边进行延伸路径，向上、向下、向左或向右看前方两个方格。如果那不是通道，则延长道路，如果无法延长道路，此时从现有道路中随机选择点（但 X 和 Y 坐标偶数的点）并延长道路。 3 重复步骤2的操作并用道路
HTML+CSS+JavaScript 迷宫生成算法
程序员-工具人的博客
08-20 574
使用HTML,CSS和JavaScript制作一个简单的迷宫生成小代码。 迷宫生成有很多种算法，今天给大家展示的是钻孔法（道路延伸）。 1 首先将数组所有属性都设置成为墙。 2 进行道路挖掘，在数组中进行道路属性值设置。每次随机选择点打桩，在打桩数据旁边进行延伸路径，向上、向下、向左或向右看前方两个方格。如果那不是通道，则延长道路，如果无法延长道路，此时从现有道路中随机选择点（但 X 和 Y 坐标偶数的点）并延长道路。 3 重复步骤2的操作并用道路填满整个屏幕，完成迷宫。 钻孔法的特点 算法的特点是
js迷宫自动走html,JavaScript简单实现迷宫问题求解
weixin_36221980的博客
06-07 634
前言想起大学时老师让用Java GUI解决迷宫问题，当时还真给做出来了，可惜代码不见了预览介绍使用JavaScript解决迷宫问题(使用vue-cli@3搭建环境)，使用深度优先搜索算法计算所有通路条数，并展示最优解之一环境使用了Element中一些组件和easyicon的一些图标实现核心组件迷宫问题实现-之间 图标来自href="https://www.easyicon.net"target="...
Rot.js 随机地牢，迷宫地图生成
weixin_41604051的博客
02-10 994
js 随机地图生成插件
递归实现走迷宫
qq_40511157的博客
06-28 935
一、题目 题目很简单，在迷宫内，给定起始点和终点，根据一定的行走策略，使用递归操作，找出一条可以行走的路径。 二、源代码 package recursion; import java.util.Stack; public class Maze { public static void main(String[] args) { int width = 8, height = 8; int startX = 1, startY = 1,endX = 6, endY = 6; //按照数组索引来书
[A*寻路]基于javascript A*寻路获取最佳路径（附带例子）
苹果蜀黍与福尔猫斯
08-22 739
直接上代码仓库https://github.com/applelee/a-star-path 关于A*算法，网上有太多的讲解，我这里就不班门弄斧了。有兴趣的小伙伴，可以去仓库下载。（注释还算比较清楚）
栈迷宫-Javascript实现
qq_41199852的博客
08-16 255
运行截图 实现原理 这里寻找的走出迷宫的路径并不是最短路径而是可行路径，采用的思想就是暴力搜索，将所有的走法都尝试一下，走到最后就是可行的路径，所以会采用栈这个先进后出的数据结构，因为这样就可以利用栈进行依次回溯 数据结构 PosType只是为了方便的记录x，y的坐标位置，栈中存储的是SElemType这个数据结构，作用是栈顶的元素就是当前的位置，里面的direction就是要走的方向 function PosType() { this.x = null; this.y = nul
mg.zip_javascript_jquery.hotkey._地图 路径_迷宫
09-19
这个项目"mg.zip"显然是一个基于 JavaScript 的迷宫生成与解决的实现，可能还结合了 jQuery Hotkey 库来增强用户交互性。 JavaScript 是一种广泛使用的客户端脚本语言，常用于网页和网络应用的动态内容生成。在这个...
Maze-generator:产生一个迷宫
05-10
在这个案例中，我们关注的是一个使用JavaScript实现的迷宫生成器。JavaScript是一种广泛使用的编程语言，尤其在网络前端开发中不可或缺，它也具备处理复杂算法的能力。 迷宫生成器的基本思想是通过一系列随机或规则...
AStar:Javascript A* 在生成的迷宫上搜索
05-30
在这个基于JavaScript的项目中，AStar算法被用于在一个自动生成的迷宫中搜索最短路径。下面将详细介绍AStar算法以及如何在JavaScript中实现。 AStar算法的核心思想是利用启发式信息来指导搜索，它结合了Dijkstra...
AmazeMaker:直线迷宫生成器和求解器
06-24
总之，AmazeMaker通过JavaScript实现了一款创新的迷宫生成与求解工具，展示了Web开发的强大潜力和乐趣。无论你是迷宫爱好者还是对编程感兴趣的初学者，都能从中学习到许多实用的编程技巧和算法知识。
maze-generator:可视化随机迷宫的生成！
05-12
在这个项目中，我们重点关注的是一个基于JavaScript实现的可视化随机迷宫生成器。JavaScript作为一种常用且灵活的编程语言，非常适合用于网页端的动态交互和可视化。 **可视化** 可视化是这个迷宫生成器的核心特性...
C++ | Leetcode C++题解之第283题移动零
Ddddddd_158的博客
07-25 439
C++ | Leetcode C++题解之第283题移动零
LeetCode707 设计链表
daishabby2486的博客
07-25 705
LeetCode707 设计链表的解题记录。
Leetcode3218. 切蛋糕的最小总开销 I
ProgramNovice的博客
07-25 338
Leetcode3218. 切蛋糕的最小总开销 I
LeetCode-day25-2844. 生成特殊数字的最少操作
最新发布
小李的便利店
07-25 437
2844. 生成特殊数字的最少操作
图论最短路径javascript代码
03-12
以下是一个使用Dijkstra算法求解图论最短路径的javascript代码： ```javascript function dijkstra(graph, startNode, endNode) { const distances = {}; const visited = {}; const previous = {}; const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员斯文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值