Überlappende Elemente während der Animation verhindern

Question

Ich erstelle ein Additions- und Subtraktionsspiel, bei dem eine Summe zufällig generiert und am oberen Rand des Containers angezeigt wird. Zahlen animieren dann von unten nach oben und die Idee ist, auf die richtige zu klicken.

Den Zahlen wird am Anfang eine zufällige "x" Position gegeben und dann mit der gleichen Geschwindigkeit nach oben animiert.

Das Problem, das ich habe ist, dass wenn das Programm läuft die Elemente manchmal überlappen, weil sie eine ähnliche "x" -Position am Anfang gegeben werden.

Ich muss dem Programm mitteilen, dass es nicht die gleiche "x" -Position geben soll, bis das Element, das es verwendet, weit genug oben auf dem Bildschirm ist, damit sie sich nicht überlappen.

Das Problem ist am schlimmsten, wenn das Spiel beginnt. Hier

ist der entsprechende 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); 
    }); 
} 

Hier ist eine Geige - http://jsfiddle.net/pUwKb/68/

Answer 1

Hier ist eine einfache Lösung, nicht optimal though.

1/Markieren Sie Ihre Leinwand anstelle von random x mit Rastern und wählen Sie nur x offset als Vielfaches von 50px (Ihre Boxbreite), sodass eine Box von jedem der 12 Raster in Ihrer 600px-Leinwand gestartet werden kann.

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

2/Wenn ein Kasten in jedem Gitter gestartet wird, sperren, die Gitter für 1 Sekunde oder 2 Sekunden, so dass Ihr zufälliger Positionsgenerator für die neuen Boxen dieses Gitter nicht erzeugt, bis es gesperrt ist.

3/Nach einiger Zeit die Sperre für das Gitter löschen.

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

Code-Schnipsel Raster basiert x-Position zu erzeugen, statt der Zufalls x: [Zeilen 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; 
} 

Sperren und Entsperren des Rasters: [Zeilen 289-300]

Answer 2

Erweitern auf @ DhruvPathak-Lösung, wäre mein Vorschlag, ein anderes Array zu haben, um Objekte in Ihrer Startzone zu verfolgen, und wenn Sie eine zufällige Position wählen, überprüfen Sie ein Gewinnt alle Objekte in dieser Zone für Kollisionen.

Wenn Sie die Objekte animieren möchten, müssen Sie zwei Animationen miteinander verketten. Der erste würde das Objekt den ganzen Weg aus der Startzone nehmen und sich dann aus dem Array löschen und dann den ganzen Weg nach oben animieren. Wenn eine Kollision erkannt wird, besteht die einfachste Lösung darin, den Höhenunterschied zwischen dem neuen Objekt und dem kollidierten Objekt zu berechnen, um das neue Objekt etwas weiter unten zu platzieren.

Alles, was Sie dann tun müssen, ist die Animationsgeschwindigkeit entsprechend anzupassen, damit sie sich im Vergleich zu den anderen Objekten mit konstanter Geschwindigkeit bewegt, da Sie beliebige Entfernungen abdecken würden, um die Startzone im Vergleich zu der konstanten Entfernung zu verlassen jetzt haben.