So far, we've built out the basic structure of our game, we've got some enemies there and we need
to be able to check to see if collisions are happening between the different elements on the page.
I'm going to remove out all of the console messages, so save that so we don't have an overwhelming
number of console messages.
And we just want to simply detect if there's a collision taking place between the two elements.
So the enemies and the current car creating a function, we're going to create a function to check,
to see if it's collided call it is collide.
And we're checking to see Element A versus Element B first, selecting our bounding client rectangle
of eight, using the same function that we used earlier, where we get the bounding client rectangle
that will give us all of the parameters that we need in order to detect that collision.
And next, we can do rectangle and set that to the same thing where we're getting the bounding client
rectangle method.
So now we've got the overall top position, bottom position, right left position, and we need to make
a determination if there's any overlap.
So we're returning a value and we're checking to see if the overlap is positive.
And if it is, then we're going to be returning back a value of false.
But we want to show a value of true.
So checking to see.
And that's why we've got that negative there to negate the the true and turn it into a false value.
If there's no collision and if there is a collision, then we're going to return back.
We need to check all of the corners.
So taking a rectangle and the bottom corner, we're going to check to see if the value of a rectangle
bottom is less than the value of B rectangle top.
So it's going to check the top corner of Rectangle B, bottom corner of rectangle eight.
And so we know that if those are matching, we also want to check to see if there's an overlap rectangle
top and if it's greater than B rectangle bottom.
So that's going to take the other corners, the opposite corners and check those the other condition
that we're checking.
So we need to check the left and right position.
So we're checking the top and bottom values to see if there's any overlap.
And next, we're checking that a rectangle right position.
And this is the opposite of the top and bottom.
We're going to do the horizontal positioning and checking to see if it's less than B rectangle left.
So see if there's any overlap there.
And then there's one last value that we need to check to see if there's any overlap.
So we need to check to see if rectangle A's left side is overlapping rectangle B's right side.
So try that out and we need to send over those values and we can do that as we're moving the enemy.
So we're looping through all of those enemies and we can also get the car value that's available here.
So passing in the car object so we don't have to select it again.
We're going to take that car value and make use of it within our loopier.
So passing over those values, we're going to check to see if car and if item and if they are colliding,
then we're going to put in the console.
So we see that once they're overlapping, we get a hit in displayed in our console.
And if there's no overlap, then we don't get anything.
So now we know that we are able to detect the collision and this is the collision on each and every
one of the enemies.
But it actually doesn't matter which one we're hitting, we're always getting that collision because
we do have that bounding box for the car and we also have the bounding box for the item.
So once we have a collision, then that's where we need to stop the game and show the player that the
game has been stopped and that they've hit and made a collision.
So coming up next, we'll show you how to do that.
So go ahead and add in the collision detection into your application using the get bounding client rectangle
and checking the horizontal, as well as checking the horizontal, as well as the vertical top and bottom
positions of both of those elements on the page.