1

私はパズルを作ることに着手しました.javascriptでシャッフル機能を作ろうとしています. ドキュメントをクリックすると、想定どおりにピースがシャッフルされます。しかし、紫色の正方形がグリッドの 1 番目の位置に移動しても、動きません!

これは私の HTML/Javascript です:

<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>

<div id="poster">

    <div id="row1">
        <div>
            <img src="images/black.gif" alt="" id="poster_place_1"/>
        </div>

        <div>
            <img src="images/blue.gif" alt="" id="poster_place_2" />
        </div>

        <div>
            <img src="images/brown.gif" alt="" id="poster_place_3"/>
        </div>
    </div>

    <div id="row2">    
        <div>
            <img src="images/cyan.gif" alt="" id="poster_place_4"/>
        </div>

        <div>
            <img src="images/darkgreen.gif" alt="" id="poster_place_5"/>
        </div>

        <div>
            <img src="images/green.gif" alt="" id="poster_place_6"/>
        </div>
    </div>

    <div id="row3">
        <div>
            <img src="images/orange.gif" alt="" id="poster_place_7"/>
        </div>

        <div>
            <img src="images/pink.gif" alt="" id="poster_place_8"/>
        </div>

        <div>
            <img src="images/purple.gif" alt="" id="poster_place_9"/>
        </div>
    </div>

</div>

<script type="text/javascript" charset="utf-8">


function Shuffle(o) {
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};


document.onclick = function()
{
    var testArray = ["poster_place_1","poster_place_2","poster_place_3","poster_place_4","poster_place_5","poster_place_6","poster_place_7","poster_place_8","poster_place_9"];
    Shuffle(testArray);
    document.getElementById("poster_place_9").id = testArray[0];
    document.getElementById("poster_place_8").id = testArray[1];
    document.getElementById("poster_place_7").id = testArray[2];
    document.getElementById("poster_place_6").id = testArray[3];
    document.getElementById("poster_place_5").id = testArray[4];
    document.getElementById("poster_place_4").id = testArray[5];
    document.getElementById("poster_place_3").id = testArray[6];
    document.getElementById("poster_place_2").id = testArray[7];
    document.getElementById("poster_place_1").id = testArray[8];

}
</script>

これはcssです：

#poster_place_1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

#poster_place_2 {
    position: absolute;
    left: 167px;
    top: 0px;
}

#poster_place_3 {
    position: absolute;
    left: 334px;
    top: 0px;
}

#poster_place_4 {
    position: absolute;
    left: 0px;
    top: 167px;
}

#poster_place_5 {
    position: absolute;
    left: 167px;
    top: 167px;
}

#poster_place_6 {
    position: absolute;
    left: 334px;
    top: 167px;
}

#poster_place_7 {
    position: absolute;
    left: 0px;
    top: 334px;
}

#poster_place_8 {
    position: absolute;
    left: 167px;
    top: 334px;
}

#poster_place_9 {
    position: absolute;
    left: 334px;
    top: 334px;
}
4

2 に答える 2

1

要素 ID を使用して画像の場所を保存しています。ただし、id は HTML 内で一意である必要があります。ID を再割り当てすると、一時的に重複する ID が同時に発生します。たとえば、testArray[0]poster_place_1 の場合、この行の後に

document.getElementById("poster_place_9").id = testArray[0];

HTML には poster_place_1 が 2 つあります。getElementByIdゲッターは最初に見つけたものを取得するように見えます.PurpleはHTMLの一番下にあるため、一連の呼び出しの最後にある場合(つまり、位置「poster_place_1」、左上)に置き換えられることはありません.これは、その上に poster_place_1 がある別の色があるか、既にその場所にあるためです。

2 つの変更を提案できます。最初に、ポジションの再割り当て用に一時的な ID を設定します。これにより重複が発生しなくなります。次に、すべての新しいポジションが割り当てられた後、それらを正しい ID に再度変更します。このデモでこれを行います。あなたの画像がないので、色は 51 から 59 までの数字に置き換えられます。一時的な名前は単なる番号です。

または、コードを再構築してclass、位置のid保存と色名の保存に使用することもできます。IDをクラスに直接一致させるため、一時変数は必要ありません。クラスを再割り当てするときのクロスブラウザーの混乱について警告する必要があります。私が見つけたいくつかのメソッドはclassName、クラスを追加および削除します（これは私には非常に複雑に思えます）。

于 2012-07-09T22:49:19.423 に答える
1 
....id = testArray[0];
document.getElementById("poster_place_8")...

新しい ID を割り当てた後で要素を選択しています。それはどのように機能しますか？最初にすべての要素を取得してから、すべての新しい ID を割り当てる必要があります。

var ids = [];
var els = [];
for (var i=1; i<10; i++) {
    var id = "poster_place_"+i;
    ids.push(id);
    els.push(document.getElementById(id));
}
shuffle(ids); // the function should be named lowercase, btw
for (var i=0; i<els.length; i++)
    els[i].id = ids[i];
于 2012-07-09T22:56:55.983 に答える