CSSアニメーションを使用して回転された画像間の衝突検出

Question

私は運転免許のクイズをシミュレートするために、CSSアニメーションとjQueryを使用して交差点（トップビュー）で自動車を移動しています。ユーザーは車をクリックして交差順序を選択する必要があります。

サンプル画像：青い車（画像とは異なる）RIGHTを回し：

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

私は把握ませんよ事を

各車はプロパティおよび例えば、このようなアニメーションを持っています2台の車が回転（回転）してから衝突するかどうかをどのように検出できますか？

再生ボタン機能：

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

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

クラッシュ機能（彼らは回転しないので、唯一の赤と緑の車の衝突で動作）：

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

検出する簡単な方法はありますクラス ".auto"を持つすべてのイメージの間の任意の種類の衝突？

また、矩形の各点を計算し、それらのうちのどれかが他の矩形（車）内にあるかどうかを調べることも考えました。 しかし、私は左上の点しか得られず、他の点は得られません。

すべてのソリューションはありますか？

ありがとうございます！

Answer 1

Jquery/javascriptを使用して車のアニメーションを描画します。 css3アニメーションを使用すると、イベントを検出したり、衝突を検出したりすることは非常に悪い選択です。

jQueryの容易な検出のために以下のプラグインを使用して使用しながら

【解決しよう]。

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

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

あなたが私のポイントを理解していた期待して

を[SOLVED]。