Rilevamento collisione tra immagini ruotate usando animazioni CSS

Question

Sto usando animazioni CSS e jQuery per spostare le auto in un incrocio (punto di vista superiore) per simulare un quiz di patente di guida. L'utente deve scegliere l'ordine di attraversamento facendo clic sulle vetture.

Immagine d'esempio:

Ogni auto ha proprietà e un'animazione come questo ad esempio: auto blu girare a destra (diverso da immagine):

#auto-b { 
    left: 320px; 
    top: 150px; 
    -webkit-transform: rotate(180deg); 
} 

.animated #auto-b { 
    -webkit-animation-name: move-b; 
    -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes move-b { 

    30% { 
     left: 260px; 
     top: 150px; 
     -webkit-transform: rotate(180deg); 
    } 
    60% { 
     left: 214px; 
     top: 120px; 
     -webkit-transform: rotate(270deg); 
    } 

    100% { 
     top: 30px; 
     left: 214px; 
     -webkit-transform: rotate(270deg); 
    } 
} 

La cosa non sto immaginando fuori è come posso rilevare se due macchine si scontrano da quando sono ruotate (girando).

funzione pulsante Play:

$('#play').on('click', play); 

function play(){  
    $('.auto').removeClass('selected'); 
    $('#incrocio').addClass('animated');  
    interval = setInterval(crash,1); 
} 

funzione Crash (funziona solo con le auto rosse e verdi di collisione perché non ruotano):

function crash(){ 

    var autoA = $('#auto-a').position();  
    var autoB = $('#auto-b').position(); 
    var autoC = $('#auto-c').position();  
    var top1 = autoA.top+10; 
    var top2 = autoA.top-10; 
    var left1 = autoA.left+10; 
    var left2 = autoA.left-10; 

    if (top1 > autoC.top && top2 < autoC.top && left1 > autoC.left && left2 < autoC.left) { 
     console.log("boom"); 
     $('#incrocio').removeClass('animated'); 
     alert("BOOM!"); 
     i = 1; 
     carsArray = []; 
     clearInterval(interval); 
    } 
} 

C'è un modo semplice per rilevare qualsiasi tipo di collisione tra ogni immagine che ha classe ".auto"?

Ho anche pensato di calcolare ogni punto del rettangolo e verificare se qualcuno di questi si trova all'interno di un altro rettangolo (auto). Tuttavia, posso solo ottenere il punto in alto a sinistra e non gli altri.

Qualche soluzione?

Grazie in anticipo!

Answer 1

Utilizzare Jquery/javascript per disegnare l'animazione delle auto. usare l'animazione css3 è una pessima scelta per rilevare eventi o per rilevare la collisione.

[risolto]

durante l'uso del jQuery usare il plugin di seguito per la facile individuazione.

http://plugins.jquery.com/overlaps/

http://yckart.github.io/jquery.overlaps.js/

[risolto]

sperando che avevano capito i miei punti.