11

合計がランダムに生成され、コンテナーの上部に表示される加算と減算のゲームを作成しています。数字は下から上にアニメーション化され、アイデアは正しいものをクリックすることです.

数字は最初にランダムな「x」の位置が与えられ、同じ速度で一番上までアニメーション化されます。

私が抱えている問題は、プログラムが実行されているときに、開始時に同様の「x」位置が与えられるため、要素が重複することがあるということです。

同じ「x」位置を使用する要素が画面上で重ならないようになるまで、同じ「x」位置を指定しないようにプログラムに指示する必要があります。

問題は、ゲームの最初の開始時に最悪です。

ここに関連するコードがあります...

var currentMoving = [];

function moveRandom(id) {

    // 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', '395px').fadeIn(100).animate({
        'top': '-55px'
    }, AnimationSpeed,'linear').fadeOut();

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

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

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

ここにフィドルがあります - http://jsfiddle.net/pUwKb/68/

4

2 に答える 2

5

これは簡単な解決策ですが、最適ではありません。

1/ランダムなxの代わりに、キャンバスをグリッドでマークし、xオフセットのみを50pxの倍数（ボックス幅）として選択して、600pxキャンバスの12個のグリッドのいずれからでもボックスを起動できるようにします.

|1|2|3|4|5|6|7|8|9|10|11|12

2/ ボックスが任意のグリッドで起動されたら、そのグリッドを 1 秒または 2 秒間ロックして、新しいボックスのランダム位置ジェネレーターがロックされるまでこのグリッドを生成しないようにします。

3/ しばらくしてから、グリッドのロックを解除します。

http://jsfiddle.net/pUwKb/72/

ランダムな x の代わりに、グリッド ベースの x 位置を生成するコード スニペット: [230-238 行]

function randomFromToPosition(from, to) {
    /* align boxes in grids instead of random positions */
    do {
    var pos = Math.floor(Math.random() * (to - from + 1) + from);
    var roundedPos = Math.floor(pos/50)*50;
    } while(lockedGrid[roundedPos] == true);
   
    return roundedPos;
}

グリッドのロックとロック解除: [289-300 行目]

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

        lockedGrid[newWidth] = true; // Lock the grid position
        setTimeout(function(){
            delete lockedGrid[newWidth];
        },2000);      // free the lock after 2 seconds.
于 2013-04-02T10:57:23.473 に答える
0

@DhruvPathakのソリューションを拡張して、私の提案は、開始ゾーン内のオブジェクトを追跡し、衝突のためにそのゾーン内のすべてのオブジェクトに対してランダム位置チェックを選択するときに、別の配列を持つことです。

オブジェクトをアニメーション化するときは、2 つのアニメーションを連鎖させる必要があります。1 つ目は、オブジェクトを開始ゾーンから完全に取り出し、配列からそれ自体をクリアしてから、一番上までアニメーション化します。

衝突をチェックするとき、衝突が検出された場合、最も簡単な解決策は、新しいオブジェクトと衝突したオブジェクトの高さの差を計算して、新しいオブジェクトを少し下に配置することです。

その後、アニメーション速度を調整して、他のオブジェクトと比較して一定の速度で移動するようにするだけです。これは、現在の一定の距離と比較して、開始ゾーンから出るために任意の距離をカバーすることになるためです。

于 2013-04-17T07:18:39.853 に答える