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

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.

Answer 2

在@DhruvPathak的解决方案上进行扩展，我的建议是使用另一个数组来跟踪起始区域中的对象，以及选择对该区域中所有对象进行碰撞的随机位置检查。

在动画对象时，您需要将两个动画链接在一起。第一个将对象从出发区一直带走，然后从阵列中清除自己，然后一直动画到顶部。

检查碰撞时，如果检测到碰撞，最简单的解决方案是计算新物体与碰撞物体之间的高度差，以便将新物体放得更远。

然后您需要做的就是相应地调整动画速度，使其与其他对象相比以恒定速率移动，因为与您使用的恒定距离相比，您将覆盖任意距离以获得起始区域现在

在动画期间防止重叠元素

2 个答案:

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