1
00:00:00,150 --> 00:00:05,010
Hey, this is going to be an important lesson on collision detection, and we want to be able to check

2
00:00:05,010 --> 00:00:11,820
to see if two elements are intersecting, meaning if one element is overtop of the other element and

3
00:00:11,820 --> 00:00:14,700
we use get bounding rectangle before.

4
00:00:14,850 --> 00:00:19,170
And what that does is that outputs the parameters of an element.

5
00:00:19,320 --> 00:00:22,590
And as you can see, we get the left top, right bottom.

6
00:00:22,860 --> 00:00:27,780
And this is what we need in order to be able to determine if one element.

7
00:00:27,810 --> 00:00:34,680
So if we've got all of these values for one element, we can tell according to the position by a condition

8
00:00:34,830 --> 00:00:37,130
if another element is overlapping.

9
00:00:37,380 --> 00:00:40,500
So if there's any overlap, then we want to return back.

10
00:00:40,500 --> 00:00:40,920
True.

11
00:00:41,040 --> 00:00:42,580
So let's take a closer look at this.

12
00:00:42,720 --> 00:00:49,110
So what we need is we need to get two elements passed in and then we use and we get the dimensions of

13
00:00:49,110 --> 00:00:50,350
each one of those elements.

14
00:00:50,820 --> 00:00:57,870
So setting up our main function and we can create a function to detect the collision so we can call

15
00:00:57,870 --> 00:01:00,540
it is Cleide two ls there.

16
00:01:01,670 --> 00:01:06,170
And we need two parameters that are being passed in, so this is going to be the first element and B

17
00:01:06,170 --> 00:01:07,390
is going to be the second element.

18
00:01:07,400 --> 00:01:08,570
So we need both elements.

19
00:01:08,960 --> 00:01:16,850
And then using our client bounding rectangle, we'll get the bounding client rectangle of A and B. So

20
00:01:16,850 --> 00:01:19,820
checking and getting a rectangle.

21
00:01:19,820 --> 00:01:23,150
So it doesn't matter what element this is, it's always going to be a rectangle.

22
00:01:23,420 --> 00:01:29,480
And then we're going to use to get bounding client rectangle method in order to get the dimensions of

23
00:01:29,480 --> 00:01:29,710
that.

24
00:01:29,960 --> 00:01:33,740
And then next we're going to do B as well and get B.

25
00:01:34,850 --> 00:01:35,300
Get.

26
00:01:36,710 --> 00:01:43,550
And the same method, so that's going to return back within, we can now put into the console, so we've

27
00:01:43,550 --> 00:01:51,530
got the rectangle there and then also console log be rectangle so we can get both of those dimensions,

28
00:01:51,530 --> 00:01:59,630
output and also all going to disable the request animation frame so that we don't have it constantly

29
00:01:59,630 --> 00:02:02,780
running so we can output that collide.

30
00:02:02,990 --> 00:02:07,730
And I'm going to pass in the first Cleide so we can take a closer look at what's being output here.

31
00:02:07,970 --> 00:02:12,680
And the first Cleide is that we want to detect is when the ball is being moved.

32
00:02:12,860 --> 00:02:16,670
We want to check to see if it's collided with the paddle.

33
00:02:16,970 --> 00:02:19,010
So there's a number of places where we can place this.

34
00:02:19,010 --> 00:02:23,990
We can place it within the paddle movement as well as within the ball movement, because those are the

35
00:02:23,990 --> 00:02:26,000
two elements that we're going to be checking.

36
00:02:26,150 --> 00:02:32,000
And either one, it doesn't matter which one we're passing in into the collision detection, this is

37
00:02:32,000 --> 00:02:35,180
where we can check to see if a collision has occurred.

38
00:02:35,720 --> 00:02:38,540
And in this case, I'm going to do it within the ball movement.

39
00:02:38,720 --> 00:02:42,620
So whenever we've updated the ball, I'm going to do that within this position.

40
00:02:43,400 --> 00:02:45,890
So checking to see if we've got a collision.

41
00:02:46,250 --> 00:02:53,960
And the collision that we're checking to see is going to be the paddle, which is the player and ball,

42
00:02:54,200 --> 00:02:55,390
which is the ball.

43
00:02:56,570 --> 00:02:58,690
So try that and let's refresh.

44
00:02:58,700 --> 00:03:03,430
We'll start the game and we can see we get the dimensions for both of them being output.

45
00:03:03,860 --> 00:03:08,390
So right now we've got for the first one, whichever one that was that we passed in.

46
00:03:08,600 --> 00:03:10,300
So that would be the paddle.

47
00:03:10,310 --> 00:03:15,290
So with the paddle is positioned at left to 59, right.

48
00:03:15,290 --> 00:03:20,990
359, because we know it's 100 picks across and we can also see where the ball is positioned.

49
00:03:21,230 --> 00:03:26,080
So the ball is positioned at left 259 and right to 279.

50
00:03:26,450 --> 00:03:30,590
So we know that the on the horizontal plane, they have a collision.

51
00:03:30,740 --> 00:03:32,390
They don't have a collision on the vertical plane.

52
00:03:32,390 --> 00:03:34,100
So we look at the vertical position.

53
00:03:34,370 --> 00:03:40,610
We've got a bottom and a top position so we can use those to determine if there is a collision there

54
00:03:40,610 --> 00:03:41,120
as well.

55
00:03:41,120 --> 00:03:46,340
And of course, if both of them are colliding and overlapping, then we know that we've got our true

56
00:03:46,340 --> 00:03:46,910
collision.

57
00:03:47,270 --> 00:03:52,670
So let's go ahead and make this up to you to make this checked where we need to make sure that we're

58
00:03:52,670 --> 00:03:56,120
getting the collision coming back here for those two.

59
00:03:56,120 --> 00:04:01,430
And we're going to check to see the horizontal first, and then we're going to apply the vertical position,

60
00:04:01,790 --> 00:04:08,090
come to the console messages, as well as indicated that A is coming and as paddle and B is the ball

61
00:04:08,210 --> 00:04:10,850
so that we can take a closer look at what is being output.

62
00:04:11,090 --> 00:04:17,120
And we also need to enable that collision detection and enable the windows so we can move the paddle

63
00:04:17,240 --> 00:04:20,990
and take the is collide temporarily out of the ball area.

64
00:04:21,500 --> 00:04:26,180
And we're going to put into the paddle area so that we can check to see if the collision is occurring

65
00:04:26,180 --> 00:04:28,400
between the paddle and the ball.

66
00:04:28,880 --> 00:04:33,990
And we're going to create a temporary holder for this to check if the collision is happening and then

67
00:04:34,140 --> 00:04:35,390
put that into the console.

68
00:04:35,390 --> 00:04:43,010
So first of that, we want to check and we're going to check to see if a rectangle right side, because

69
00:04:43,010 --> 00:04:49,730
we do have these numbers to work with is less than B rectangle left side.

70
00:04:49,820 --> 00:04:52,040
And then also we're going to check the opposite.

71
00:04:52,430 --> 00:05:01,190
So checking to see if a rectangle left is greater than B rectangle right side.

72
00:05:01,430 --> 00:05:05,930
So this should cover the horizontal and then we can work on the vertical afterwards.

73
00:05:06,560 --> 00:05:07,640
So let's see what happens.

74
00:05:07,940 --> 00:05:13,580
And we are going to have to do something, make some minor adjustments, because as you can see, it's

75
00:05:13,580 --> 00:05:19,280
only going it's going false whenever we go on top of it and it's going through whenever we're outside

76
00:05:19,280 --> 00:05:19,520
of it.

77
00:05:19,730 --> 00:05:22,400
So there's one other thing that we need to do, and this is really important.

78
00:05:22,610 --> 00:05:24,590
We need to negate the results here.

79
00:05:24,950 --> 00:05:29,510
So now, instead of being false, whenever we're over top, we're going to hit true.

80
00:05:29,900 --> 00:05:36,200
And remember, again, to think of these as rectangles when we're getting the bound, bound and client

81
00:05:36,230 --> 00:05:41,600
rectangle, we get all of those positions so we can get the left position and the right position of

82
00:05:41,600 --> 00:05:44,780
the paddle and we can check it against the left in the right position.

83
00:05:44,990 --> 00:05:51,470
So we're looking at the far positions, if there's overlap there and far positions, if there's overlap

84
00:05:51,470 --> 00:05:51,920
there.

85
00:05:52,070 --> 00:05:55,100
And then we're taking that and we're negating that.

86
00:05:55,310 --> 00:05:59,420
So we only need to just do the same thing for the vertical position.

87
00:05:59,750 --> 00:06:04,910
And so we've got our tenth and let's update that and we'll create the vertical one so we can call this

88
00:06:04,910 --> 00:06:07,130
temp one and this one, temp two.

89
00:06:07,280 --> 00:06:12,650
And then we'll combine both statements and we'll have our total collision detection up and running.

90
00:06:13,100 --> 00:06:19,040
So I did want to break this down and take it relatively slowly through the process and the calculations

91
00:06:19,640 --> 00:06:22,040
as this can get fairly complex.

92
00:06:22,340 --> 00:06:27,710
So we're going to do relatively the same thing that we just did where we're going to check to see if

93
00:06:27,980 --> 00:06:32,900
a rectangle bottom is less than B rectangle top.

94
00:06:33,170 --> 00:06:35,630
So B again, is the ball A?

95
00:06:35,730 --> 00:06:43,020
Is the panel so we're checking to see if the bottom of the panel is less than the top of the ball,

96
00:06:43,200 --> 00:06:45,210
so we know that that's not going to be true.

97
00:06:45,390 --> 00:06:49,990
Next, we're going to check to see the rectangle top position.

98
00:06:50,700 --> 00:06:55,010
So this is an or so if any one of these is true, that's going to return back.

99
00:06:55,020 --> 00:06:55,550
True.

100
00:06:55,770 --> 00:06:59,900
And if it does return back true, then we're negating it.

101
00:06:59,910 --> 00:07:01,550
So we're turning it into false.

102
00:07:01,560 --> 00:07:08,640
And we're also checking to see if the bottom position of the ball larger than the top position of the

103
00:07:08,640 --> 00:07:09,210
rectangle.

104
00:07:09,240 --> 00:07:10,790
So here and here.

105
00:07:10,920 --> 00:07:13,650
So again, we're not going to have any overlap.

106
00:07:13,660 --> 00:07:15,600
So this is going to come back as false.

107
00:07:16,020 --> 00:07:17,030
So see what happens.

108
00:07:17,940 --> 00:07:24,240
So, see, it's constantly coming back as false, and until it moves over top of it, then that's what's

109
00:07:24,240 --> 00:07:24,870
going to come back.

110
00:07:24,870 --> 00:07:25,140
True.

111
00:07:25,170 --> 00:07:29,030
So just as we do have the horizontal, it's going to work the same way.

112
00:07:29,370 --> 00:07:35,460
So what we want to do is we want to just return back the results of this instead of outputting them.

113
00:07:35,770 --> 00:07:40,360
We're going to take those and we're going to simply return back the results of those.

114
00:07:41,220 --> 00:07:47,490
So if either one of these comes back as true, so we're gonna have another or in there and we're simply

115
00:07:47,490 --> 00:07:48,650
returning all of that.

116
00:07:48,900 --> 00:07:57,330
So let's refresh, start the game and we can actually get rid of this and update our collision detection.

117
00:07:58,900 --> 00:08:05,160
Within the ball, and we can have a condition here that if this is true, then we're going to take such

118
00:08:05,170 --> 00:08:05,860
perfection.

119
00:08:05,890 --> 00:08:11,950
So if then what we can do is for now, we're going to input output into the console and we just output

120
00:08:11,950 --> 00:08:15,610
hit just to make sure that everything is working as expected.

121
00:08:15,610 --> 00:08:18,730
And we need to add in the movement of the ball again.

122
00:08:18,850 --> 00:08:20,650
So refresh it, start the game.

123
00:08:20,920 --> 00:08:25,050
And we can see now whenever the collision occurs that we get the hit in the console.

124
00:08:25,300 --> 00:08:30,430
So that's exactly what we want to happen, because now we can take an action whenever there's that overlap,

125
00:08:30,430 --> 00:08:35,770
whenever the collision has happened, instead of writing hit, we update the direction, but we also

126
00:08:35,770 --> 00:08:38,020
have to update the horizontal direction as well.

127
00:08:38,230 --> 00:08:41,450
And this is going to be actually dependent on where we're hitting the paddle.

128
00:08:41,860 --> 00:08:45,720
So right now, no matter where we hit it, it's always going to just reverse direction.

129
00:08:46,030 --> 00:08:51,610
So we want to have a little bit more effect into this where we can change depending on where the paddle

130
00:08:51,610 --> 00:08:56,810
was hit, where the speed and inclination that the ball is heading.

131
00:08:57,280 --> 00:09:00,840
So we can make that adjustment by doing another quick calculation.

132
00:09:00,880 --> 00:09:03,370
OK, maybe not that quick and a little bit complex.

133
00:09:03,550 --> 00:09:09,940
So we're going to take the ball position of X and subtract the paddle offset so that we can figure out

134
00:09:09,940 --> 00:09:12,580
where the ball is landing on the paddle itself.

135
00:09:12,850 --> 00:09:16,390
And then we need to determine where the center of that paddle is.

136
00:09:16,570 --> 00:09:19,780
So we're going to take the paddle offset width and divide it by two.

137
00:09:19,990 --> 00:09:27,130
And this is going to give us a value where we can calculate or roughly estimate the where the ball has

138
00:09:27,130 --> 00:09:28,270
hit on the paddle.

139
00:09:28,480 --> 00:09:33,640
And depending on if it's more to the left or more to the right or more to the center, then that's how

140
00:09:33,640 --> 00:09:38,790
we're going to update the incline of how the ball is going to be traveling off the paddle hit.

141
00:09:39,130 --> 00:09:44,290
And it's probably a lot easier to see this in action than to be explaining it.

142
00:09:45,670 --> 00:09:52,300
And in order to calculate this as well, we're going to have to divide that total by 10 so that we get

143
00:09:52,510 --> 00:09:53,870
a lower number.

144
00:09:53,890 --> 00:09:55,640
So we're going to add that in as well.

145
00:09:55,840 --> 00:09:59,500
So let's apply this calculation and see how it works and I'll show you.

146
00:09:59,500 --> 00:10:02,020
And it's going to make a whole lot more sense afterwards.

147
00:10:02,230 --> 00:10:06,720
See, now the incline is slightly being adjusted, depending on where the ball hits the paddle.

148
00:10:06,760 --> 00:10:10,610
So either on the left, center or right and it looks like our ball went off the edge.

149
00:10:10,750 --> 00:10:12,880
So that's another thing that we need to take care of.

150
00:10:12,880 --> 00:10:18,250
And that's what we'll do in the upcoming lesson where we're going to handle the ball going off the edge,

151
00:10:18,250 --> 00:10:19,900
and then technically you're going to lose a life.

152
00:10:20,140 --> 00:10:21,640
So that's still all yet to come.

153
00:10:21,820 --> 00:10:24,790
And again, it is important to understand the collision detection.

154
00:10:24,910 --> 00:10:29,600
You're going to make use of this in a lot of different games and it comes in really super handy.

155
00:10:29,800 --> 00:10:35,860
So go ahead and try this out within your own project and make sure that you it is working and the collision

156
00:10:35,860 --> 00:10:38,880
is happening and you can be ready to move on to the next part.

157
00:10:39,100 --> 00:10:43,810
We're going to also need collision detection to detect if the ball has hit any one of these elements.

158
00:10:43,990 --> 00:10:47,980
And then we need to remove them from the page and also change the ball direction.

159
00:10:48,130 --> 00:10:49,600
So all of that is still yet to.