This lesson, we're going to be finishing off and concluding our combo guessing game, let's do a quick
run through of the gameplay so the player comes in presented with a start button.
They pressed the start button.
They're presented with the combination.
So we need to set these to be zeros as well as we need to have an end game function as well.
And when we we also need to provide some additional instructions for the player as to what the blue
means, what the green means and what the red means, and then also what the game over.
We need to have the ability to restart the game.
So let's all add all of that into our code so we do have ability to check to see if the game is over.
So let's set up a function that's going to be our game end.
And this is the function that we're going to invoke once the game concludes so we can simply grab that
function over here.
And so the console game over, we're going to run the function of get game and within the game end,
let's see what happens right now when we game.
And so nothing happens, but we should have the ability to.
Provide a message to the player, how many guesses it took and also game over, adding that in and we
already have the setup to provide content into our message area.
I to copy this one.
And we also need to reset this check combo button to start solved the combo in guesses.
So now we're outputting some information to the player.
We see that you solve the combo in one guesses.
Let's update the start button, take game in play.
We're going to set it to false and that will generate the maker and set this off as well.
And we need to update that button in our HTML to be start so that we can have an option for the player
to restart the game.
And we're going to set score to zero on that first run through as well.
So we don't have to do it a second time.
So we'll call this one a restart game gameplay to force.
So refresh we start, we're going to solve the game and we've got an option now to restart the game.
So we'll see what happens.
And notice that when we're running this maker, we need to zero out all of that information.
So let's do that in this as well.
So we've got our game area that we're spending a child to, and we want to remove all of the contents
of the game area before we try to set a new game area.
And we're setting that over within Maker.
So before we set it to make her, let's update the inner turmoil of game area, just to be blank.
So now try that one more time check combo, so we solved it in one guess, restart the game and we've
got our restart here as well.
So we've got guesses.
One guesses, too, and we solved it in three guesses.
Restart the game.
We need to update that inner turmoil of the.
Message area in our HTML, guess the combo.
Try that one more time, so start check combo.
You solve the combo in one guesses restart, guess the combo, you solve the combo in one guesses.
And I'm doing this so that we have more than one guess and we see that we are it is working properly.
So we're able to have the player restart the game and provide a solution.
Also adding in, there's going to be some instructions so instructions can be static.
So there's our instructions for the game.
I got to transform this into small.
Let's refresh it and see what it looks like with the instructions.
So now we start we've got some instructions and we should also provide a little bit of spacing there
as well.
So let's apply some styling to make it look better within the button.
We'll add a margin at the bottom of fifteen picks, provide some spacing between that button and we
should also add a margin at the top to ten picks at the top.
So refresh.
So we've got a margin there at the top margin at the bottom, also going to update the font, so font
size going to make it even smaller and update the font family to be different than the rest of the wording.
So we've got our instructions at the bottom.
We've got our check combo and then we've got our message to the player at the top.
One last thing that we need to do when we're generating these, we can get rid of that value to be correct
and we'll set the value to be zero.
So let's refresh it start.
All of them are at zero.
And now it's a matter of seeing how many guesses it takes in order to render out the right combination.
So let's try that.
And I'm just doing this random check combo, and it is important to try to play through the game many
times in order to see if you're getting it right.
So I've got one number right.
And I'm increasing these because they're low.
So these two must be sixes and this could be an eight.
So I guessed it within four guesses and now I have the ability to restart the game.
So that's how you play the game and always do try that out and make sure that the game is working as
expected.
Let's do a quick run through.
In a refresh of the content of this application, we started out by updating some of the styling.
So we present the game content in a little bit better of a format added in our HTML.
So this is all of our HTML that we're presenting to the user in order to play our game.
We don't need a message area so we can communicate what's happening within the gameplay back to the
player.
We need a place to present the game combinations so the interactions for the game.
And we also need a button that creates the interaction for the player to be able to guess the combination.
Using JavaScript, we added all of those elements into objects apply to an event listener to the button.
We set some default variables and within the event, listener of the button.
So we're only using one button and we're updating the text on the button dynamically using JavaScript.
So that button is always clickable and it will do different things.
And the way that we're controlling that is using the gameplay variable as a boolean value.
So we check to see if the gameplay is a boolean value of false and if it is, we set it to true.
So that means that we run through one time with the starting of the game.
We reset the score, we update the inner HTML of the game area to be blank, and then we generate out
our combination lock.
And this is all fully dynamic.
So if we were to update that value, we could update it to whatever number we want.
So we can also update this to be more dynamic where we could have a variable in there and a variable
here.
And then whenever we run and we call out to make sure this is where we can pass in a value.
So if we want to have six number combination, it can really be easily added in and changed and update
and the game will work the same.
So that's the best combination when you are building out these games, try to make them as dynamic as
possible.
So this is where we're selecting the number of values, combinations, digits that are available within
this combination.
Look, next we check to see.
So if its game is in play and if it's in play, then we run the checker whenever they click this button.
Doesn't matter what it says on it.
That means that we're checking to see if it's functioning.
I can get a console message.
We update the score by one.
The score is how many guesses this particular round has taken.
We update the message to the player.
So the player is aware of what's happening, that we've updated the score.
We select all of the elements that have NUM.
And again, this makes a dynamic.
So we loop through the document object, selecting all of the elements that match this criteria.
So in this case, we've got elements with the class of NUM, so we're looking for those and then we've
got a variable there for the win condition.
And this is the way that we tell how many of these are correct.
So depending on how many of these wind conditions we can run through, that gives us an indication of
how many the player got.
Correct.
And you can also output that variable to the player if you want to, within a message as well, getting
rid of the console message.
We don't need that anymore.
And also this console message, we don't need that anymore.
We're checking to see if the number is if they match and if it does match, then we turn it green,
the background color and we update the color to be white and we update the win condition, which again
is the number of correct values that are presented within the combination.
Next, we have an else, so if the numbers are not matching, that means that the player either gets
high or low.
We check to see if the player guessed low.
And if they did, then we turn it blue.
Otherwise, it's going to be the guest high and we turn it Red Wings.
Update the background color to whatever color was indicated here within the Tarana state.
And then we also update the color to be black.
So this is in case we've already set it correct and then they change the value.
So that way they'll be consistent and they'll all be black.
We checked to see if the wind condition is equal to the numbers length, the numbers length will be
how many digits we have to solve here.
And if it is equal, that means that the game is over and then we run the game over function, which
upstate's the message to the player sets the gameplay to false updates, the content of the entire HTML
button instead of checkable.
It'll be a restart game and our last function is the maker function.
So this is where we generate our HTML elements using JavaScript.
We essentially are creating an input element with a number.
You can still see these here within the console.
So this is the element that we're generating its input type number and the maximum and minimum numbers.
And this is a simple five.
So we'll see that we can't update those values to be beyond what those maximum and minimum numbers are.
There's also a width that we're setting, we can update this with if we want to, we could keep it within
the NUM class if we wanted to.
So we don't necessarily need this, but this is just the way that you can update with and you can also
update height as well so you can apply any type of styling that you want.
All of that information just goes within the style attribute that you can see down here in the right
hand side.
Also, we're applying a class of numb, and this is really important to our gameplay because we are
looping through all of the elements to detect the ones that have come.
And this is what makes our game dynamic.
So it doesn't matter what you change the number to, it's going to if it's generating another field
here, it's going to be taken into consideration.
When we're doing our check, we're adding in the order.
This isn't actually being used, but it might come in useful down the line.
If we want to have a particular order of numbers, then we can do it this way as well.
So this is just a hidden value that's sitting in the background currently not in use, but potentially
could be used.
We also have our correct value.
So this is where we're setting a random value while we're generating the element.
Each one of these objects, element objects contains the correct value as well.
And notice that you can't see it within the HTML.
So the player does not actually see what the correct value is until they are actually guessing.
And then this is how we actually also determine what the check check of the element value is and see
if it's correct.
And then here we're just setting the value so that they're all zeros by default so we can get rid of
our console message and once we've built the elements.
So all of these are to build that element.
And once we build it, we apply it to the game area.
And now when we go into inspect, you can see within the HTML if the game div, that's the game area
with the class of game.
You see, we've generated out all of the elements.
So whatever number we've entered into maker, that's how many we're actually generating out.
And that's all taken in from the argument that's passed in.
And we've got a loop there that generates out elements and continuously upends them to the game area.
So now it's up to you.
Take what you've learned in the earlier lessons, apply it, have some fun with it, extend on it and
build out your own version of this game.