JavaScript的迷宮發電機

Question

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輸入中獲得價值，他們迷宮看起來錯了。也許輸入有問題，但我在這裏看不到它。

Answer 1

簡單的錯誤。只是使這種變化：

function duom(){ 

    var a = parseInt(document.getElementById("height").value); 
    var b = parseInt(document.getElementById("width").value); 

    document.getElementById('out').innerHTML = display(maze(a,b)); 
} 

這裏的工作jsbin在迷宮看起來是正確的：http://jsbin.com/uwoyon/1/