JavaScript 迷宫

最新推荐文章于 2021-11-14 21:36:18 发布
最新推荐文章于 2021-11-14 21:36:18 发布
阅读量359 收藏 2
点赞数 1
分类专栏： 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waiguai80/article/details/99725055
版权

 

 

<html>
    <head>
        <style>
        #stage {
            border: 1px solid lightgray;
        }
        .rebuild {
            width:110px;
            height:30px;
            line-height: 30px;
            text-align: center;
            background-color:#000000;
            color:#fff;
            font-size: 18px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        </style>
    </head>
    <body>
        <table><tr>
          <td><canvas id="stage"></canvas></td>
          <td valign="top" style="padding:10px"> 
          
              <div class="rebuild">重新开始</div>  
              当前步数: <span id="goNum"></span> 
              <br><br>当前位置 <span id="XY">(x: 1,y: 1)</span>
              
              <br><br><input id="runBtn" type="button" value="自动寻路">
              <br><br><div id="autoOut"></div>
          </td></tr></table>
    </body>
    <script>
    var si = 4;
    var mapSize = 90;
    window.onload = function () {
        var stage = document.querySelector('#stage'),
            ctx = stage.getContext('2d');
        stage.width = si * (mapSize * 2 - 1);
        stage.height = si * (mapSize * 2 - 1);
        
        //取区域随机数x>=min && x<max
        function randInt(min, max) {
            max = max || 0;
            min = min || 0;
            var step = Math.abs(max - min);
            var st = (arguments.length < 2) ? 0 : min; //参数只有一个的时候，st = 0;
            var result;
            result = st + (Math.ceil(Math.random() * step)) - 1;
            return result;
        }
        
        //普里姆算法生成连通图的二维数组
        // row 行 column 列
        function primMaze(r, c) {
            //初始化数组
            function init(r, c) {
                var a = new Array(2 * r + 1);
                //全部置1
                for (let i = 0, len = a.length; i < len; i++) {
                    var cols = 2 * c + 1;
                    a[i] = new Array(cols);
                    for (let j = 0, len1 = a[i].length; j < len1; j++) {
                        a[i][j] = 1;
                    }
                }
                //a[0][1] = 0;
                a[a.length - 1][a[0].length - 2] = 0;
                //中间格子为0
                for (let i = 0; i < r; i++)
                    for (let j = 0; j < c; j++) {
                        a[2 * i + 1][2 * j + 1] = 0;
                }
                return a;
            }

            //处理数组，产生最终的数组
            function process(arr) {
                //acc存放已访问队列，noacc存放没有访问队列
                var acc = [],
                    noacc = [];
                var r = arr.length >> 1,
                    c = arr[0].length >> 1;
                var count = r * c;
                for (var i = 0; i < count; i++) {
                    noacc[i] = 0;
                }
                //定义空单元上下左右偏移
                var offs = [-c, c, -1, 1],
                    offR = [-1, 1, 0, 0],
                    offC = [0, 0, -1, 1];
                //随机从noacc取出一个位置
                var pos = randInt(count);
                noacc[pos] = 1;
                acc.push(pos);
                while (acc.length < count) {
                    var ls = -1,
                        offPos = -1;
                    offPos = -1;
                    //找出pos位置在二维数组中的坐标
                    var pr = pos / c | 0,
                        pc = pos % c,
                        co = 0,
                        o = 0;
                    //随机取上下左右四个单元
                    while (++co < 5) {
                        o = randInt(0, 5);
                        ls = offs[o] + pos;
                        var tpr = pr + offR[o];
                        var tpc = pc + offC[o];
                        if (tpr >= 0 && tpc >= 0 && tpr <= r - 1 && tpc <= c - 1 && noacc[ls] == 0) {
                            offPos = o;
                            break;
                        }
                    }
                    if (offPos < 0) {
                        pos = acc[randInt(acc.length)];
                    } else {
                        pr = 2 * pr + 1;
                        pc = 2 * pc + 1;
                        //相邻空单元中间的位置置0
                        arr[pr + offR[offPos]][pc + offC[offPos]] = 0;
                        pos = ls;
                        noacc[pos] = 1;
                        acc.push(pos);
                    }
                }
            }
            var a = init(r, c);
            process(a);
            return a;
            //返回一个二维数组，行的数据为2r+1个,列的数据为2c+1个
        }
        
        //栅格线条
        function drawGrid(context, color, stepx, stepy) {
            context.strokeStyle = color;
            context.lineWidth = 0.5;
            for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
                context.beginPath();
                context.moveTo(i, 0);
                context.lineTo(i, context.canvas.height);
                context.stroke();
            }
            for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
                context.beginPath();
                context.moveTo(0, i);
                context.lineTo(context.canvas.width, i);
                context.stroke();
            }
        }
        
        function createRect(x, y, r, c) {
            ctx.beginPath();
            ctx.fillStyle = c;
            ctx.rect(x, y, r, r);
            ctx.fill();
        }

        var region = 0; //可探索区域
        function update() {
            ctx.clearRect(0, 0, mapSize * si * 2, mapSize * si * 2);
            drawGrid(ctx, 'lightgray', si, si);
            var mapArr = primMaze(mapSize - 1, mapSize - 1);
            console.log(mapArr);
            //根据地图二维数组创建色块
            region = 0;
            for (var i = 0, len = mapArr.length; i < len; i++) {
                for (var j = 0, len1 = mapArr[i].length; j < len1; j++) {
                    if (mapArr[i][j]) {
                        createRect(i * si, j * si, si, "#999999");
                    }else{
                        region++;
                    }
                }
            }
            return mapArr;
        }
        
        function draw(x,y,c){createRect(x * si, y * si, si, c);}
        function drawMove(x,y){createRect(x * si, y * si, si, "#336666");md[x][y]=2; }
        function drawMove1(x,y){createRect(x * si, y * si, si, "#336666");}
        function clearMove(x,y){ctx.clearRect(x*si,y*si, si, si);}
        
        var md;
        var currentXY;
        var onceXY;
        var goNums = 0;
        var timeout = 10;
        var walk = 0;
        var Stop = true;
        function init(){
            document.getElementById("autoOut").innerHTML = "";
            md = update();
            currentXY = [1,1];
            document.getElementById("XY").innerHTML = "x: "+currentXY[0]+"&emsp;y: "+currentXY[1];
            onceXY = [1,1];
            goNums = 0;
            drawMove(currentXY[0],currentXY[1]);
            document.getElementById("goNum").innerHTML = goNums;
            control = true;
            walk = 0;
            pathList = [];
            Stop = true;
        }
        init();
        
        function moveIt(){
            if(!control)return;
            var oxy = [currentXY[0],currentXY[1]]; //记录原来位置
            var moveIs = true;
            switch (event.keyCode){
              case 37: currentXY[0]--; break;  // left
              case 38: currentXY[1]--; break;  // up
              case 39: currentXY[0]++; break;  // right
              case 40: currentXY[1]++; break;  // down
            }
            if(currentXY[0]>=md[0].length || currentXY[1]>=md.length){ // 重新开始
                clearMove(currentXY[0],currentXY[1]);
                init();
                return;
            }
            if(md[currentXY[0]][currentXY[1]]==1){moveIs=false;}             //有墙
            if(moveIs){
                clearMove(oxy[0],oxy[1]);              //清除原来位置的色块
                drawMove1(oxy[0],oxy[1]);              //留下印记
                if(md[currentXY[0]][currentXY[1]]==2){clearMove(onceXY[0],onceXY[1]);md[onceXY[0]][onceXY[1]]=0;} //曾经走过则清除上一次的印记
                drawMove(currentXY[0],currentXY[1]);   //画出新位置的色块
                goNums++;
            }else{
                currentXY=[oxy[0],oxy[1]]; //回原位
            }
            
            onceXY=[currentXY[0],currentXY[1]];
            
            document.getElementById("goNum").innerHTML = goNums;
            document.getElementById("XY").innerHTML = "x: "+currentXY[0]+"&emsp;y: "+currentXY[1];
        }
        var control = true;
        document.onkeydown = moveIt;
        document.querySelector('.rebuild').addEventListener('click', init);
        
        var pathList;        //当前路径
        var pathOkList;      //成功的路径
        var pathNode;        //分叉路口数
        var LukouList;

        function endAuto(){  //寻路成功回调
            var pathCount = pathOkList.length; //可行的路径条数
            var pNum = region;
            var zIndex = 0;  // 最短路径索引
           

            for(var i=0;i<pathOkList.length;i++){
               if(pathOkList[i].length<pNum){pNum=pathOkList[i].length;zIndex=i;}
            }
            
            var zdPath = pathOkList[zIndex];

            for(var j=0;j<zdPath.length;j++){       //画出最短路径
                 drawMove1(zdPath[i][0],zdPath[i][1]);
            }
            control = true;
        }
        
        function distance(p1,p2){ return Math.sqrt(Math.pow(p1[0]-p2[0],2)+Math.pow(p1[1]-p2[1],2));  };
        var clearPath = true;
        function autoFx(){
            if(Stop)return;
            var x = currentXY[0];
            var y = currentXY[1];
            var oxy = [currentXY[0],currentXY[1]]; //记录原来位置
            var wayout = 0;  
            if(md[x+1][y]==0){ wayout++;pathNode.push([x+1,y]); }
            if(md[x-1][y]==0){ wayout++;pathNode.push([x-1,y]); }
            if(md[x][y+1]==0){ wayout++;pathNode.push([x,y+1]); }
            if(md[x][y-1]==0){ wayout++;pathNode.push([x,y-1]); }

            var htmlStr = "已探索区域："+Math.round(walk/region*100) + "%";
            htmlStr += "<br><br> 有效步数: "+pathList.length;
            document.getElementById("autoOut").innerHTML = htmlStr;
            document.getElementById("XY").innerHTML = "x: "+currentXY[0]+"&emsp;y: "+currentXY[1];
            document.getElementById("goNum").innerHTML = goNums;
            
            var ts = function(){
                if(pathNode.length==0){endAuto(); return;}
                var lastGo = pathNode.pop();                            //取出上一个节点
                while(distance(lastGo,pathList[pathList.length-1])>1){  //清除无效路径
                    var p=pathList.pop();
                    setTimeout(clearMove(p[0],p[1]),timeout); 
                    draw(p[0],p[1],"#cccccc");
                }
                currentXY[0]=lastGo[0];                                 //从记录的新节点开始移动
                currentXY[1]=lastGo[1];      
                walk++;
                
                setTimeout(function(){autoFx()},timeout);               //自调用递归
            };

            if(x>=md[0].length-2 && y>=md.length-2){ //探索成功
                var ppi = pathOkList.length;
                pathOkList[ppi]=[];
                for(var i=0;i<pathList.length;i++){
                    pathOkList[ppi][i]=[];
                    pathOkList[ppi][i][0]=pathList[i][0];      // 记录成功路径
                    pathOkList[ppi][i][1]=pathList[i][1];
                }
                //if(pathNode.length>0){ ts(); }  // 还有未探索路径 继续探索
                endAuto(); 
            }

            if(wayout>0){  //有路走
                    goNums++;
                    pathList.push([x,y]);                // 记录当前路径
                    drawMove1(x,y);                      // 画路径
                    var newPath = pathNode.pop();        // 取出一个节点
                    currentXY[0] = newPath[0];
                    currentXY[1] = newPath[1];           // 移向节点
                    md[oxy[0]][oxy[1]]=2;                // 标记走过
                    walk++;
                    setTimeout(function(){autoFx()},timeout);               // 自调用递归
            }else{ //死路
                draw(oxy[0],oxy[1],"#cccccc");
                if(pathNode.length>0){
                    ts();
                }else{
                    
                    endAuto();  //没有分叉可走结束  
                }
            }
        }
        
        document.getElementById("runBtn").onclick = function(){
            if(!control) return;
            document.getElementById("autoOut").innerHTML = "";
            currentXY = [1,1];
            pathList=[];
            pathOkList=[];
            pathNode =[];
            walk = 0;
            control = false;
            Stop = false;
            autoFx();
        };
    };
    </script>
</html>

 

waiguai80
关注
专栏目录
javascript编写的迷宫小游戏
07-30
迷宫随机自动生成，自动寻路动态演示，显示当前步数和有效步数，代码有简单注释
迷宫代码javascript版（网页版）
09-14
javascript版迷宫代码，html网页形式，下载即可运行。 代码风格简练、结构清晰，总193行代码，核心是迷宫算法的实现。
javascript迷宫_Blockly Game之迷宫
weixin_39676034的博客
11-13 801
游戏介绍迷宫游戏总共有10个关卡，随着关卡等级的提高，积木会变多，难度也有相应的增加。游戏目的：了解方向积木、循环积木、以及判断积木的使用；游戏等级：1-10级；运行程序：单机可以执行积木脚本，积木脚本将控制企鹅运动，直到脚本执行完成或找到地图图标标志；方向积木：向左转、向右转；循环积木：重复执行直到，for或while循环；判断积木：如果前方可以通行，if or ifelse；分析实现积木定义旋...
JavaScript游戏作品---迷宫
01-06
JavaScript经典游戏作品---迷宫
利用javascript栈实现的迷宫游戏
qq_42445715的博客
11-14 3045
<!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</t.
migong.rar_javascript迷宫_走迷宫游戏_迷宫小游戏
09-22
【JavaScript迷宫游戏详解】 在IT领域，游戏开发是一项极具挑战性和创新性的任务，而JavaScript作为客户端编程的主要语言之一，常常被用来制作各种各样的网页交互应用，包括小游戏。"migong.rar"是一个利用...
maze.js:使用 HTML5 画布的 JavaScript 迷宫游戏
06-18
本文将深入探讨“maze.js”项目，一个利用 HTML5 画布技术构建的JavaScript迷宫游戏。通过这个项目，我们将了解如何利用 JavaScript 控制游戏逻辑，以及 HTML5 画布 API 来绘制和更新游戏画面。 首先，HTML5 画布是...
HTML5、JavaScript 迷宫游戏及源代码.zip
最新发布
08-08
迷宫游戏项目是使用 HTML5、CSS 和 JavaScript 开发的。玩家必须在给定的时间内逃离迷宫；即 30 秒，移动通过键盘控制完成（箭头键或 W、A、S、D 键用于移动）。每个级别都有不同的迷宫，这些迷宫是随机生成的。现在...
javascript迷宫小游戏源码
07-31
JavaScript迷宫小游戏是一种基于网页的互动游戏，利用JavaScript编程语言实现。JavaScript是Web开发中的重要脚本语言，常用于处理用户交互、动态内容更新以及页面的逻辑控制。在这个项目中，我们将探讨JavaScript...
跨越 JavaScript 迷宫：Python 爬虫处理动态页面的高级策略
07-07
Python 爬虫，通常被称为 Python Spider 或 Python Web Scraper，是一种使用 Python 编程语言编写的自动化脚本或程序，用于从互联网上的网站提取信息。这种程序可以访问网页，解析页面内容，并从中提取出有用的数据...
maze:使用 javascript 和 html5 完成的简单迷宫
06-26
描述 这是一个使用深度优先迷宫生成算法的简单迷宫游戏的网页。 在查看运行中的迷宫。 黑框是玩家，红框是目标。 播放按钮用于播放 - 玩家可以移动并尝试解决迷宫。 动画按钮用于动画迷宫生成算法。 灰色单元格代表任何回溯。 生成按钮用于生成另一个迷宫。 笔记 javascript 代码被分成三个不同的文件，以便于管理和理解。 script-min.js - 合并的所有 javascript 文件的缩小版本。 global.js - 用于调整迷宫单元大小或玩家大小、速度等的所有全局变量。 map.js - 所有地图生成和动画功能。 game.js - 执行实际绘制、更新、播放和清除游戏的主要功能。
【原创】javascript迷宫小游戏
12-03
自己写的javascript迷宫小游戏 用的是DFS+“凿墙法” 在chrome上面测试通过，IE用户可能要注意了，这个游戏可能不太支持IE
Js写的迷宫游戏，html直接运行
10-23
Js写的迷宫游戏，可使用键盘上的→←↑↓键进行游戏，控制主体各个方向上移动，游戏过程中会有适时的提示，告诉你不能向哪个方向走，觉得这个迷宫要比电脑版的简单，因为提示确实是太多了。
JS 迷宫 程序
12-11
HTML5 + JavaScript开发的迷宫类小程序，代码结构清晰
迷宫问题深度优先和广度优先，用js写的动态页面
05-12
用javascript写的一个迷宫动态网页程序，把栈和队列的深度优先和广度优先都应用了，自我感觉良好
由JavaScript版迷宫游戏引出Java版迷宫地图生成器
howard2005的专栏
01-14 1117
Java案例：迷宫地图生成器 一、引入问题 本期18软件1班网页脚本实训项目是完成一个JavaScript版迷宫游戏。 迷宫地图是如何生成的呢？很简单，将一个正方形区域等分为若干行与若干列，比如25行25列，这样就有625个单元格，用一个二维数组map[25][25]就可以保存625个单元格信息，map[i][j] = 1表示该单元格要绘制砖，而map[i][j] = 0表示该单元格不绘制砖。 ...
JavaScript学习笔记：迷宫游戏
howard2005的专栏
12-09 2256
JavaScript学习笔记：迷宫游戏 一、游戏运行效果 二、实现步骤 1、在HBuilder里创建项目MazeGame，添加maze.html 2、在脚本里设置顶边与底边的迷宫数组 <script type="text/javascript"> var maze = new Array(); var sides = new Array("Border-Top", "B...
Javascript: 迷宫与打地鼠
linwh8的博客
10-17 1832
github地址：小威威的github1.迷宫项目要求： 需求规格（50分） UI（10分）：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。 正常赢（10分）：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win” 碰墙输（10分）：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose” 重置结果（10分）：离开迷宫，墙
javascript解决迷宫求解问题
weixin_45353138的博客
05-28 1034
javascript解决迷宫求解问题 基本要求： 用户进入主界面，点击开始时，进入迷宫页面，点击随机迷宫生成一个随机迷宫，点击寻找路径一个物体从起点（1,1）开始动态显示，有探索过程（进去出来），到达终点探索到路径则在下方显示”找到路径”，点击正确路径则显示刚才探索路径中的正确路径（无进去出来过程），可以在console控制台动态显示坐标，再点击随机地图则创建一个新迷宫，依旧可以实现上面的功能，点击回到主界面则回到主界面。 算法思想 这是c语言的版本: 主要运用用栈的先进后出的思路进行迷宫求解 求解路
JavaScript艺术探索：从表单到3D迷宫
6. Building a 3D Maze with CSS and JavaScript: 展示了如何结合CSS和JavaScript构建三维迷宫游戏，涉及到3D渲染、事件处理和用户交互的设计。 7. Flickr and Google Maps Mashups: 讲述如何将Flickr的照片服务和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值