This lesson we're going to be checking to see if one element is on top of the other.
So we do have the element as a variable called item that we're utilizing as we're moving them.
And this is the best place to add in the collision detection.
So just after we've checked to see if the value of item X is less than zero and we've adjusted its position,
we should also check to see if there's been a collision.
So we're checking to see if it's collided and we're going to create this function.
So we need to pass in two elements.
And the two elements that we can pass in is item and bird.
So the item is the current piece of the obstacle and then the bird is the other one, the other element
that we're going to be checking against and then we're going to pass back and check to see if a crash
has happened.
And if it has, then we're going to put into the console that a crash has happened.
So next, let's create our function that we called is Cleide, and we're taking two elements and we're
just going to name them Element and A and B. So what we want to do is we want to get the area where
Element A is located and Element B is located as well, so that we can check to see where their bottom
position, their top position, they're right there left positions are.
So typically we could also use the element position and we could use the offset to get a value and then
we could add it with the width to get the other side and the same thing for the offset top.
And we could add the height and that would give us the bottom position.
And there's also actually an easier way to do that.
And that's using the get bounding client rectangle.
So let's pop over to model a developer network and we'll take a look at what is going to produce.
So we possin an element object and we use the method get bounding client rectangle.
And what it does is it returns the size of an element and its position relative to the viewport.
So it gives us a lot of useful information.
So you see the way that it's just being used, we need to specify an element and then this is where
we can get the different properties.
So properties that get returned are left top right, bottom x, y width and height.
So we could use these in our calculation to check to see if one is top on top of the other.
So first of all, let's get our position for Rectangle eight, checking to see if our get bounding client
rectangle values.
So get that information and we'll output into console's so we can take a better look at what's being
returned.
So going into the console, you can see that our output for the rectangle, I'll make this bigger,
we've got all of this information.
So on that particular element we've got, it's X, it's Y position, it's width, its height, its top.
So all of this information and we can utilize this to check to see if one is on top of the other.
So we're going to do the same thing for the other rectangle because we need to have both of those values
to do a proper comparison.
And I'll make this big.
So remember, again, what we're doing is we're checking to see if the bottom of one rectangle is less
than the top of the other and then the or if the top of the other is greater than the bottom of.
The second one, and I'm going to just write this out and then we'll go over it afterwards, so we want
to return a value because we want to use it within our condition.
So we're returning back and a value and this is where we can do our comparison.
So taking the values that we saw that were outputting.
So first we're using that object for a rectangle object and we're checking to see if the bottom of a
rectangle object is less than B rectangle top.
So if that's.
True, or if a rectangle top, so we need to see the other side as well and we're checking to see if
a rectangle top is greater than B rectangle bottom.
And there's also so that takes care of the vertical part.
We also need to check to see the horizontal part.
So checking to see if a rectangle will take the right side first is less than B rectangle.
Left side, so we're just doing the two opposite sides.
And if you're skeptical, this will work out mathematically.
So we're checking to see if a rectangle left is larger than B, a rectangle, and you guessed it right
side.
So let's see what gets returned here and we can output that return value.
So, first of all, console log that return value.
And before we try that, this one should have an object using the element, the B element, so that
we are properly comparing both of them.
And one last thing that we need to do before we try this out, and that's to negate it so that we are
returning back a true value.
And that means that we can actually check to see if there is overlap between the two elements.
Otherwise, we're going to be returning back the wrong value.
So if any one of these is true, then it's going to be returning back false.
So we want to negate all of that because we're including the orse.
So let's try that out.
And now when we press start, so next we need to just make a collision.
So C right now it's always being returned back false.
And then when I do go over top of it, you see that the crash is being output within the console.
So we are registering that overlap.
So getting rid of that console message.
Now we can just take a look at and we can see the crash happening.
I'm also going to adjust the speed so that things move a little bit faster so we don't have to wait
as long to get that crash happening.
So, again, try that out and hit the start button.
So we've got our bird and watch what happens when we go over top of any one of the pipes.
You see that we do have this crash happening.
So that means that we are detecting collisions and now next we need to do something when that collision
happens.
So that's coming up in the next lesson.
So for now, go ahead and add in the collision detection into your project and try it out.
So coming up next, we're going to handle the crash.