Hey, this is going to be an important lesson on collision detection, and we want to be able to check
to see if two elements are intersecting, meaning if one element is overtop of the other element and
we use get bounding rectangle before.
And what that does is that outputs the parameters of an element.
And as you can see, we get the left top, right bottom.
And this is what we need in order to be able to determine if one element.
So if we've got all of these values for one element, we can tell according to the position by a condition
if another element is overlapping.
So if there's any overlap, then we want to return back.
True.
So let's take a closer look at this.
So what we need is we need to get two elements passed in and then we use and we get the dimensions of
each one of those elements.
So setting up our main function and we can create a function to detect the collision so we can call
it is Cleide two ls there.
And we need two parameters that are being passed in, so this is going to be the first element and B
is going to be the second element.
So we need both elements.
And then using our client bounding rectangle, we'll get the bounding client rectangle of A and B. So
checking and getting a rectangle.
So it doesn't matter what element this is, it's always going to be a rectangle.
And then we're going to use to get bounding client rectangle method in order to get the dimensions of
that.
And then next we're going to do B as well and get B.
Get.
And the same method, so that's going to return back within, we can now put into the console, so we've
got the rectangle there and then also console log be rectangle so we can get both of those dimensions,
output and also all going to disable the request animation frame so that we don't have it constantly
running so we can output that collide.
And I'm going to pass in the first Cleide so we can take a closer look at what's being output here.
And the first Cleide is that we want to detect is when the ball is being moved.
We want to check to see if it's collided with the paddle.
So there's a number of places where we can place this.
We can place it within the paddle movement as well as within the ball movement, because those are the
two elements that we're going to be checking.
And either one, it doesn't matter which one we're passing in into the collision detection, this is
where we can check to see if a collision has occurred.
And in this case, I'm going to do it within the ball movement.
So whenever we've updated the ball, I'm going to do that within this position.
So checking to see if we've got a collision.
And the collision that we're checking to see is going to be the paddle, which is the player and ball,
which is the ball.
So try that and let's refresh.
We'll start the game and we can see we get the dimensions for both of them being output.
So right now we've got for the first one, whichever one that was that we passed in.
So that would be the paddle.
So with the paddle is positioned at left to 59, right.
359, because we know it's 100 picks across and we can also see where the ball is positioned.
So the ball is positioned at left 259 and right to 279.
So we know that the on the horizontal plane, they have a collision.
They don't have a collision on the vertical plane.
So we look at the vertical position.
We've got a bottom and a top position so we can use those to determine if there is a collision there
as well.
And of course, if both of them are colliding and overlapping, then we know that we've got our true
collision.
So let's go ahead and make this up to you to make this checked where we need to make sure that we're
getting the collision coming back here for those two.
And we're going to check to see the horizontal first, and then we're going to apply the vertical position,
come to the console messages, as well as indicated that A is coming and as paddle and B is the ball
so that we can take a closer look at what is being output.
And we also need to enable that collision detection and enable the windows so we can move the paddle
and take the is collide temporarily out of the ball area.
And we're going to put into the paddle area so that we can check to see if the collision is occurring
between the paddle and the ball.
And we're going to create a temporary holder for this to check if the collision is happening and then
put that into the console.
So first of that, we want to check and we're going to check to see if a rectangle right side, because
we do have these numbers to work with is less than B rectangle left side.
And then also we're going to check the opposite.
So checking to see if a rectangle left is greater than B rectangle right side.
So this should cover the horizontal and then we can work on the vertical afterwards.
So let's see what happens.
And we are going to have to do something, make some minor adjustments, because as you can see, it's
only going it's going false whenever we go on top of it and it's going through whenever we're outside
of it.
So there's one other thing that we need to do, and this is really important.
We need to negate the results here.
So now, instead of being false, whenever we're over top, we're going to hit true.
And remember, again, to think of these as rectangles when we're getting the bound, bound and client
rectangle, we get all of those positions so we can get the left position and the right position of
the paddle and we can check it against the left in the right position.
So we're looking at the far positions, if there's overlap there and far positions, if there's overlap
there.
And then we're taking that and we're negating that.
So we only need to just do the same thing for the vertical position.
And so we've got our tenth and let's update that and we'll create the vertical one so we can call this
temp one and this one, temp two.
And then we'll combine both statements and we'll have our total collision detection up and running.
So I did want to break this down and take it relatively slowly through the process and the calculations
as this can get fairly complex.
So we're going to do relatively the same thing that we just did where we're going to check to see if
a rectangle bottom is less than B rectangle top.
So B again, is the ball A?
Is the panel so we're checking to see if the bottom of the panel is less than the top of the ball,
so we know that that's not going to be true.
Next, we're going to check to see the rectangle top position.
So this is an or so if any one of these is true, that's going to return back.
True.
And if it does return back true, then we're negating it.
So we're turning it into false.
And we're also checking to see if the bottom position of the ball larger than the top position of the
rectangle.
So here and here.
So again, we're not going to have any overlap.
So this is going to come back as false.
So see what happens.
So, see, it's constantly coming back as false, and until it moves over top of it, then that's what's
going to come back.
True.
So just as we do have the horizontal, it's going to work the same way.
So what we want to do is we want to just return back the results of this instead of outputting them.
We're going to take those and we're going to simply return back the results of those.
So if either one of these comes back as true, so we're gonna have another or in there and we're simply
returning all of that.
So let's refresh, start the game and we can actually get rid of this and update our collision detection.
Within the ball, and we can have a condition here that if this is true, then we're going to take such
perfection.
So if then what we can do is for now, we're going to input output into the console and we just output
hit just to make sure that everything is working as expected.
And we need to add in the movement of the ball again.
So refresh it, start the game.
And we can see now whenever the collision occurs that we get the hit in the console.
So that's exactly what we want to happen, because now we can take an action whenever there's that overlap,
whenever the collision has happened, instead of writing hit, we update the direction, but we also
have to update the horizontal direction as well.
And this is going to be actually dependent on where we're hitting the paddle.
So right now, no matter where we hit it, it's always going to just reverse direction.
So we want to have a little bit more effect into this where we can change depending on where the paddle
was hit, where the speed and inclination that the ball is heading.
So we can make that adjustment by doing another quick calculation.
OK, maybe not that quick and a little bit complex.
So we're going to take the ball position of X and subtract the paddle offset so that we can figure out
where the ball is landing on the paddle itself.
And then we need to determine where the center of that paddle is.
So we're going to take the paddle offset width and divide it by two.
And this is going to give us a value where we can calculate or roughly estimate the where the ball has
hit on the paddle.
And depending on if it's more to the left or more to the right or more to the center, then that's how
we're going to update the incline of how the ball is going to be traveling off the paddle hit.
And it's probably a lot easier to see this in action than to be explaining it.
And in order to calculate this as well, we're going to have to divide that total by 10 so that we get
a lower number.
So we're going to add that in as well.
So let's apply this calculation and see how it works and I'll show you.
And it's going to make a whole lot more sense afterwards.
See, now the incline is slightly being adjusted, depending on where the ball hits the paddle.
So either on the left, center or right and it looks like our ball went off the edge.
So that's another thing that we need to take care of.
And that's what we'll do in the upcoming lesson where we're going to handle the ball going off the edge,
and then technically you're going to lose a life.
So that's still all yet to come.
And again, it is important to understand the collision detection.
You're going to make use of this in a lot of different games and it comes in really super handy.
So go ahead and try this out within your own project and make sure that you it is working and the collision
is happening and you can be ready to move on to the next part.
We're going to also need collision detection to detect if the ball has hit any one of these elements.
And then we need to remove them from the page and also change the ball direction.
So all of that is still yet to.