My project involves using CSS animations and jQuery to create a simulation of cars moving at a crossroads from a top-down perspective for a driving license quiz. Users must select the order in which the cars will cross by clicking on them.
Sample Image:
Each car is defined with specific properties and animations. Here's an example of a blue car turning right (different from the image):
#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);
}
}
My challenge is detecting collisions between cars that are rotating.
Function for the play button:
$('#play').on('click', play);
function play(){
$('.auto').removeClass('selected');
$('#incrocio').addClass('animated');
interval = setInterval(crash,1);
}
Collision detection function (currently only works for collisions between red and green cars since they don't rotate):
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);
}
}
Is there a simple way to detect collisions between any images with the class ".auto"?
I have considered calculating each point of the rectangle and checking if any are inside another rectangle (car). However, I currently can only determine the top-left point.
Any suggestions or solutions would be greatly appreciated!
Thank you in advance!