1
00:00:00,300 --> 00:00:05,640
Welcome back this lesson, we are going to be breaking some bricks, so just as we did in last season

2
00:00:05,640 --> 00:00:09,160
where we had collision detection, this lesson is all about collision.

3
00:00:09,540 --> 00:00:13,800
So first we're going to check to see if there's a paddle collision and the next we're going to select

4
00:00:13,800 --> 00:00:14,730
all of the bricks.

5
00:00:15,000 --> 00:00:19,050
So selecting all of the bricks, we can create a brand new element.

6
00:00:19,260 --> 00:00:25,980
Let's just call it bricks and using document query selector, all because we want to select all the

7
00:00:25,980 --> 00:00:28,610
elements with the class of brick.

8
00:00:28,620 --> 00:00:34,080
And I'm going to log them out into the console just to make sure that we do have them all as we know

9
00:00:34,080 --> 00:00:35,270
that we've created them.

10
00:00:35,310 --> 00:00:37,050
So that means that we can select them as well.

11
00:00:37,060 --> 00:00:39,830
So there's all the elements that have a class of brick.

12
00:00:40,050 --> 00:00:40,950
So that's perfect.

13
00:00:40,950 --> 00:00:42,390
And that's exactly what we need.

14
00:00:42,540 --> 00:00:46,430
In order to loop through that, we're going to do a for loop for this one.

15
00:00:46,440 --> 00:00:54,420
So for and setting up, we can call this one T brick and looping through all of our bricks that we've

16
00:00:54,420 --> 00:00:55,160
just picked up.

17
00:00:55,170 --> 00:01:00,810
So the whole node list of bricks and as we loop through, we can check the collision of those.

18
00:01:00,990 --> 00:01:06,390
And if you want to see them, I can log out to break into the console so you can briefly see them.

19
00:01:06,420 --> 00:01:10,860
This is going to log a bunch of stuff, a ton of stuff into the console, because this is going through

20
00:01:10,860 --> 00:01:15,240
each one of those and outputting it on every time it's iterating through.

21
00:01:15,250 --> 00:01:20,430
So we probably don't want a console log that because there's a lot of stuff happening there.

22
00:01:20,760 --> 00:01:25,130
But we can use T Brick in order to check if there's a collision.

23
00:01:25,350 --> 00:01:30,120
So we're checking to see if there's a collision between T Brick and, you guessed it, ball.

24
00:01:30,450 --> 00:01:34,050
And those are the two elements that we're passing into our collision detection.

25
00:01:34,270 --> 00:01:36,030
So this is coming back true.

26
00:01:36,210 --> 00:01:42,060
Then that means that we've got a hit and we want to do something with that hit, reverse its direction

27
00:01:42,060 --> 00:01:42,630
once again.

28
00:01:42,630 --> 00:01:44,910
So the same thing that we did several times before.

29
00:01:45,030 --> 00:01:50,970
So we're reversing it or vertical direction, and then we need to also remove that brick.

30
00:01:51,300 --> 00:01:59,580
So taking t brick and then navigating up to its parent node and then reducing the remove child method

31
00:01:59,850 --> 00:02:03,090
to remove back the element that matches t brick.

32
00:02:03,450 --> 00:02:05,400
And you can also do t brick remove.

33
00:02:05,580 --> 00:02:10,440
But usually I find that doing it this way, navigating up to the parent and then removing the child

34
00:02:10,440 --> 00:02:11,580
is a little bit more efficient.

35
00:02:11,590 --> 00:02:14,250
So there's multiple ways to remove those elements.

36
00:02:14,430 --> 00:02:16,530
And this is usually my preferred way to do it.

37
00:02:16,660 --> 00:02:19,770
And of course, you can just do a remove on the brick as well.

38
00:02:20,280 --> 00:02:22,190
And we also want to update the score.

39
00:02:22,200 --> 00:02:26,520
So in this case, we want to have some type of score update.

40
00:02:26,520 --> 00:02:27,170
At this point.

41
00:02:27,180 --> 00:02:32,700
Let's take the player score and we're going to increment the player score by one, because that means

42
00:02:32,700 --> 00:02:34,230
that they've crushed one of the bricks.

43
00:02:34,560 --> 00:02:39,150
Take whatever the player score value and whatever the life's value is.

44
00:02:39,150 --> 00:02:40,920
And it's going to update it on the screen.

45
00:02:40,920 --> 00:02:43,230
So it's going to update the visible values.

46
00:02:43,710 --> 00:02:48,690
And before we start that, I did forget to wrap it within the is Cleide.

47
00:02:48,960 --> 00:02:54,210
So we do need to pass it into is Cleide and get the Boolean value, otherwise it's going to come back.

48
00:02:54,220 --> 00:02:54,480
True.

49
00:02:54,510 --> 00:02:56,090
So let's try that and refresh it.

50
00:02:56,370 --> 00:03:02,100
So now whenever we hit any of the bricks, you can see that they disappear our score updates and we

51
00:03:02,100 --> 00:03:06,050
still don't have the way of when the brick drops off that it ends.

52
00:03:06,060 --> 00:03:07,680
So we need to introduce that as well.

53
00:03:07,860 --> 00:03:09,840
But right now it's bouncing pretty good.

54
00:03:09,840 --> 00:03:12,330
It's bouncing off the paddle, it's removing the bricks.

55
00:03:12,570 --> 00:03:17,490
And we've got full control of where the ball is going and the direction it's going.

56
00:03:17,670 --> 00:03:21,480
So we need to still make take care of some tweaks, adjustments and updates.

57
00:03:21,630 --> 00:03:24,180
And as you can see, I can run the paddle off the screen.

58
00:03:24,330 --> 00:03:27,750
The ball doesn't drop off the bottom of the screen.

59
00:03:27,840 --> 00:03:30,720
So there's some tweaks and adjustments that we still need to apply.

60
00:03:30,870 --> 00:03:33,930
And there's a few that we're going to be doing in the upcoming.

61
00:03:33,930 --> 00:03:36,330
So we're going to be taking care of those in the upcoming lessons.

62
00:03:36,690 --> 00:03:43,260
So go ahead and add in the ability to break the bricks and remove the bricks from the screen and you

63
00:03:43,260 --> 00:03:45,120
could be ready to move on to the next lesson.