<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 = 8;
var mapSize = 40;
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+2, y * si+2, si-4, c);}
function drawMove(x,y){createRect(x * si+1, y * si+1, si-2, "#66aaff");md[x][y]=2; }
function drawMove1(x,y){createRect(x * si+2, y * si+2, si-4, "#3333ff");}
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]+" 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;}
纯JavaScript实现网页版迷宫游戏.rar （1个子文件） 
迷宫.html 13KB资源评论
2401_850053452024-05-19很不错的资源，感谢分享
- guangchengershen2024-04-28实在是宝藏资源、宝藏分享者！感谢大佬~
专业研究祖传Bug编写术
- 粉丝: 1w+
最新资源
- 基于ThreeJS的3D可视化纺织工厂示例
- 前端直接接入大华摄像头，网页显示实时视频
- iOS平台上的UTM虚拟机软件
- 心电信号基于Matlab心率检测
- 基于Python和Flask的在线教育平台设计代码
- 小猫咪翻墙炫彩版.exe
- iOS游戏开发入门与实践
- android apk反编译工具
- MODTRAN PcModwin 大气辐射传输计算工具
- TIA博途Data2Unified插件Add-inV3200V18版本
- Docker环境下部署Asp.net core应用的详细步骤
- 基于情感分析聚类分析LDA主题分析对服装产品类的消费者评论分析数据集代码
- 主动式数据库_Autonomous Database.pdf
- 桥式起重机防摇摆控制算法研究_白心阳_能控性_防摇摆_模糊控制_桥式起重机
- 机器图像算法赛道-云状识别
- 基于OpenMV的人脸识别门禁控制系统PDF
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
