This is going to be one of the most important parts of the game, so I already have the game where the
aliens are moving.
We can also shoot, but we have no way of stopping them.
And once they reach the bottom, then it's game over and we've actually lost.
So we need a way to prevent the aliens reaching the bottom.
And that's going to be to shoot at them with our red ball that we have the red projectile that's coming
off of our ship.
So we need to be able to also detect to make sure that if this element that's containing the red ball,
which has a class of fire me whenever it hits one of the aliens to detect that if there's a collision
taking place and the way that we can detect collisions is we know that each one of these is a square.
So even though this one is represented as a circle, it's also still represented a square in JavaScript
because there's an element.
So it's got all of the different points where it's got the top left point.
That's going to be the zero zero point.
And then it's got the top right point.
It's got the bottom right point, and then the bottom left are the bottom left point and the aliens
have the same thing.
So each element has that.
And we're going to check to see if there's crossover from any one of these points to the other element.
And the best place to do this is as we're looping through the aliens so we don't have to loop through
them another time.
When we're going through the update, we can also check to see if a collision has taken place.
So as we go through here, we've already selected the element, the alien element, and we can check
at this point to see if there's a crossover between that alien and Fiame element.
So checking to see if is collide and we'll create that function.
We're going to pass in the two objects we're passing in the element which is the current alien.
So as we loop through, we're going to account for each one of the elements that has a class of alien.
And then Fiame element is the only one that's got the projectile and that's the one that we're moving
up here as well.
And in order to account for this, we need to consider where it's moving and its position.
So we're a check to see Fiame position as well as where it's top left and its corner position is.
So we're checking to see that.
And all of that is going to be done within a function called Is Cleide.
And if there is a collision, we're going to run the block a code for the collision.
But for now, we're just output into the console that we've got a hit.
So we have the ability to check through each one of the aliens as well as the projectile element and
see if there's any crossover.
So now let's add in our function for checking to see if a collision has taken place and we're going
to use that bounding client rectangle value that we saw earlier.
So we've got our Fiame object and if we get bounding client rectangle, so using the same method where
we got the positions of the container, we can see we've got a left position, our right position,
a top position and a bottom position.
So if we check this element and then we do the same thing for each one of the aliens as we're looping
through, and if we check the bottom position of the first rectangle against the top position of the
other rectangle, we know if there's any crossover or if the that one the top position of first one
is crossing over the bottom of the alien, then we know that there's been a hit on the vertical side.
I know this is a fairly complex to explain.
So the best thing to do is to just try that out and I'll show you with how it works within the code
format.
So we're passing in the two parameters, the element and the Fire Me object.
And this is also going to make it more dynamic.
As we know, this one's always firing me.
B is always the same element, but because we want the consistency in order to create a more dynamic,
if we add in more projectiles, then we're going to have flexibility on checking the collision detection
as well.
If Wacek collision on any other elements, we can just simply add it into the formula and check if there
is a collision.
So we're going to get our bounding client rectangle and then also another one for the B object.
The B element.
And taking be passing in that same method, bounding client rectangle.
So now we've got all of this information we've got it's essential where it's positioned, how wide it
is, X Y position of both of the elements.
So we're going to do to check.
We're going to check to see if there's no overlap and if there is no overlap or or negate that.
And that will turn into if there is overlap.
So let's work out this formula and it is going to be rather long.
So first, we're looking at the bottom of rectangle eight and we're checking to see if it's less than
the top of Rectangle B.
We're also going to check the opposite.
So this way, we're going to actually know if there's any overlaps or checking the top of rectangle
A against the bottom of rectangle.
So this is only going to paint part of the picture because this is going to be checking on the horizontal.
So we can also pass in and we can see that if the projectile is overtop of one of the aliens horizontally
or vertically, then this is going to come back.
And now because we've negated it, it will either come back as true if there is overlap.
So we also need to look at the horizontal, of course, and this formula is going to be looking to see
rectangle.
A right side is less than rectangle B left side.
So if there's overlap there and then we also need to check the opposite.
So we need to check rectangle a left, see if there's overlap and check to see if this is larger.
And actually this should be larger.
So we're checking to see if it's greater than Rectangle B right side.
There's overlap on the horizontal as well as we're checking to see the overlap on the vertical.
So I think we're ready to try that.
So we saw that as it passed through those elements.
The hit was registered.
I don't know if you saw that because we are moving rather quickly, but you see that whenever it passes
through those elements, it registers the hip.
So next, we need to take some type of action.
If this hit takes place, it will show how to do that.
In the upcoming lesson for this, make sure that you can check to see if there's a collision on two
different elements.
And if there is, then we're going to return back.
True.
And we can try that function where we're passing in the two parameters.
And we do have to we've got one called my ship as well as we've got the container.
So we're passing.
And we know that obviously the my ship is on top of the container, so the Cleide is coming back as
true.
So you could try that for yourself.
And if you take my ship and the other object that we have, the other element that we're connected to
is the start button.
So we can check to see if the my ship is on top of the start button, if there is a collision.
And so this one comes back as false because there's no overlap there.
You could try it on various elements on your page manually within the console if you want to check out
the functionality of the collision detection.