在动画期间防止重叠元素

时间:2013-04-02 10:33:33

标签: javascript jquery

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

数字在开始时给出一个随机的“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/

2 个答案:

答案 0 :(得分: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.

答案 1 :(得分:0)

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

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

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

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