Обнаружение столкновений между изображениями, повернутыми с использованием CSS-анимации
Я использую CSS-анимацию и jQuery для перемещения автомобилей на перекрестке (верхняя точка зрения) для имитации викторины о водительских правах. Пользователь должен выбрать порядок пересечения, нажимая на автомобили.
Образец изображения:
Например, у каждого автомобиля есть свои свойства и анимация: синий автомобиль поворачивает направо (отличается от изображения):
#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"?
Я также подумал о том, чтобы вычислить каждую точку прямоугольника и проверить, находится ли какая-либо из них внутри другого прямоугольника (автомобиля).Однако я могу получить только верхнюю левую точку, а не остальные.
Любые решения?
Заранее спасибо!