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] === 1) {this.box[r+1][i] = 0;break;}}}}}}}
}
function onRun(){var size = parseInt(document.querySelector("#sumSize").value);
if (isNaN(size)) size = 20;
var z=new zht(size);z.create({algorithm: 1});
}
onRun();
</script>
</body>
</html>

HTML+CSS+JavaScript 迷宫生成算法【建议收藏】相关推荐

c语言迷宫深度遍历算法,图的遍历迷宫生成算法浅析
1. 引言在平常的游戏中,我们常常会碰到随机生成的地图.这里我们就来看看一个简单的随机迷宫是如何生成. 2. 迷宫描述随机生成一个m * n的迷宫,可用一个矩阵maze[m][n]来表示,如图: ...
[迷宫中的算法实践]迷宫生成算法——Prim算法
普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex (graph theory)), ...
迷宫生成算法和迷宫寻路算法
迷宫生成算法和迷宫寻路算法大学二年级的时候,作为对栈这个数据结构的复习,我制作了一个迷宫生成算法的小程序,当时反响十分好,过了几天我又用自己已经学的DirectX技术制作了DirectX版的程序.这 ...
C#三大迷宫生成算法
今天介绍一下很经典的三大迷宫算法的C#实现,即随机普利姆算法,深度优先算法和十字分割(也就是递归分割算法).实现参考了[ActionScript 3] 三大迷宫生成算法一文(生成的迷宫预览图也使用的该 ...
随机迷宫生成算法——深度优先算法
迷宫是我们小时候经常玩的游戏,如何用代码来快速生成上面这种迷宫呢? 迷宫算法有三大算法:深度优先算法.prim算法和递归分割算法.这里用的是深度优先算法,在此说一下算法思路,希望对各位有所帮助. 首先 ...
迷宫生成算法---深度优先算法(基于python)
迷宫生成算法---深度优先算法总体的目录版权及协议声明更加舒服的阅读方式一. 深度优先算法的原理与思路二．迷宫的制作迷宫的总体的创建. 三.代码的实现总体的目录版权及协议声明本文章遵 ...
随机迷宫生成算法——prime算法
本以为Prime迷宫生成算法和图论的Prime算法有什么关联,貌似并没有. Prime迷宫生成算法的原理: (1)初始地图所有位置均设为墙 (2)任意插入一个墙体进墙队列 (3)判断此时墙体是否可以设 ...
随机迷宫生成算法浅析
摘要本文对随机迷宫生成进行了初步的研究和分析,并给出了两种不同的生成算法.最终的算法结合了图的深度优先遍历.通过对比两种算法之间,可发现,在实际问题中,结合了离散数学的方法往往非更有效率且效果更佳. ...
android迷宫生成算法,【Unity算法实现】简单回溯法随机生成 Tile Based 迷宫
算法学习自作者eastecho 在IndieNova上发表的文章简单的使用回溯法生成 Tile Based 迷宫 , 我只是简单做了一下Unity的实现. 基础算法的简单说明简单说明一下算法步骤 ...

HTML+CSS+JavaScript 迷宫生成算法【建议收藏】

HTML+CSS+JavaScript 迷宫生成算法【建议收藏】相关推荐

最新文章

热门文章

HTML+CSS+JavaScript 迷宫生成算法 【建议收藏】

HTML+CSS+JavaScript 迷宫生成算法 【建议收藏】相关推荐

最新文章

热门文章

HTML+CSS+JavaScript 迷宫生成算法【建议收藏】

HTML+CSS+JavaScript 迷宫生成算法【建议收藏】相关推荐