HTML+CSS+JavaScript 迷宫生成算法 建议收藏
Posted Zht_bs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JavaScript 迷宫生成算法 建议收藏相关的知识，希望对你有一定的参考价值。
最近发现很多人都在写算法类的博客，今天就献丑了使用html,CSS和javascript制作一个简单的迷宫生成小代码。证明了自己对一些简单的小算法还是可以驾驭的，基本功没有荒废。
迷宫生成有很多种算法，今天给大家展示的是钻孔法（道路延伸）。
- 1 首先将数组所有属性都设置成为墙。
- 2 进行道路挖掘，在数组中进行道路属性值设置。每次随机选择点打桩，在打桩数据旁边进行延伸路径，向上、向下、向左或向右看前方两个方格。如果那不是通道，则延长道路，如果无法延长道路，此时从现有道路中随机选择点（但 X 和 Y 坐标偶数的点）并延长道路。
- 3 重复步骤2的操作并用道路填满整个屏幕，完成迷宫。
钻孔法的特点
算法的特点是遇到墙壁才会生成道路，如果存在道路无法通过的墙壁死胡同，就会在墙壁周围生产道路。由此可以看出，这种迷宫生成方法倾向于围绕起点生成通道。换句话说迷宫以起点，到终点目标的正确路径是最短路径。这样的生产方式小型迷宫没有问题，但是当你创建一个大迷宫时，答案就变得很单调了。另外，通道是随机弯曲的，直线很少，所以如果你创建一个大迷宫，它会看起来很乱很复杂。
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="20" style="width:30px;">
<button id="创建迷宫" onclick="onRun()">创建迷宫</button>
</div>
<div id="zhtbs"></div>
<script>
function zht(size){
this.pagesum=size;
this.size = (size % 2 === 0 ? size + 1 : size);
this.box = [];
this.$maze = document.querySelector("#zhtbs");
this.ALGO = {STICK: 1};
this.shuffle =function (o) {
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
this.show = function () {
var snipet = '';
for (var i = 0; i < this.size; i++) {
for (var j = 0; j < this.size; j++) {
if (i == 0 && j == 1) {
//入口
snipet += '<div class="p"></div>';
}
else if (i==(this.pagesum%2==0?this.pagesum:this.pagesum-1) && j == (this.pagesum%2==0?this.pagesum-1:this.pagesum-2)) {
// 出口
snipet += '<div class="p"></div>';
}
else if (this.box[j][i] === 0) {
// 墙
snipet += '<div class="w"></div>';
}
else {
// 路
snipet += '<div class="p"></div>';
}
}
}
this.$maze.innerHTML = snipet;
this.$maze.style.height = (this.size * 10) + 'px';
this.$maze.style.width = (this.size * 10) + 'px';
}
this.create = function (options) {
options = options || {};
if (options.algorithm === this.ALGO.STICK) {
this._createByStick();
}
this.show();
}
this._createByStick = function () {
//初始化 墙与路生成
this.box = [];
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运用HTML+CSS+JavaScript实现扫雷游戏