Detecção de colisão entre imagens giradas usando animações CSS
Eu estou usando animações CSS e jQuery para mover carros em uma encruzilhada (ponto de vista superior) para simular um questionário de carteira de motorista. O usuário tem que escolher a ordem de cruzamento, clicando sobre os carros.
Imagem de amostra:
Cada carro tem propriedades e uma animação como esta, por exemplo: carro azul girando para a direita (diferente da imagem):
#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);
}
}
O que não consigo descobrir é como posso detectar se dois carros colidem desde que são girados (girando).
Função do botão Play:
$('#play').on('click', play);
function play(){
$('.auto').removeClass('selected');
$('#incrocio').addClass('animated');
interval = setInterval(crash,1);
}
Função de colisão (só funciona com colisão de carros vermelhos e verdes porque eles não rodam):
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);
}
}
Existe uma maneira fácil de detectar qualquer tipo de colisão entre todas as imagens que tem classe ".auto"?
Eu também pensei em calcular cada ponto do retângulo e verificar se algum deles está dentro de outro retângulo (carro).No entanto, só posso obter o ponto superior esquerdo e não os outros.
Alguma solução?
Desde já, obrigado!