1
00:00:00,090 --> 00:00:04,770
An important part of any game that you're going to be developing is to be able to detect collision.

2
00:00:05,010 --> 00:00:10,170
And in this case, we're checking to see if one element is overlapping the other element.

3
00:00:10,440 --> 00:00:16,860
And the perfect place to do that is when we're moving the bombs, we've got the bomb element object

4
00:00:17,070 --> 00:00:18,090
as item.

5
00:00:18,090 --> 00:00:20,980
And this is where we can check to see if there's a collision.

6
00:00:21,450 --> 00:00:25,170
So checking to see and we'll create a function called Is Cleide.

7
00:00:26,370 --> 00:00:32,040
Passing in the item object and the other value that we're going to use as a default and we're going

8
00:00:32,040 --> 00:00:36,930
to pass that in, and I know we can pick that up within the function because this is a global variable,

9
00:00:37,350 --> 00:00:42,900
but we're passing it in anyway so we can keep the function as in taking the two elements where we can

10
00:00:43,140 --> 00:00:44,430
compare the two parameters.

11
00:00:44,700 --> 00:00:49,770
So we're checking to see if a collision has happened, if there's an overlap between these elements

12
00:00:50,220 --> 00:00:53,640
and depending on what gets returned, if it gets returned back.

13
00:00:53,640 --> 00:00:56,730
True, then we're going to say that there is a clue.

14
00:00:57,540 --> 00:00:59,690
So for now, we can just call it crash.

15
00:00:59,700 --> 00:01:05,430
So now whenever there's an overlap, it's going to output into the console that we've got a crash.

16
00:01:06,030 --> 00:01:07,400
So let's create our function.

17
00:01:08,490 --> 00:01:11,940
So is Cleide is going to take two parameters.

18
00:01:12,420 --> 00:01:13,710
So it's the two elements.

19
00:01:14,010 --> 00:01:20,270
And we're going to check all of the sides of those elements and we're going to use a method called get

20
00:01:20,290 --> 00:01:21,960
bounding client rectangle.

21
00:01:22,440 --> 00:01:27,720
And what that does is that that gets all of the positioning of an element.

22
00:01:28,200 --> 00:01:35,550
So get bounding rectangle method and we'll output that value within the console.

23
00:01:35,560 --> 00:01:39,430
So you can see what it looks like and you can see all the numbers and values that we're going to get.

24
00:01:39,990 --> 00:01:45,120
We drop a bomb, we're getting this collision check, and right now we're not returning anything back

25
00:01:45,120 --> 00:01:45,930
from the function.

26
00:01:45,940 --> 00:01:47,370
So we're not going to get our true.

27
00:01:47,580 --> 00:01:53,250
But you can see what values we're getting here within the get bounding client rectangle method.

28
00:01:53,520 --> 00:01:54,730
And this is returning back.

29
00:01:54,750 --> 00:02:00,750
Our bottom position are right, left, right, top with X, Y, so we don't have to calculate anything.

30
00:02:00,900 --> 00:02:05,490
And a lot of times you're going to see within the collision detection that we're taking the left position,

31
00:02:05,700 --> 00:02:10,080
we're adding in the width and that gives us the right position.

32
00:02:10,170 --> 00:02:15,690
And we're doing the same thing for the getting the top position, taking the height.

33
00:02:15,990 --> 00:02:20,550
And then that's going to give us the bottom position so that all of these numbers you're going to see

34
00:02:20,550 --> 00:02:26,100
a lot of times that people will calculate those out and using the get bounding rectangle makes things

35
00:02:26,160 --> 00:02:27,160
way simpler.

36
00:02:27,540 --> 00:02:33,300
So what we want to do for each one of those elements, we want to get that bounding client rectangle.

37
00:02:33,310 --> 00:02:36,890
So that's going to give us all of the values that we need to make this bigger.

38
00:02:36,900 --> 00:02:42,090
So we want to return a value from the collision detection and we're going to bracket around it.

39
00:02:43,050 --> 00:02:48,900
So within here is where we do all of the comparisons, so taking a comparison of and this actually should

40
00:02:48,900 --> 00:02:52,350
be for Element B, so it gives us the two values.

41
00:02:52,360 --> 00:02:56,820
So we've got four element A and four B, we've got that bounding box.

42
00:02:57,090 --> 00:03:05,700
So taking the value of this object, we can get we have a value for bottom and we're comparing to C,

43
00:03:05,700 --> 00:03:13,950
so this is along the vertical line that we're checking to see if the rectangle bottom is less than the

44
00:03:13,950 --> 00:03:16,650
rectangle type of element beat.

45
00:03:16,830 --> 00:03:30,330
And we're also checking to see if a rectangle top is greater than B rectangle bottom and if these values.

46
00:03:31,720 --> 00:03:38,710
Are true, then that means that we do have an overlap, so look at the value here for the bottom and

47
00:03:38,710 --> 00:03:39,770
then this bottom.

48
00:03:40,150 --> 00:03:46,000
So that means that rectangle top is going to be overlapping and we've got to do the same thing for the

49
00:03:46,000 --> 00:03:47,160
horizontal part.

50
00:03:48,010 --> 00:03:49,950
So the same thing that we did over here.

51
00:03:50,110 --> 00:03:55,150
We're checking to see if rectangle a right side.

52
00:03:56,230 --> 00:04:04,040
Is less than the left side of Rectangle B and also if rectangle A left side.

53
00:04:04,060 --> 00:04:10,230
And if it's greater than rectangle B right side, any of these are true.

54
00:04:10,240 --> 00:04:12,820
We're returning back a value of true.

55
00:04:13,000 --> 00:04:19,750
And let's log this out into the console so we can take a closer look at what's being returned back whenever

56
00:04:19,750 --> 00:04:23,590
we do have a collision or an overlap of the different elements.

57
00:04:23,620 --> 00:04:24,450
Let's try that out.

58
00:04:24,820 --> 00:04:28,570
So now when I drop the bomb on top of it, we see it's coming back.

59
00:04:28,570 --> 00:04:28,950
True.

60
00:04:29,260 --> 00:04:34,450
Let's get rid of some of these other console messages that we have and try that one more time.

61
00:04:34,460 --> 00:04:35,260
So we're coming back.

62
00:04:35,260 --> 00:04:35,740
True.

63
00:04:36,020 --> 00:04:38,700
And then if we are on top, it's coming up back false.

64
00:04:38,980 --> 00:04:40,350
So we need to negate that.

65
00:04:40,840 --> 00:04:42,160
So let's try that one more time.

66
00:04:42,550 --> 00:04:45,160
And now we see that when we are coming back, true.

67
00:04:45,430 --> 00:04:47,100
We're getting the value of crash.

68
00:04:47,110 --> 00:04:48,880
So that's actually the value that we wanted.

69
00:04:49,120 --> 00:04:53,960
So we can retrieve and remove out the console messages and we're getting a value of true.

70
00:04:53,980 --> 00:04:59,250
Now, if there is overlap and so now whenever it's overlapping, we're getting the value of crash.

71
00:04:59,470 --> 00:05:01,190
So that's exactly what we want to happen.

72
00:05:01,540 --> 00:05:08,110
So go ahead and add in this value the get bounding client rectangle and do the collision detection.

73
00:05:08,470 --> 00:05:13,870
And now that we know that there's been a collision, then we can adjust some of the scoring values as

74
00:05:13,870 --> 00:05:18,940
well as we can remove out that base and recreate a brand new base.

75
00:05:19,420 --> 00:05:21,160
And that's all coming up in the next lesson.