1
00:00:00,300 --> 00:00:04,340
This lesson we're going to be checking to see if one element is on top of the other.

2
00:00:04,680 --> 00:00:10,590
So we do have the element as a variable called item that we're utilizing as we're moving them.

3
00:00:10,590 --> 00:00:14,180
And this is the best place to add in the collision detection.

4
00:00:14,490 --> 00:00:21,840
So just after we've checked to see if the value of item X is less than zero and we've adjusted its position,

5
00:00:22,110 --> 00:00:25,310
we should also check to see if there's been a collision.

6
00:00:26,070 --> 00:00:30,440
So we're checking to see if it's collided and we're going to create this function.

7
00:00:30,690 --> 00:00:32,730
So we need to pass in two elements.

8
00:00:32,910 --> 00:00:36,420
And the two elements that we can pass in is item and bird.

9
00:00:36,840 --> 00:00:44,550
So the item is the current piece of the obstacle and then the bird is the other one, the other element

10
00:00:44,550 --> 00:00:50,400
that we're going to be checking against and then we're going to pass back and check to see if a crash

11
00:00:50,400 --> 00:00:51,150
has happened.

12
00:00:51,300 --> 00:00:55,590
And if it has, then we're going to put into the console that a crash has happened.

13
00:00:56,420 --> 00:01:05,060
So next, let's create our function that we called is Cleide, and we're taking two elements and we're

14
00:01:05,060 --> 00:01:12,470
just going to name them Element and A and B. So what we want to do is we want to get the area where

15
00:01:12,470 --> 00:01:19,190
Element A is located and Element B is located as well, so that we can check to see where their bottom

16
00:01:19,190 --> 00:01:22,430
position, their top position, they're right there left positions are.

17
00:01:23,030 --> 00:01:30,290
So typically we could also use the element position and we could use the offset to get a value and then

18
00:01:30,290 --> 00:01:36,200
we could add it with the width to get the other side and the same thing for the offset top.

19
00:01:36,200 --> 00:01:40,190
And we could add the height and that would give us the bottom position.

20
00:01:40,700 --> 00:01:43,280
And there's also actually an easier way to do that.

21
00:01:43,520 --> 00:01:46,740
And that's using the get bounding client rectangle.

22
00:01:47,060 --> 00:01:52,160
So let's pop over to model a developer network and we'll take a look at what is going to produce.

23
00:01:52,550 --> 00:01:58,820
So we possin an element object and we use the method get bounding client rectangle.

24
00:01:59,060 --> 00:02:05,420
And what it does is it returns the size of an element and its position relative to the viewport.

25
00:02:05,750 --> 00:02:08,540
So it gives us a lot of useful information.

26
00:02:08,960 --> 00:02:14,960
So you see the way that it's just being used, we need to specify an element and then this is where

27
00:02:14,960 --> 00:02:17,180
we can get the different properties.

28
00:02:17,390 --> 00:02:22,180
So properties that get returned are left top right, bottom x, y width and height.

29
00:02:22,700 --> 00:02:28,670
So we could use these in our calculation to check to see if one is top on top of the other.

30
00:02:29,450 --> 00:02:38,870
So first of all, let's get our position for Rectangle eight, checking to see if our get bounding client

31
00:02:38,870 --> 00:02:40,610
rectangle values.

32
00:02:40,610 --> 00:02:46,070
So get that information and we'll output into console's so we can take a better look at what's being

33
00:02:46,070 --> 00:02:46,520
returned.

34
00:02:47,530 --> 00:02:53,860
So going into the console, you can see that our output for the rectangle, I'll make this bigger,

35
00:02:54,100 --> 00:02:55,900
we've got all of this information.

36
00:02:55,900 --> 00:03:02,550
So on that particular element we've got, it's X, it's Y position, it's width, its height, its top.

37
00:03:03,100 --> 00:03:09,110
So all of this information and we can utilize this to check to see if one is on top of the other.

38
00:03:09,730 --> 00:03:15,040
So we're going to do the same thing for the other rectangle because we need to have both of those values

39
00:03:15,040 --> 00:03:16,660
to do a proper comparison.

40
00:03:16,960 --> 00:03:18,220
And I'll make this big.

41
00:03:18,790 --> 00:03:28,120
So remember, again, what we're doing is we're checking to see if the bottom of one rectangle is less

42
00:03:28,120 --> 00:03:36,520
than the top of the other and then the or if the top of the other is greater than the bottom of.

43
00:03:37,490 --> 00:03:44,570
The second one, and I'm going to just write this out and then we'll go over it afterwards, so we want

44
00:03:44,570 --> 00:03:47,960
to return a value because we want to use it within our condition.

45
00:03:48,530 --> 00:03:53,970
So we're returning back and a value and this is where we can do our comparison.

46
00:03:54,710 --> 00:03:57,560
So taking the values that we saw that were outputting.

47
00:03:57,950 --> 00:04:06,350
So first we're using that object for a rectangle object and we're checking to see if the bottom of a

48
00:04:06,350 --> 00:04:12,290
rectangle object is less than B rectangle top.

49
00:04:13,200 --> 00:04:14,010
So if that's.

50
00:04:15,150 --> 00:04:24,540
True, or if a rectangle top, so we need to see the other side as well and we're checking to see if

51
00:04:24,960 --> 00:04:31,620
a rectangle top is greater than B rectangle bottom.

52
00:04:32,310 --> 00:04:35,400
And there's also so that takes care of the vertical part.

53
00:04:36,030 --> 00:04:38,880
We also need to check to see the horizontal part.

54
00:04:39,660 --> 00:04:48,540
So checking to see if a rectangle will take the right side first is less than B rectangle.

55
00:04:50,260 --> 00:04:53,240
Left side, so we're just doing the two opposite sides.

56
00:04:53,470 --> 00:04:56,550
And if you're skeptical, this will work out mathematically.

57
00:04:56,890 --> 00:05:04,720
So we're checking to see if a rectangle left is larger than B, a rectangle, and you guessed it right

58
00:05:04,720 --> 00:05:05,110
side.

59
00:05:07,010 --> 00:05:12,840
So let's see what gets returned here and we can output that return value.

60
00:05:12,890 --> 00:05:15,700
So, first of all, console log that return value.

61
00:05:17,000 --> 00:05:23,210
And before we try that, this one should have an object using the element, the B element, so that

62
00:05:23,210 --> 00:05:25,110
we are properly comparing both of them.

63
00:05:25,130 --> 00:05:30,320
And one last thing that we need to do before we try this out, and that's to negate it so that we are

64
00:05:30,320 --> 00:05:32,150
returning back a true value.

65
00:05:32,150 --> 00:05:38,040
And that means that we can actually check to see if there is overlap between the two elements.

66
00:05:38,600 --> 00:05:42,270
Otherwise, we're going to be returning back the wrong value.

67
00:05:42,290 --> 00:05:47,010
So if any one of these is true, then it's going to be returning back false.

68
00:05:47,030 --> 00:05:49,600
So we want to negate all of that because we're including the orse.

69
00:05:50,090 --> 00:05:51,170
So let's try that out.

70
00:05:51,170 --> 00:05:55,760
And now when we press start, so next we need to just make a collision.

71
00:05:56,030 --> 00:05:58,630
So C right now it's always being returned back false.

72
00:05:58,880 --> 00:06:04,930
And then when I do go over top of it, you see that the crash is being output within the console.

73
00:06:04,940 --> 00:06:07,100
So we are registering that overlap.

74
00:06:07,760 --> 00:06:10,370
So getting rid of that console message.

75
00:06:11,700 --> 00:06:15,460
Now we can just take a look at and we can see the crash happening.

76
00:06:15,630 --> 00:06:21,240
I'm also going to adjust the speed so that things move a little bit faster so we don't have to wait

77
00:06:21,240 --> 00:06:23,340
as long to get that crash happening.

78
00:06:24,180 --> 00:06:27,330
So, again, try that out and hit the start button.

79
00:06:27,510 --> 00:06:32,370
So we've got our bird and watch what happens when we go over top of any one of the pipes.

80
00:06:32,640 --> 00:06:34,430
You see that we do have this crash happening.

81
00:06:34,710 --> 00:06:40,230
So that means that we are detecting collisions and now next we need to do something when that collision

82
00:06:40,230 --> 00:06:40,680
happens.

83
00:06:40,920 --> 00:06:42,310
So that's coming up in the next lesson.

84
00:06:42,720 --> 00:06:49,530
So for now, go ahead and add in the collision detection into your project and try it out.

85
00:06:49,710 --> 00:06:51,840
So coming up next, we're going to handle the crash.