This lesson is going to be all about making it look nice and just the game functionality in general,
so we've added in some graphics, some images to make it look better.
We've got a frog there, got some cars, got some logs going on there, the water in the background
in the green area that the frog is trying to get to.
Also double checking and making sure that it works.
As we dynamically adjust the number of rows, we can also adjust the number of columns as well.
So this is all fully responsive, awfully dynamic.
So it should adjust accordingly.
So if we want to make the game harder or easier, you can update the speed, you can update the log
size.
And all of these will change the way the game is, whether it's harder or easier.
And now we've slowed it down quite a bit.
You can speed it up.
So the lower the number, the faster it's going to speed up and the higher the number, the slower the
game is going to be.
In this lesson, we're going to be updating some of the gameplay and the visuals within the game, so
going into the styling, I downloaded and created some images that we can use instead of having the
basic images.
So for the water, we've got a background of water.
So let's set up a background image and then selecting the wall of the image and the URL is just going
to be located.
So just got a file called PMG.
Of the water, so that will set more of a water type feel to the background of the water source.
So we want to make sure that we've got the logs.
We do have background for the logs as well.
So the background image for the log.
So going down to the log and I've got a background image for the frog.
So you can, of course, create your own background images as needed so that we've got the logs on the
water there.
Let's also add in one for the frog
and let's see what the frog image looks like.
Get rid of the green background green.
We also need to recenter the frog because a little bit too big.
So let's update the background size of the frog and just said it to be 100 percent.
And that repositioned also set the repeat to once so background.
And that should have just the one frog there.
So let's see how that looks and move the frog.
Also, let's update the backgrounds for the cars as well.
So we've got car PMG.
And I'll update the background color for the rest of the block to be black, so that matches with what
the reporters and I do in the car, PMG.
And for the car as well, so it's a little bit large, so we need to have the background size to 100
percent.
And also need to add in the no repeat for the background, so it's only showing just the one car.
So now we've got cars, we've got a frog, we've got our log.
And for the safe spot, let's update that and we'll add in some grass.
So background image of grass, such as safe spot that is trying to get to and got a background image
of grass and we'll see what that looks like.
So that's where he's trying to get to the cars.
We've got the logs.
So everything and just make sure that it's working.
So as we go through and the one thing about whatever the frog is, it's just taking whatever the background
color is.
So we need to actually handle the background color of the log and make it a bit darker so it's more
in line with what we have the log.
So I'm just going to use a hex value and see what that looks like.
So it should be at least a little bit darker.
And when the frog is on there, when you make changes, just play through it and make sure it's working.
And then there he landed in the water, so we're resetting on them back to the original spot.
So we also want to add in the messages to the user about what's happening, that whenever they land
in the water or that it's reset.
So let's add in a function that's going to add the message output and whatever the message is that we're
passing in here.
And so we're going to be updating that message area that we have.
So it's just up here where we currently just have the word message.
And we're setting that up when we're creating the game board with that within the and it function.
So let's see what we've got for the game message.
And it also has a class of message.
So let's update the class of message, add some padding to the text.
Also, text a line so you can center a line, the text make a larger font size.
So there's our message there and we want to update this message area within function.
So update the message with the interim HTML and whatever message that we're passing through.
So for the message, whenever we do the game stop, we can send a message there or we can just handle
the message.
So it depends on what we want to do.
Maybe we can shorten this and just have within the game stop message and then using the message function
that we just created, we can output that message content as HTML.
So that will simplify whenever we've got the game stop.
You fell in the water and this one here for the GameStop hit by a car and I'm going to update all of
these to pass the value in the GameStop and this GameStop is and go through all of them, remove at
the console logs added into the GameStop so that we just have the one statement sending out the message
to the user.
We're not going to be using the console anymore as we're finalizing the gameplay.
So this goes out to the user.
And for this game, stop.
Debug and for the restart, it just going to start it up.
So when we do the start, so if it's one, then we want to give an opportunity to restart.
Let's play through the game, see what happens.
So we got you lost, hit by a car, so moved it down.
We got a click to restart.
You felt I should feel it should be fell in the water.
So we also might not want to move the whenever we do the GameStop, we might not want to remove the
frog quite yet and we might also not want to update where it's active.
So updating where it's active when we only when we restart.
So let's see how that looks and looks like we got hit by the car.
So we restart and we're still hit by the car.
We're going to reposition the element, reset where the active element is going to be placed.
So by default, when we create the gameboard, we're setting a spot roughly random center at the bottom
for the element.
So let's select the active element.
And when we start, so we want to remove out where the current active element is and then we want to
just have a restart for the frog.
So this way we end up with only just the one frog class in the one element in the board.
So he got hit by a car we click, we can restart.
And there we see we fell in the water click restart, so we ideally want to have is the completed game
play and you need to play through it a few times to just to make sure that things are working as expected.
Make some adjustments to the number of rows and columns, so making the gameplay either harder or easier
and then just make sure that he can win as well.
So it's a win condition and we can win the game.
Let's also adjust the speed.
So if we want to make it harder, we can adjust the speed.
So the larger number within the game speed global value, the larger that is, the quicker the gameplay
is going to be.
So adjusting that will adjust the way the game functions.
And that's a good thing about having a global game object is where you can make updates to it and you
can change the way the game plays.
So now it's quite a bit faster than it was originally.
So it's the completed game and you're welcome to update as needed.
Also try out the dynamic values for the elements to see.
The different ways that this game can be played, you can make some adjustments and tweaks as needed.
So adjust it to six rows and we got our central role back there, so it looks like whenever we have
a very small amount of content, it's going to remove that automatically.
So this is all done automatically within the calculations.
So even when you resize and readjust the screen, it's responsive in size.
Coming up next, would do a quick run-Through of all of the source code of the game.
Challenges for this lesson, update the background images, update the staling as needed, try the game,
test it, debug it, make sure that it's working properly, make some adjustments to the global values,
ensure the gameplay is still there, that it's responsive, and that's responding as expected ad visuals
to the game as needed and try at the game to make sure that the game is functioning as you expect it
to function.