当前位置 博文首页 > zhtbs的博客：HTML+CSS+JavaScript 迷宫生成算法 【建议收藏】
最近发现很多人都在写算法类的博客，今天就献丑了使用HTML,CSS和JavaScript制作一个简单的迷宫生成小代码。证明了自己对一些简单的小算法还是可以驾驭的，基本功没有荒废。
迷宫生成有很多种算法，今天给大家展示的是钻孔法（道路延伸）。
钻孔法的特点
算法的特点是遇到墙壁才会生成道路，如果存在道路无法通过的墙壁死胡同，就会在墙壁周围生产道路。由此可以看出，这种迷宫生成方法倾向于围绕起点生成通道。换句话说迷宫以起点，到终点目标的正确路径是最短路径。这样的生产方式小型迷宫没有问题，但是当你创建一个大迷宫时，答案就变得很单调了。另外，通道是随机弯曲的，直线很少，所以如果你创建一个大迷宫，它会看起来很乱很复杂。
html构成
<div style="margin-bottom:10px;">
迷宫格子数
<input id="sumSize" type="text" value="20" style="width:30px;">
<button id="创建迷宫">创建迷宫</button>
</div>
<div id="zhtbs"></div>
墙壁生成Js算法
for (var i = 0; i < this.size; i++) {
var row = [];
this.box.push(row);
for (var j = 0; j < this.size; j++) {
// 第一行和最后一行是墙
if (i === 0 || (i + 1) === this.size) {
row.push(0);
// 第一列和最后一列也是墙壁
} else if (j === 0 || (j + 1) === this.size) {
row.push(0);
// 奇数行都是过路
} else if (i % 2 === 1) {
row.push(1);
// 偶数行墙壁和路交替排列
} else {
// 墙壁和路
row.push(j % 2);
}
}
}
第一行与最后一行全是墙壁
第一列与最后一列全是墙壁
奇数行都是路
偶数行墙壁和路交替出现
道路生成算法（钻孔法）
for (var r = 0; r < this.box.length; r++) {
// 第一行与最后一行 生成
if (r === 0 || (r + 1) === this.box.length) {
continue;
}
// 生成有墙的行
if (r % 2 === 1) {
continue;
}
// 获得行
var row = this.box[r];
// 初始化行，上下左右 参数
var direction = ['top', 'bottom', 'left', 'right'];
if (r >= 4) {
// 出了第一行，默认都是上
direction = direction.slice(1);
}
for (var i = 0; i < row.length; i++) {
//边缘不生成路
if (i === 0 || (i + 1) === row.length) {
continue;
}
// 获得处理墙
if (i % 2 === 0) {
// 随机排列墙的方向
direction = this.shuffle(direction);
// 随机向一个方向，生成路
// 在随机方向上去掉墙壁生成路
for (var j = 0; j < direction.length; j++) {
if (direction[j] === "top") {
if (this.box[r-1][i] === 1) {
this.box[r-1][i] = 0;
break;
}
}
if (direction[j] === "left") {
if (this.box[r][i-1] === 1) {
this.box[r][i-1] = 0;
break;
}
}
if (direction[j] === "right") {
if (this.box[r][i+1] === 1) {
this.box[r][i+1] = 0;
break;
}
}
if (direction[j] === "bottom") {
if (this.box[r+1][i] === 1) {
this.box[r+1][i] = 0;
break;
}
}
}
}
}
}
迷宫算法完整代码
<html>
<head>
<meta charset="UTF-8">
<title>Maze</title>
<style>
.maze {
}
.maze:after {
width: 0;
height: 0;
content: "";
clear: both;
}
.w {
background-color: blue;
width: 10px;
height: 10px;
padding: 0;
margin: 0;
float: left;
}
.p {
background-color: white;
width: 10px;
height: 10px;
padding: 0;
margin: 0;
float: left;
}
.s, .e {
background-color: yellow;
width: 10px;
height: 10px;
padding: 0;
margin: 0;
float: left;
}
</style>
<script>
</script>
<body>
<div style="margin-bottom:10px;">
迷宫格子数
<input id="sumSize" type="text" value
