An important part of any game that you're going to be developing is to be able to detect collision.
And in this case, we're checking to see if one element is overlapping the other element.
And the perfect place to do that is when we're moving the bombs, we've got the bomb element object
as item.
And this is where we can check to see if there's a collision.
So checking to see and we'll create a function called Is Cleide.
Passing in the item object and the other value that we're going to use as a default and we're going
to pass that in, and I know we can pick that up within the function because this is a global variable,
but we're passing it in anyway so we can keep the function as in taking the two elements where we can
compare the two parameters.
So we're checking to see if a collision has happened, if there's an overlap between these elements
and depending on what gets returned, if it gets returned back.
True, then we're going to say that there is a clue.
So for now, we can just call it crash.
So now whenever there's an overlap, it's going to output into the console that we've got a crash.
So let's create our function.
So is Cleide is going to take two parameters.
So it's the two elements.
And we're going to check all of the sides of those elements and we're going to use a method called get
bounding client rectangle.
And what that does is that that gets all of the positioning of an element.
So get bounding rectangle method and we'll output that value within the console.
So you can see what it looks like and you can see all the numbers and values that we're going to get.
We drop a bomb, we're getting this collision check, and right now we're not returning anything back
from the function.
So we're not going to get our true.
But you can see what values we're getting here within the get bounding client rectangle method.
And this is returning back.
Our bottom position are right, left, right, top with X, Y, so we don't have to calculate anything.
And a lot of times you're going to see within the collision detection that we're taking the left position,
we're adding in the width and that gives us the right position.
And we're doing the same thing for the getting the top position, taking the height.
And then that's going to give us the bottom position so that all of these numbers you're going to see
a lot of times that people will calculate those out and using the get bounding rectangle makes things
way simpler.
So what we want to do for each one of those elements, we want to get that bounding client rectangle.
So that's going to give us all of the values that we need to make this bigger.
So we want to return a value from the collision detection and we're going to bracket around it.
So within here is where we do all of the comparisons, so taking a comparison of and this actually should
be for Element B, so it gives us the two values.
So we've got four element A and four B, we've got that bounding box.
So taking the value of this object, we can get we have a value for bottom and we're comparing to C,
so this is along the vertical line that we're checking to see if the rectangle bottom is less than the
rectangle type of element beat.
And we're also checking to see if a rectangle top is greater than B rectangle bottom and if these values.
Are true, then that means that we do have an overlap, so look at the value here for the bottom and
then this bottom.
So that means that rectangle top is going to be overlapping and we've got to do the same thing for the
horizontal part.
So the same thing that we did over here.
We're checking to see if rectangle a right side.
Is less than the left side of Rectangle B and also if rectangle A left side.
And if it's greater than rectangle B right side, any of these are true.
We're returning back a value of true.
And let's log this out into the console so we can take a closer look at what's being returned back whenever
we do have a collision or an overlap of the different elements.
Let's try that out.
So now when I drop the bomb on top of it, we see it's coming back.
True.
Let's get rid of some of these other console messages that we have and try that one more time.
So we're coming back.
True.
And then if we are on top, it's coming up back false.
So we need to negate that.
So let's try that one more time.
And now we see that when we are coming back, true.
We're getting the value of crash.
So that's actually the value that we wanted.
So we can retrieve and remove out the console messages and we're getting a value of true.
Now, if there is overlap and so now whenever it's overlapping, we're getting the value of crash.
So that's exactly what we want to happen.
So go ahead and add in this value the get bounding client rectangle and do the collision detection.
And now that we know that there's been a collision, then we can adjust some of the scoring values as
well as we can remove out that base and recreate a brand new base.
And that's all coming up in the next lesson.