Preventing overlapping elements during animation

Question

I am creating an addition and subtraction game where a sum is randomly generated and displayed at the top of the container. Numbers then animate from bottom to top and the idea is to click on the correct one.

Numbers are given a random "x" position at the start and then animate to the top at the same speed.

The problem I am having is that when the program is running the elements can sometimes overlap because they are given a similar "x" position at the start.

I need to tell the program not to give the same "x" position until the element using it is far enough up the screen for them to not overlap.

The problem is at it's worst when the game first starts.

Here is the relevant code...

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);
    });
}

Here is a fiddle - http://jsfiddle.net/pUwKb/68/

Answer 1

Here is a simple solution, not most optimal though.

1/ Instead of random x, mark your canvas with grids, and only chose x offset as multiple of 50px( your box width), so a box can be launched from any of 12 grids in your 600px canvas .

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

2/ When a box is launched in any grid, lock that grid for 1 second or 2 seconds, so that your random position generator for the new boxes, does not generate this grid till it is locked.

3/ After sometime,clear the lock for the grid.

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

Code snippet to generate grid based x position,instead of random x :[lines 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;
}

Locking and Unlocking the grid : [ lines 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.