Prevenzione degli elementi sovrapposti durante l'animazione

Question

Sto creando un gioco di addizione e sottrazione in cui una somma viene generata in modo casuale e visualizzata nella parte superiore del contenitore. I numeri quindi si animano dal basso verso l'alto e l'idea è di fare clic su quella corretta.

I numeri hanno una posizione "x" casuale all'inizio e quindi si animano verso l'alto alla stessa velocità.

Il problema che sto avendo è che quando il programma è in esecuzione gli elementi a volte possono sovrapporsi perché a loro viene data una posizione "x" simile all'inizio.

Ho bisogno di dire al programma di non dare la stessa posizione "x" fino a quando l'elemento che lo utilizza è abbastanza lontano sullo schermo affinché non si sovrappongano.

Il problema è nel momento peggiore all'inizio del gioco.

Ecco il codice in questione ...

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

Ecco un violino - http://jsfiddle.net/pUwKb/68/

Answer 1

Ecco una soluzione semplice, non più ottimale però.

1/Al posto di x casuali, contrassegna la tua tela con le griglie e scegli solo x scostamento come multiplo di 50px (la larghezza della casella), in modo che una casella possa essere lanciata da una qualsiasi delle 12 griglie nella tela 600px.

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

2/Quando una casella è lanciato in qualsiasi rete, bloccare quella griglia per 1 secondo o 2 secondi, in modo che il generatore di posizione casuale per le nuove caselle, non genera questa griglia finché non viene bloccato.

3/Dopo un po ', cancellare il blocco per la griglia.

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

Snippet di codice per generare posizione basata x griglia, invece di x Casualmente: [linee 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; 
} 

bloccare e sbloccare la griglia: [linee 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. 

Answer 2

Estendendosi alla soluzione di @ DhruvPathak, il mio suggerimento sarebbe di avere un altro array per tenere traccia degli oggetti nella zona di partenza e quando si sceglie una posizione casuale, controllare un guadagna tutti gli oggetti in quella zona per le collisioni.

Durante l'animazione degli oggetti è necessario concatenare due animazioni. Il primo dovrebbe rimuovere completamente l'oggetto dalla zona di partenza e quindi cancellarsi dall'array e quindi animare fino in cima.

Quando si verifica la presenza di collisioni, se viene rilevata una collisione la soluzione più semplice sarebbe quella di calcolare la differenza di altezza tra il nuovo oggetto e quello con cui è entrato in collisione al fine di posizionare il nuovo oggetto un po 'più in basso.

Tutto ciò che è necessario fare è regolare la velocità di animazione di conseguenza per farlo muovere ad una velocità costante rispetto agli altri oggetti come si tratterebbe di coprire distanze arbitrarie per uscire dalla zona di partenza rispetto alla distanza costante avere ora