Welcome back this lesson, we are going to be breaking some bricks, so just as we did in last season
where we had collision detection, this lesson is all about collision.
So first we're going to check to see if there's a paddle collision and the next we're going to select
all of the bricks.
So selecting all of the bricks, we can create a brand new element.
Let's just call it bricks and using document query selector, all because we want to select all the
elements with the class of brick.
And I'm going to log them out into the console just to make sure that we do have them all as we know
that we've created them.
So that means that we can select them as well.
So there's all the elements that have a class of brick.
So that's perfect.
And that's exactly what we need.
In order to loop through that, we're going to do a for loop for this one.
So for and setting up, we can call this one T brick and looping through all of our bricks that we've
just picked up.
So the whole node list of bricks and as we loop through, we can check the collision of those.
And if you want to see them, I can log out to break into the console so you can briefly see them.
This is going to log a bunch of stuff, a ton of stuff into the console, because this is going through
each one of those and outputting it on every time it's iterating through.
So we probably don't want a console log that because there's a lot of stuff happening there.
But we can use T Brick in order to check if there's a collision.
So we're checking to see if there's a collision between T Brick and, you guessed it, ball.
And those are the two elements that we're passing into our collision detection.
So this is coming back true.
Then that means that we've got a hit and we want to do something with that hit, reverse its direction
once again.
So the same thing that we did several times before.
So we're reversing it or vertical direction, and then we need to also remove that brick.
So taking t brick and then navigating up to its parent node and then reducing the remove child method
to remove back the element that matches t brick.
And you can also do t brick remove.
But usually I find that doing it this way, navigating up to the parent and then removing the child
is a little bit more efficient.
So there's multiple ways to remove those elements.
And this is usually my preferred way to do it.
And of course, you can just do a remove on the brick as well.
And we also want to update the score.
So in this case, we want to have some type of score update.
At this point.
Let's take the player score and we're going to increment the player score by one, because that means
that they've crushed one of the bricks.
Take whatever the player score value and whatever the life's value is.
And it's going to update it on the screen.
So it's going to update the visible values.
And before we start that, I did forget to wrap it within the is Cleide.
So we do need to pass it into is Cleide and get the Boolean value, otherwise it's going to come back.
True.
So let's try that and refresh it.
So now whenever we hit any of the bricks, you can see that they disappear our score updates and we
still don't have the way of when the brick drops off that it ends.
So we need to introduce that as well.
But right now it's bouncing pretty good.
It's bouncing off the paddle, it's removing the bricks.
And we've got full control of where the ball is going and the direction it's going.
So we need to still make take care of some tweaks, adjustments and updates.
And as you can see, I can run the paddle off the screen.
The ball doesn't drop off the bottom of the screen.
So there's some tweaks and adjustments that we still need to apply.
And there's a few that we're going to be doing in the upcoming.
So we're going to be taking care of those in the upcoming lessons.
So go ahead and add in the ability to break the bricks and remove the bricks from the screen and you
could be ready to move on to the next lesson.