Hey, there's still a quite a few things that we need to take care of within the gameplay, but we're
getting there and we've got kind of a working model and there are some things that we need to take care
of.
And the one that I'm going to do right now is that we want the lives to go down whenever the ball goes
off the bottom of the screen, because that's really the objective, is to stop the ball from hitting
the bottom and then control it and move it onto the bricks to crush the bricks and to get rid of all
the bricks.
So we also need a way to end the games when all the bricks are gone.
We need a way to end that.
So going into our Ed, we want to do one more check here and checking to see whatever the position of
position ball y is.
And if it's greater than the container Dem height, we can do a subtract 20 so it doesn't always have
to be right to the end.
So if it's greater than the container Dem height, then that means that we've fallen off the edge.
And if we fall off the edge, I'm going to drop this in one more rounded bracket and if we fall off
the edge then we can run a function.
So fall off, it will run a full life function.
And if not, then we can update the direction of the ball.
So let's create that function to handle the falling off of the edge.
So in this function, so fall off is one of the things that we want to do is distract the player lives.
And the reason that I actually I placed it here separate is that we want to be able to check to see
if the players lives have ran out and if a player lives is less than zero.
Now, that means the game's over.
So there's no more game to play.
And we need to create another function in order to handle the end of the game.
And we set the player lives to equal to zero and then we run the end of game function.
Otherwise we update the number of lives where we've got our score updater method.
So that will update that.
And then we also want to have one more function and I'm going to call this one Storper.
So what this is going to do, is this going to stop the ball and set it on top of the paddle so you
can move it alongside the paddle?
So I know we created a few functions here and let's quickly create some placeholders for these functions.
So we have one to end the game and then we have another one that is called Storper.
Stop the ball on top of the paddle.
Before we do Storper, let's do our end game sequence.
So taking our game over.
And applying style to it, and we're going to do a display block of the style.
And then also the game over, we can set the inner HTML and setting this as a game over.
And line break there, your score, and then we can output the player score value so the player can
see what they scored.
And then take player.
Game over and set that to true because the game is no longer in play.
Take the ball style and we're going to need to select the ball element so ball style and then display.
And this is going to be actually the opposite of what we do for the start of the game.
So we're displaying it to Nunc or hiding that.
And also because it's game over, we want to get rid of all of the bricks so we can go temp bricks and
using the document documents a selecter.
All we can loop through all of the elements with a class of brick, just as we did before, where we
were selecting all of them and then looping through them so we can call this one Tilbrook again of temp
bricks.
So looping through all of the bricks, we can take t brick and then parents note.
So just as we did before, where we're removing the child and then remove child and then the child that
we're moving is t brick.
So this will make sure that none of them are left.
And really at the end of the game, we don't want we want to just completely clear up the board.
So that should take care of clearing up the board.
So we've got the end game whenever the list goes down to zero.
So let's try that where we've got the lives and we'll start the lives one.
So let's hit start game.
And we see that whenever we run off the screen, we get game over.
So we're not getting all of the functionality where we're not getting the score showing up.
So let's take a closer look and see what happened here.
So we're supposed to get the end game function firing off.
And I do need to adjust the line height.
And that's the problem there, that the line height is just way too large and also going to add in a
height for it as well.
So game over.
And let's apply a style height and we'll do a height of two hundred fifty packs.
So try that one.
Now, when we go game over, game over your score to and then we can always start again.
So there's a few other things that we need to make sure because it looks like this ball is traveling
super fast.
So we need a way to reset that speed as well.
So it looks like every time I relaunch it, the ball is traveling even quicker.
And that's because we're not actually stopping the animation from running the game.
If the game isn't in play, if the game over is true, then we're not going to do any of the updates.
So that will stop the animation frame.
So if game over and we just put the negative in front of there, so that should stop that from happening.
And let's try that one more time since we have game over and we also need to reset the ball position
whenever we're starting the game.
So let's add that in as well, where we need to set where the ball is positioned.
So ball style and taking our left position and we can do 100 picks and we'll adjust that afterwards
and then ball style and we'll take the top position.
So ball style left and I'm going to use whatever the paddle offset is.
So offset left value plus PEX.
And we're going to do the same thing for top, we're going to offset the paddle, so ball style talk,
we're going to use offset top in order to position where this ball is going to be sitting.
So we start the game and we see that it goes all it goes directly down.
So that means that we also have to toggle the direction as well.
So we want to have the direction of how the ball is traveling to be equal to five, not negative five.
So we also need to multiply that as well by so let's make an adjustment to the ball direction so that
it starts out on a negative.
So that will automatically move it up.
And let's also update this and add in 50 so that we get center of where the panel is located.
So let's seven also to minus 30 for the panel top us and we'll try that one out.
So now, wherever the panel is, that's where the ball is going to start and generate and then it's
going to move up from there.
You can also change this to a smaller number so you have less of an incline.
So it's a little bit more helpful for the player.
So go ahead and add that in.
And coming up next, we've got a part two to the tweaks and updates.
We're going to continue to go through this and update Storper.
So that's still all yet to come.