1
00:00:00,820 --> 00:00:06,730
The earlier lessons I showed you, how we can create a bunch of random dynamic elements, so cloning

2
00:00:06,730 --> 00:00:13,390
existing elements and then we could move them around, and now the problem is what happens if you want

3
00:00:13,390 --> 00:00:14,620
to get rid of this element.

4
00:00:14,660 --> 00:00:16,900
So now you've got it and you don't like it.

5
00:00:17,140 --> 00:00:18,240
So you want to get rid of it.

6
00:00:18,430 --> 00:00:19,690
So show you how to do that.

7
00:00:19,750 --> 00:00:23,050
We're going to create essentially a trash bin that we can utilize.

8
00:00:23,530 --> 00:00:34,920
So updating within our class, let's create an ID of garbage position absolute so we can position it

9
00:00:34,930 --> 00:00:36,160
somewhere on our page.

10
00:00:36,730 --> 00:00:39,060
And I'm going to make it a black square.

11
00:00:39,070 --> 00:00:41,920
And of course, you can style it as needed.

12
00:00:43,280 --> 00:00:49,010
So this black square is going to be where the void is, if you move any one of these elements on top

13
00:00:49,010 --> 00:00:51,160
of it, they're going to simply get removed.

14
00:00:51,260 --> 00:00:58,190
And let's position this so we can position at maybe 500 picks and top 300 picks.

15
00:00:59,270 --> 00:01:01,810
Now, let's add that into our elements.

16
00:01:01,940 --> 00:01:09,110
It doesn't really matter where it goes, because as this is going to be absolute position and let's

17
00:01:09,110 --> 00:01:09,860
refresh that.

18
00:01:09,860 --> 00:01:16,070
So there's our garbage and we want to be able to detect if one element is on top of the other element

19
00:01:16,610 --> 00:01:20,060
and this is where we can use collision detection.

20
00:01:20,660 --> 00:01:26,210
So we saw it before where we were getting the bounding box, and that's what we were working with in

21
00:01:26,210 --> 00:01:31,430
the last lesson where we were checking to see if one element is on top of the other element.

22
00:01:32,880 --> 00:01:37,980
So let's make that check and we're set up our collision detection.

23
00:01:39,030 --> 00:01:40,440
So open this up bigger.

24
00:01:42,790 --> 00:01:49,510
And as we're setting these elements, we can also check to see if a collision is there and we'll set

25
00:01:49,510 --> 00:01:58,090
up a function called Is Cleide Passan, that element object and for now, a console log and over.

26
00:01:59,230 --> 00:02:00,430
So nice, big over.

27
00:02:02,650 --> 00:02:08,620
Set up that function to detect if the two elements are colliding, so function is.

28
00:02:10,210 --> 00:02:19,630
Collide, and we're only passing in that one element value so we can just give it a variable of a because

29
00:02:19,630 --> 00:02:24,550
you do need to have two elements, but we already know what the other element is, and that's that garbage

30
00:02:24,550 --> 00:02:31,350
one that we want to make that we've just created so I can actually put that into a constant variable.

31
00:02:32,320 --> 00:02:34,330
So just as we were selecting.

32
00:02:36,610 --> 00:02:43,600
The other elements, we're going to select this and we can use document, get element by ID.

33
00:02:45,710 --> 00:02:48,630
So that way we don't have to specify it again.

34
00:02:49,040 --> 00:02:51,700
So now let's set up our rectangle.

35
00:02:52,340 --> 00:02:58,700
So selecting that element that we're passing in, we're going to get the bounding client rectangle.

36
00:03:01,090 --> 00:03:07,300
And also, let's get the B rectangle for.

37
00:03:10,100 --> 00:03:19,130
The elements with an ID, garbage and the same thing that get bounding client rectangle, so using that

38
00:03:19,130 --> 00:03:22,910
method that we can consider log out.

39
00:03:23,990 --> 00:03:29,130
The a rectangle with one or two, so we can find out more information about it.

40
00:03:29,660 --> 00:03:30,410
So let's try that.

41
00:03:30,590 --> 00:03:32,060
So let's refresh.

42
00:03:33,320 --> 00:03:40,160
And create one, drag it around and you can see that this is this is that bound rectangle there that

43
00:03:40,430 --> 00:03:40,820
we're.

44
00:03:43,410 --> 00:03:48,660
So every time we click it, essentially we're invoking that is Cleide, and that's where we're putting

45
00:03:48,660 --> 00:03:50,190
that rectangle information.

46
00:03:50,430 --> 00:03:56,940
And you can see there's all that information contained in here so we can calculate out all of the corner

47
00:03:56,940 --> 00:04:02,730
edges of this particular element and see if there's any overlap with the other elements.

48
00:04:03,480 --> 00:04:08,370
And that's what Element B, where we've also got all of that information.

49
00:04:08,370 --> 00:04:11,100
So we've got the top left, right, top and with.

50
00:04:11,880 --> 00:04:17,520
So let's calculate that out and we're going to negate the value that we're returning.

51
00:04:17,910 --> 00:04:19,200
So let's make our calculations.

52
00:04:19,200 --> 00:04:28,200
So we've got our first element and we've got a bottom position and checking to see if it's less than

53
00:04:28,500 --> 00:04:31,200
the top position of the second element.

54
00:04:31,320 --> 00:04:38,640
We've got, again, our eight elements and we're going to check to see if that top position is larger

55
00:04:38,640 --> 00:04:42,210
than the bottom of the rectangle.

56
00:04:42,210 --> 00:04:43,440
B or.

57
00:04:44,460 --> 00:04:52,230
We're going to also check the horizontal, so checking to see if the right position is left less than

58
00:04:52,440 --> 00:05:01,470
the rectangle left position and using the get bounding client rectangle saves us the trouble of calculating

59
00:05:01,470 --> 00:05:02,630
where these corners are.

60
00:05:02,970 --> 00:05:05,860
So we see that we've got a left and a right and a top and a bottom.

61
00:05:06,000 --> 00:05:07,530
We also have the height and the width.

62
00:05:07,740 --> 00:05:11,790
So sometimes you see that height and width is used to calculate out those corners.

63
00:05:12,360 --> 00:05:17,670
But in this case, we don't have to do that because we do have the ability to calculate that out.

64
00:05:19,350 --> 00:05:25,290
And I forgot some of the brackets there or and then we're also going to do the opposite sort of checking

65
00:05:25,290 --> 00:05:30,660
to see if rectangle left corner is greater than.

66
00:05:31,990 --> 00:05:35,510
Be rectangle right corner.

67
00:05:36,910 --> 00:05:43,690
So that takes care of the horizontal and going back over to where we've got the Cleide value.

68
00:05:44,570 --> 00:05:51,500
So we can see that now, depending on what gets returned here, we can say and then over here I'm going

69
00:05:51,760 --> 00:05:52,730
to say, OK.

70
00:05:55,700 --> 00:06:01,610
And actually, I need to move this into the movement position, so that's why it's kind of choppy there

71
00:06:01,760 --> 00:06:07,950
and it needs to actually be added in where we're checking to see on the move.

72
00:06:09,050 --> 00:06:11,460
So let me save that and try that one more time.

73
00:06:11,810 --> 00:06:17,770
So now whenever I'm over, we see it immediately over and whatever I'm out, it's OK.

74
00:06:18,410 --> 00:06:20,870
So we've got our collision essentially happening.

75
00:06:21,120 --> 00:06:25,150
So the next part of it is to remove the element once the collision happens.

76
00:06:25,460 --> 00:06:26,970
So that's coming up in the next lesson.

77
00:06:27,290 --> 00:06:34,160
So for this lesson, try it for self check to see if one element is overlapping the other element.

78
00:06:34,160 --> 00:06:39,920
And if it is, then you can pass on a message of over or whatever you want in the console.

79
00:06:40,160 --> 00:06:42,170
And if it's not, then you can passant.

80
00:06:42,170 --> 00:06:45,770
OK, and coming up next, we're going to do something with this condition.