0

NxN のスライド タイル パズルの解を生成する JavaScript プログラムを作成しました。正しい解決策を見つけますが、解決策にたどり着くためにさまざまなパズル インスタンス間をアニメーション化するとなると、問題が発生します。最初 (3 ～ 4 ステップ) タイルは本来のように動きますが、一部のタイルが斜めに動き始め、他のタイルの上に移動します。ようやく解決策にたどり着きましたが、途中のアニメーションがうまくいきません。これが私のアニメーションループのコードです:

var steps = solution.length;
for (i=0; i<steps; i++) {


    next = solution.pop();
    // ANIMATE TILE
    var delay = speed*i;
        // sp is an array where the position (y, x) of the free spot is
    var spA = current.spacePos;     
    var spB = next.spacePos;
    var movingTile = current.box[spB[0]][spB[1]];
    var leftOffset = size*(spA[1]-spB[1]);
    var topOffset = size*(spA[0]-spB[0]);
    var thisTile = $('#tile'+movingTile);
    thisTile.delay(delay).animate({
        opacity: 1.0,
        top: "+=" + topOffset,
        left: "+=" + leftOffset
        }, speed);
    // Update for next round
    current = next;
};
4

1 に答える 1

1

次のアニメーションのタイミングを前のアニメーションの終了と正確に一致させたい場合 (そうしている場合)、 aを使用しdelay()て次のアニメーションをスケジュールすることはできません。代わりに、あるアニメーションの完了関数を使用して、次のアニメーションをトリガーする必要があります。そうして初めて、数百回の連続したアニメーションの後でも、タイミングが完璧になります。

次のようにできます。

var current = xxx;   // this has to get initalized (I'm not sure how in your code)
function goNext() {
    if (!solution.length) {
        return;
    }

    var next = solution.pop();
    // ANIMATE TILE
    // sp is an array where the position (y, x) of the free spot is
    var spA = current.spacePos;     
    var spB = next.spacePos;
    var movingTile = current.box[spB[0]][spB[1]];
    var leftOffset = size*(spA[1]-spB[1]);
    var topOffset = size*(spA[0]-spB[0]);
    var thisTile = $('#tile'+movingTile);
    var current = next;
    thisTile.animate({
        opacity: 1.0,
        top: "+=" + topOffset,
        left: "+=" + leftOffset
        }, speed, goNext);
}

goNext();
于 2012-08-16T21:21:42.707 に答える