1

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入力から値を取得したいのですが、迷路が間違って見えます。入力に問題があるのか​​もしれませんが、ここには表示されません。

4

1 に答える 1

2

単純なエラー。この変更を行うだけです：

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/

于 2013-04-22T15:03:19.310 に答える