在动画期间防止重叠元素

Question

我正在创建一个加法和减法游戏,其中随机生成一个总和并显示在容器的顶部.然后数字从下到上动画,想法是点击正确的.

数字在开始时被赋予随机的"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/

Answer 1

这是一个简单的解决方案,但并非最优化.

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.