Обнаружение столкновений между изображениями, повернутыми с помощью CSS-анимации

Я использую CSS-анимации и jQuery для перемещения автомобилей на перекрестке (верхняя точка зрения) для имитации викторины водительских прав. Пользователь должен выбрать порядок пересечения нажав на машинах.

Пример Изображения: http://i40.tinypic.com/717fc9.jpg

каждый автомобиль имеет свойства и анимацию, как это, например: синий автомобиль поворот направо (отличается от изображения):

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

есть ли простой способ обнаружить любое столкновение между каждым изображением, которое имеет класс".авто"?

Я также думал о вычислении каждой точки прямоугольника и проверке, находится ли какой-либо из них внутри другого прямоугольника (автомобиля). однако я могу получить только верхняя левая точка, а не другие.

какие решения?

спасибо заранее!

1 ответов


используйте jQuery / javascript для рисования анимации автомобилей. использование анимации css3 - очень плохой выбор для обнаружения событий или обнаружения столкновения.

[решена]

при использовании jquery используйте плагин ниже для легкого обнаружения.

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

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

[решена]

надеюсь, вы поняли моя точка зрения.