11

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

数字在开始时被赋予一个随机的“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 的解决方案，我的建议是使用另一个数组来跟踪起始区域中的对象，并在选择随机位置时对该区域中的所有对象进行碰撞检查。

为对象设置动画时，您需要将两个动画链接在一起。第一个将对象从起始区域带出，然后将自身从数组中清除，然后一直动画到顶部。

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

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

于 2013-04-17T07:18:39.853 回答