当前位置：首页 > news >正文

网上商城建设方案/哈尔滨优化网站方法

news 2025/8/3 20:57:11

网上商城建设方案,哈尔滨优化网站方法,天津网站建设设计费用,公众号快速涨10000粉丝方法使用HTML,CSS和JavaScript制作一个简单的迷宫生成小代码。迷宫生成有很多种算法，今天给大家展示的是钻孔法（道路延伸）。 1 首先将数组所有属性都设置成为墙。2 进行道路挖掘，在数组中进行道路属性值设置。每次随机选择点打桩&am…

使用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>