This is going to be one of the most important lessons of the section as we check for collision, we
already created our main element.
We can move it around the page.
We also created a bunch of elements that are dropping.
So the objective of the game is to really to move over all of these and catch these elements that are
dropping.
So we need to way to be able to detect and check to see if one element is overlapping the other element.
And we already saw that we can use the get bounding client rectangle in order to get the boundaries
of each one of the elements.
So we've got a value for the basket, which we can utilize and we can check to see if it's overlapping
with the different enemies.
And the ideal spot to check is as we're moving them, we can check to see if a collision has taken place.
So we'll set up a function that we can call is Cleide and we're going to pass in the basket object.
So I know it's always going to be the Bostik object and then that element that is being moved.
So this E represents the elements coming from the enemies that we selected, all of the elements with
the class of body, and we placed it within a node list called Enemy.
So that's all that we're passing in here.
So E is representing the element and if a collision takes place, then we're taking the player score
and we're going to update the player score and this is going to return back a boolean value that is
Cleide.
So it'll be either true or false.
And then there's a few other functions that we can run as well.
So this basically means that it is a collision so we can console log and for now we can output hit.
It will also see the score updating and we also need to run that score function.
So score output function.
And this is the same one that every time we make an update to the score, we run this function in order
to output that score value.
So let's score update and that's not uppercase.
So let me update that.
So we run a score update and that updates the score.
So let's create our collision detection function.
So we called it is Cleide and we're passing in two parameters, is going to refer to them as A and B,
so that represents each one of the elements that is Pastan.
And we need to check to see if there's overlap.
So let's create and get our a bounding client rectangle.
And this is that same object that represents the top, the bottom, the width, the height, the left
position and all of that great stuff that we need in order to compare to see if there's overlap between
the elements and we're returning back a boolean value.
So we're checking to see and we're going to negate it so within the object that we're returning.
So it's got a number of conditions that we need to check.
At first we're taking the object.
So this is the basket that we're passing it and we're checking to see its bottom position is less than
B rectangle top position.
So looking at this numerically, we see that B rectangle top is not greater than a rectangle bottom.
So the next check for the vertical is to check to see if a rectangle top is larger than B rectangle
bottom, which is also not true in our example.
So the picture this you need to assign values to the rectangle top and bottom and then see which one
is larger and which one is less.
So we also have to do the same thing for the horizontal axis where we're checking to see if a rectangle
right.
Is less than a B rectangle left.
As you can see in our example, numerically, this is not true either.
We're also checking to see if a rectangle left is larger than B rectangle.
Right.
Again, as we can see in the example, this is not true either.
In this example, we're returning back false.
But when we negate it, then it comes back.
True.
And as we can see in our example, there is overlap between the two elements and we can try it in our
browser.
And now within the console, we're going to write that there's a hit whenever any of them are over the
other one.
And I'm going to get rid of the other console messages to clarify this up, as we don't need to be tracking
all of this information in the console.
So let's try that one more time.
And now you can see that whenever we're over the elements, we are registering the hits.
So we see that the collision detection is working.
So that's we need to take an action whenever that collision detection happens.
So that means removing the element and updating the score.
And we see those scores already updating.
So next, we need to tweak this in order to update the score, remove the element from the page and
create a brand new element.
Subtract the number that are left, complete the game project.
So that's all still yet to come.