使用CSS動畫旋轉圖像之間的碰撞檢測

我正在使用CSS動畫和jQuery將汽車移動到十字路口（頂部視角）以模擬駕駛執照測驗。用戶必須通過點擊汽車來選擇穿越順序。使用CSS動畫旋轉圖像之間的碰撞檢測

示範圖片：

每節車廂都有特性，這樣，例如動畫：藍色的車右轉（從圖像不同）：

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

我沒有搞清楚事情如何檢測兩輛車是否因旋轉（轉彎）而發生碰撞。

播放按鈕功能：

$('#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」類的任何形式的碰撞？

我也想過計算矩形的每一個點，並檢查它們中的任何一點是否在另一個矩形（汽車）內。 但是我只能得到左上角的點而不是其他的。

任何解決方案？

在此先感謝！

來源

2013-11-23 Vig

解決使用JQuery重疊：http://plugins.jquery.com/overlaps/ – Vig

您是否會通過回答自己的問題分享解決方案？這樣，這個問題就結束了，將來會對更多的人有所幫助。 –

使用jquery/javascript來繪製汽車的動畫。使用css3動畫是檢測事件或檢測碰撞的非常糟糕的選擇。

[解決]

而使用jQuery使用下面插件容易地檢測。

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

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

[解決]

希望你已經明白了我的觀點。

來源

2014-02-28 07:39:30

這是什麼答案？你能爲它增加更多的價值嗎？一些解釋，例如？一些代碼？ –

使用CSS動畫旋轉圖像之間的碰撞檢測

回答

相關問題