Phát hiện va chạm giữa các ảnh được xoay bằng hoạt ảnh CSS

Question

Tôi đang sử dụng hoạt ảnh CSS và jQuery để di chuyển ô tô ở ngã tư (điểm trên cùng) để mô phỏng bài kiểm tra giấy phép lái xe. Người dùng phải chọn đơn đặt hàng qua bằng cách nhấp vào ô tô. Hình ảnh

mẫu:

Mỗi chiếc xe có các đặc tính và một phim hoạt hình như thế này ví dụ: xe màu xanh chuyển RIGHT (khác với hình ảnh):

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

Điều tôi không tìm ra là làm thế nào tôi có thể phát hiện nếu hai chiếc xe va chạm kể từ khi họ được xoay (quay).

nút Play chức năng:

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

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

sụp đổ function (chỉ làm việc với những chiếc xe màu đỏ và màu xanh lá cây va chạm bởi vì họ không xoay):

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ó một cách dễ dàng để phát hiện bất kỳ loại va chạm nào giữa mọi hình ảnh có lớp ".uto"?

Tôi cũng nghĩ về việc tính toán mọi điểm của hình chữ nhật và kiểm tra xem có bất kỳ điểm nào trong số đó nằm bên trong hình chữ nhật khác (ô tô) hay không. Tuy nhiên, tôi chỉ có thể lấy điểm trên cùng bên trái chứ không phải các điểm khác.

Bất kỳ giải pháp nào?

Cảm ơn trước!

Answer 1

Sử dụng Jquery/javascript để vẽ hoạt ảnh của ô tô. sử dụng hoạt ảnh css3 là một lựa chọn rất tồi tệ trong việc phát hiện sự kiện hoặc phát hiện va chạm.

[SOLVED]

trong khi sử dụng jquery sử dụng plugin dưới đây để phát hiện dễ dàng.

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

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

[SOLVED]

hy vọng bạn đã hiểu điểm của tôi.