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/

javascript jquery
Edit
Report