1
00:00:00,180 --> 00:00:06,390
This is going to be one of the most important lessons of the section as we check for collision, we

2
00:00:06,390 --> 00:00:08,330
already created our main element.

3
00:00:08,340 --> 00:00:09,930
We can move it around the page.

4
00:00:10,170 --> 00:00:13,060
We also created a bunch of elements that are dropping.

5
00:00:13,350 --> 00:00:18,780
So the objective of the game is to really to move over all of these and catch these elements that are

6
00:00:18,780 --> 00:00:19,350
dropping.

7
00:00:19,380 --> 00:00:26,190
So we need to way to be able to detect and check to see if one element is overlapping the other element.

8
00:00:26,190 --> 00:00:33,900
And we already saw that we can use the get bounding client rectangle in order to get the boundaries

9
00:00:33,900 --> 00:00:36,440
of each one of the elements.

10
00:00:36,720 --> 00:00:44,910
So we've got a value for the basket, which we can utilize and we can check to see if it's overlapping

11
00:00:44,910 --> 00:00:46,260
with the different enemies.

12
00:00:46,560 --> 00:00:54,050
And the ideal spot to check is as we're moving them, we can check to see if a collision has taken place.

13
00:00:54,450 --> 00:01:00,480
So we'll set up a function that we can call is Cleide and we're going to pass in the basket object.

14
00:01:00,490 --> 00:01:05,970
So I know it's always going to be the Bostik object and then that element that is being moved.

15
00:01:06,150 --> 00:01:13,870
So this E represents the elements coming from the enemies that we selected, all of the elements with

16
00:01:13,870 --> 00:01:18,360
the class of body, and we placed it within a node list called Enemy.

17
00:01:18,540 --> 00:01:20,520
So that's all that we're passing in here.

18
00:01:20,640 --> 00:01:27,390
So E is representing the element and if a collision takes place, then we're taking the player score

19
00:01:27,390 --> 00:01:31,650
and we're going to update the player score and this is going to return back a boolean value that is

20
00:01:31,650 --> 00:01:32,070
Cleide.

21
00:01:32,100 --> 00:01:33,840
So it'll be either true or false.

22
00:01:34,020 --> 00:01:37,020
And then there's a few other functions that we can run as well.

23
00:01:37,140 --> 00:01:43,620
So this basically means that it is a collision so we can console log and for now we can output hit.

24
00:01:43,920 --> 00:01:48,560
It will also see the score updating and we also need to run that score function.

25
00:01:48,660 --> 00:01:50,630
So score output function.

26
00:01:50,730 --> 00:01:56,760
And this is the same one that every time we make an update to the score, we run this function in order

27
00:01:56,760 --> 00:01:59,510
to output that score value.

28
00:01:59,520 --> 00:02:02,120
So let's score update and that's not uppercase.

29
00:02:02,580 --> 00:02:03,720
So let me update that.

30
00:02:03,760 --> 00:02:06,690
So we run a score update and that updates the score.

31
00:02:07,290 --> 00:02:10,170
So let's create our collision detection function.

32
00:02:10,200 --> 00:02:17,730
So we called it is Cleide and we're passing in two parameters, is going to refer to them as A and B,

33
00:02:17,730 --> 00:02:20,880
so that represents each one of the elements that is Pastan.

34
00:02:20,910 --> 00:02:23,340
And we need to check to see if there's overlap.

35
00:02:23,730 --> 00:02:28,440
So let's create and get our a bounding client rectangle.

36
00:02:28,590 --> 00:02:34,950
And this is that same object that represents the top, the bottom, the width, the height, the left

37
00:02:34,950 --> 00:02:41,400
position and all of that great stuff that we need in order to compare to see if there's overlap between

38
00:02:41,400 --> 00:02:45,180
the elements and we're returning back a boolean value.

39
00:02:45,180 --> 00:02:49,950
So we're checking to see and we're going to negate it so within the object that we're returning.

40
00:02:49,950 --> 00:02:52,740
So it's got a number of conditions that we need to check.

41
00:02:53,010 --> 00:02:56,310
At first we're taking the object.

42
00:02:56,320 --> 00:03:03,540
So this is the basket that we're passing it and we're checking to see its bottom position is less than

43
00:03:03,540 --> 00:03:06,590
B rectangle top position.

44
00:03:06,630 --> 00:03:12,810
So looking at this numerically, we see that B rectangle top is not greater than a rectangle bottom.

45
00:03:13,110 --> 00:03:21,210
So the next check for the vertical is to check to see if a rectangle top is larger than B rectangle

46
00:03:21,210 --> 00:03:24,180
bottom, which is also not true in our example.

47
00:03:24,210 --> 00:03:32,010
So the picture this you need to assign values to the rectangle top and bottom and then see which one

48
00:03:32,010 --> 00:03:34,410
is larger and which one is less.

49
00:03:34,440 --> 00:03:40,500
So we also have to do the same thing for the horizontal axis where we're checking to see if a rectangle

50
00:03:40,500 --> 00:03:41,070
right.

51
00:03:41,250 --> 00:03:44,310
Is less than a B rectangle left.

52
00:03:44,310 --> 00:03:47,790
As you can see in our example, numerically, this is not true either.

53
00:03:48,120 --> 00:03:54,240
We're also checking to see if a rectangle left is larger than B rectangle.

54
00:03:54,240 --> 00:03:54,690
Right.

55
00:03:54,880 --> 00:03:58,590
Again, as we can see in the example, this is not true either.

56
00:03:58,590 --> 00:04:01,140
In this example, we're returning back false.

57
00:04:01,290 --> 00:04:03,480
But when we negate it, then it comes back.

58
00:04:03,480 --> 00:04:03,990
True.

59
00:04:03,990 --> 00:04:10,260
And as we can see in our example, there is overlap between the two elements and we can try it in our

60
00:04:10,260 --> 00:04:10,920
browser.

61
00:04:11,010 --> 00:04:17,160
And now within the console, we're going to write that there's a hit whenever any of them are over the

62
00:04:17,160 --> 00:04:17,640
other one.

63
00:04:19,140 --> 00:04:24,990
And I'm going to get rid of the other console messages to clarify this up, as we don't need to be tracking

64
00:04:24,990 --> 00:04:26,720
all of this information in the console.

65
00:04:27,090 --> 00:04:28,530
So let's try that one more time.

66
00:04:28,710 --> 00:04:34,020
And now you can see that whenever we're over the elements, we are registering the hits.

67
00:04:34,170 --> 00:04:36,950
So we see that the collision detection is working.

68
00:04:37,260 --> 00:04:41,190
So that's we need to take an action whenever that collision detection happens.

69
00:04:41,640 --> 00:04:44,640
So that means removing the element and updating the score.

70
00:04:44,820 --> 00:04:46,770
And we see those scores already updating.

71
00:04:47,040 --> 00:04:53,190
So next, we need to tweak this in order to update the score, remove the element from the page and

72
00:04:53,190 --> 00:04:54,750
create a brand new element.

73
00:04:54,750 --> 00:04:58,220
Subtract the number that are left, complete the game project.

74
00:04:58,380 --> 00:04:59,760
So that's all still yet to come.