HTML
<div id="maze">
<form style="text-align:center" name="forma1">
<br><label>HEIGHT:</label><br>
<input type="text" id="height" name="height" autofocus="autofocus" maxlength="2" size="6" />
<br><label>WIDTH:</label><br>
<input type="text" id="width" name="width" maxlength="2" size="6" />
<br>
</form>
<input type="button" alt="submit" onClick="duom();" value="Generate" style="margin-top:10px;" >
</div>
<pre id="out"></pre>
JavaScript
function duom(){
var a = document.getElementById("height").value;
var b = document.getElementById("width").value;
document.getElementById('out').innerHTML = display(maze(a,b));
}
function maze(x,y) {
var n=x*y-1;
if (n<0) {alert("illegal maze dimensions");return;}
var horiz=[]; for (var j= 0; j<x+1; j++) horiz[j]= [];
var verti=[]; for (var j= 0; j<y+1; j++) verti[j]= [];
var here= [Math.floor(Math.random()*x), Math.floor(Math.random()*y)];
var path= [here];
var unvisited= [];
for (var j= 0; j<x+2; j++) {
unvisited[j]= [];
for (var k= 0; k<y+1; k++)
unvisited[j].push(j>0 && j<x+1 && k>0 && (j != here[0]+1 || k != here[1]+1));
}
while (0<n) {
var potential= [[here[0]+1, here[1]], [here[0],here[1]+1],
[here[0]-1, here[1]], [here[0],here[1]-1]];
var neighbors= [];
for (var j= 0; j < 4; j++)
if (unvisited[potential[j][0]+1][potential[j][1]+1])
neighbors.push(potential[j]);
if (neighbors.length) {
n= n-1;
next= neighbors[Math.floor(Math.random()*neighbors.length)];
unvisited[next[0]+1][next[1]+1]= false;
if (next[0] == here[0])
horiz[next[0]][(next[1]+here[1]-1)/2]= true;
else
verti[(next[0]+here[0]-1)/2][next[1]]= true;
path.push(here= next);
} else
here= path.pop();
}
return ({x: x, y: y, horiz: horiz, verti: verti});
}
function display(m) {
var text= [];
for (var j= 0; j<m.x*2+1; j++) {
var line= [];
if (0 == j%2)
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
line[k]= 'x';
else
if (j>0 && m.verti[j/2-1][Math.floor(k/4)])
line[k]= ' ';
else
line[k]= 'x';
else
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
if (k>0 && m.horiz[(j-1)/2][k/4-1])
line[k]= ' ';
else
line[k]= 'x';
else
line[k]= ' ';
if (0 == j) line[1]=line[3]=' ',line[2]= '1';
if (m.x*2-1 == j) line[4*m.y]= '2';
text.push(line.join('')+'\r\n');
}
return text.join('');
}
我正在尝试创建 JavaScript 迷宫生成器,它允许我在创建之前输入它的宽度和高度。但是我对来自 html 输入的值有疑问。例如,如果我在写document.getElementById('out').innerHTML = display(maze(15,20));
- 它工作正常!但我想从 html 输入中获取值,用它们迷宫看起来错误。也许输入有问题,但我在这里看不到。