JavaScript自动匹配自动寻路迷宫寻路资源-CSDN文库

共2个文件

php：1个

html：1个

JavaScript

需积分: 5 198 浏览量 2022-06-26 00:58:57 上传评论收藏 6KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

自动匹配.rar （2个子文件）

自动匹配

自动匹配.html 13KB

画界面.php 8KB

<html> <head> <style> #stage { border: 1px solid lightgray; width:842px; } .rebuild { width:82px; height:25px; 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:8px"> <div class="rebuild">重新开始</div> 步数: <span id="goNum"></span> <p></p>位置 <span id="XY">(x: 1,y: 1)</span> <p></p><input id="ssss" type="button" value="自动寻路"> <p></p><div id="autoOut"></div> </td></tr></table> </body> <script> var si = 8; var mapSize = 4; 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; // 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(); } } var region = 0; //可探索区域 function update() { ctx.clearRect(0, 0, mapSize * si * 2, mapSize * si * 2); // drawGrid(ctx, 'yellow', 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, "blue");// }else{ region++; } } } return mapArr; } function createRect(x, y, r, c) { ctx.beginPath(); ctx.fillStyle = c; ctx.rect(x, y, r, r); ctx.fill(); } // function draw(x,y,c){ //createRect(x * si+2, y * si+2, si-4, c); //} function drawMove(x,y){createRect(x * si+1, y * si+1, si-2, "red");md[x][y]=2; } // function drawMove1(x,y){createRect(x * si+2, y * si+2, si-4, "red");} // 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(); }; </script> </html>