1

私は、子供たちが質問に従って正しい数字を打たなければならない新しい「モグラたたき」スタイルのゲームを作成しています。

設定された上部の位置からランダムな幅で別の位置にアニメーション化する数値を持っているので、それらは泡のように浮かんでいるように見えます。

私が抱えている唯一の問題は、数字のグリッチとその幅が突然変化して、コンテナの一方の側からもう一方の側にジャンプしているように見えることです。

私が考えることができる唯一の説明は、幅が私が探していたどこかでリセットされているに違いないということです。

私が盲目であるか、それが何か他のものであるかのどちらかで、誰かが私が問題の原因を見つけるのを手伝ってくれるでしょうか。

これが数字をマッピングするコードです...

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom("char" + randomId);
}

function moveRandom(id) {
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css(
        'top', '400px'
    ).fadeIn(1000).animate({
    '   top': '-100px'
    }, 10000).fadeOut(1000);

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(1000, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(1000);
            window.cont++;
        }, 1000);
    });

これも動作中のフィドルなので、私が話している問題を確認できます：http: //jsfiddle.net/pUwKb/26/

4

1 に答える 1

0

問題は、すでにアニメーション化されているIDに対してmoveRandom関数を再入力していることです。新しい幅の計算により、すでにアニメーション化された動きの間に再割り当てされたときに、ピースがジャンプしているように見えます。これを修正する1つの方法は、既にアニメートしているピースの新しいピースの動きを拒否することです。jsFiddleを変更し、次のコードで修正しました。

// Keep track of the pieces actually moving
var currentMoving = [];

function moveRandom(id) {
    // If this one's already animating, skip it
    if ($.inArray(id, currentMoving) !== -1) {
        return;
    }

    // Mark this one as animating
    currentMoving.push(id);

    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css('top', '400px').fadeIn(1000).animate({
        'top': '-100px'
    }, 10000).fadeOut(1000);

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(1000, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(1000);

            // Mark this as no longer animating                
            var ix = $.inArray(id, currentMoving);
            if (ix !== -1) {
                currentMoving.splice(ix, 1);
            }

            window.cont++;
        }, 1000);
    });
}

ここで分岐したjsFiddle 。

編集：OPは、アニメーションを高速化せずに、一度により多くのdivを表示したいと考えていました。これを行うために、さらに20個のキャラクターdiv（それぞれ最初の10個の数字の複製）を追加し、ガードコードを少し修正し、クラスごとにキャラクターの画像を指定するようにCSSを変更してから、アニメーションの制限を20に設定しました。与えられた時間。また、別の作品を選ぶために、すでにアニメーション化された作品の拒否をループします。私は他のいくつかのマイナーな改善を行いました。ここでJSFiddleを更新しました。

于 2013-01-03T17:50:14.180 に答える