Ich verwende CSS-Animationen und jQuery, um Autos in einer Kreuzung (Ansicht von oben) zu bewegen und ein Führerschein-Quiz zu simulieren. Der Benutzer muss die Überfahrtsreihenfolge durch Anklicken der Fahrzeuge auswählen.

Beispielbild:

Jedes Auto hat Eigenschaften und eine Animation wie diese, zum Beispiel: Blaues Auto dreht sich nach RECHTS (anders als im Bild):

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

Die Sache, die ich nicht herausfinde, ist, wie ich feststellen kann, wenn zwei Autos kollidieren, da sie gedreht werden (drehen).

Funktion der Wiedergabetaste:

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

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

Crash-Funktion (nur bei roten und grünen Autos möglich, da diese sich nicht drehen):

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

Gibt es eine einfache Möglichkeit, Kollisionen zwischen Bildern der Klasse ".auto" zu erkennen?

Ich habe auch darüber nachgedacht, jeden Punkt des Rechtecks ​​zu berechnen und zu überprüfen, ob sich einer von ihnen in einem anderen Rechteck (Auto) befindet.Allerdings kann ich nur den Punkt oben links bekommen und nicht die anderen.

Irgendwelche Lösungen?

Danke im Voraus!