1
00:00:01,310 --> 00:00:06,900
So far, we've built out the basic structure of our game, we've got some enemies there and we need

2
00:00:06,900 --> 00:00:12,290
to be able to check to see if collisions are happening between the different elements on the page.

3
00:00:12,570 --> 00:00:17,390
I'm going to remove out all of the console messages, so save that so we don't have an overwhelming

4
00:00:17,390 --> 00:00:18,980
number of console messages.

5
00:00:19,100 --> 00:00:24,590
And we just want to simply detect if there's a collision taking place between the two elements.

6
00:00:24,590 --> 00:00:30,530
So the enemies and the current car creating a function, we're going to create a function to check,

7
00:00:30,530 --> 00:00:34,370
to see if it's collided call it is collide.

8
00:00:34,610 --> 00:00:42,920
And we're checking to see Element A versus Element B first, selecting our bounding client rectangle

9
00:00:42,920 --> 00:00:49,190
of eight, using the same function that we used earlier, where we get the bounding client rectangle

10
00:00:49,370 --> 00:00:53,770
that will give us all of the parameters that we need in order to detect that collision.

11
00:00:54,200 --> 00:01:02,480
And next, we can do rectangle and set that to the same thing where we're getting the bounding client

12
00:01:02,480 --> 00:01:03,740
rectangle method.

13
00:01:05,070 --> 00:01:12,330
So now we've got the overall top position, bottom position, right left position, and we need to make

14
00:01:12,330 --> 00:01:15,450
a determination if there's any overlap.

15
00:01:15,960 --> 00:01:22,230
So we're returning a value and we're checking to see if the overlap is positive.

16
00:01:22,230 --> 00:01:26,660
And if it is, then we're going to be returning back a value of false.

17
00:01:26,830 --> 00:01:28,290
But we want to show a value of true.

18
00:01:28,890 --> 00:01:29,730
So checking to see.

19
00:01:29,730 --> 00:01:35,850
And that's why we've got that negative there to negate the the true and turn it into a false value.

20
00:01:36,600 --> 00:01:39,600
If there's no collision and if there is a collision, then we're going to return back.

21
00:01:40,230 --> 00:01:41,850
We need to check all of the corners.

22
00:01:42,120 --> 00:01:50,430
So taking a rectangle and the bottom corner, we're going to check to see if the value of a rectangle

23
00:01:50,430 --> 00:01:56,970
bottom is less than the value of B rectangle top.

24
00:01:57,510 --> 00:02:02,980
So it's going to check the top corner of Rectangle B, bottom corner of rectangle eight.

25
00:02:03,210 --> 00:02:12,660
And so we know that if those are matching, we also want to check to see if there's an overlap rectangle

26
00:02:13,500 --> 00:02:18,920
top and if it's greater than B rectangle bottom.

27
00:02:18,930 --> 00:02:25,740
So that's going to take the other corners, the opposite corners and check those the other condition

28
00:02:25,740 --> 00:02:26,380
that we're checking.

29
00:02:26,400 --> 00:02:28,740
So we need to check the left and right position.

30
00:02:29,010 --> 00:02:33,270
So we're checking the top and bottom values to see if there's any overlap.

31
00:02:33,690 --> 00:02:38,360
And next, we're checking that a rectangle right position.

32
00:02:38,370 --> 00:02:41,450
And this is the opposite of the top and bottom.

33
00:02:41,460 --> 00:02:50,110
We're going to do the horizontal positioning and checking to see if it's less than B rectangle left.

34
00:02:50,160 --> 00:02:51,960
So see if there's any overlap there.

35
00:02:52,620 --> 00:02:56,540
And then there's one last value that we need to check to see if there's any overlap.

36
00:02:57,000 --> 00:03:05,550
So we need to check to see if rectangle A's left side is overlapping rectangle B's right side.

37
00:03:05,720 --> 00:03:12,500
So try that out and we need to send over those values and we can do that as we're moving the enemy.

38
00:03:12,900 --> 00:03:19,040
So we're looping through all of those enemies and we can also get the car value that's available here.

39
00:03:19,200 --> 00:03:22,520
So passing in the car object so we don't have to select it again.

40
00:03:23,040 --> 00:03:28,170
We're going to take that car value and make use of it within our loopier.

41
00:03:28,860 --> 00:03:38,190
So passing over those values, we're going to check to see if car and if item and if they are colliding,

42
00:03:38,190 --> 00:03:39,890
then we're going to put in the console.

43
00:03:40,110 --> 00:03:44,790
So we see that once they're overlapping, we get a hit in displayed in our console.

44
00:03:45,090 --> 00:03:47,220
And if there's no overlap, then we don't get anything.

45
00:03:47,250 --> 00:03:51,450
So now we know that we are able to detect the collision and this is the collision on each and every

46
00:03:51,450 --> 00:03:52,330
one of the enemies.

47
00:03:52,330 --> 00:03:56,100
But it actually doesn't matter which one we're hitting, we're always getting that collision because

48
00:03:56,100 --> 00:04:01,920
we do have that bounding box for the car and we also have the bounding box for the item.

49
00:04:01,980 --> 00:04:06,570
So once we have a collision, then that's where we need to stop the game and show the player that the

50
00:04:06,570 --> 00:04:09,570
game has been stopped and that they've hit and made a collision.

51
00:04:09,930 --> 00:04:11,820
So coming up next, we'll show you how to do that.

52
00:04:12,000 --> 00:04:19,830
So go ahead and add in the collision detection into your application using the get bounding client rectangle

53
00:04:20,040 --> 00:04:27,690
and checking the horizontal, as well as checking the horizontal, as well as the vertical top and bottom

54
00:04:27,690 --> 00:04:31,200
positions of both of those elements on the page.