Hey, welcome back, glad you made it to the last lesson of the S. We're going to do a quick code review.
We applied some styling to make it look better, created a little bit of HTML so that we've got some
basic structure that we can begin interacting with using JavaScript.
And then we came to JavaScript.
We tried to focus the bulk of the course, obviously on JavaScript, because this is a JavaScript project
course, setting up a main global variable that we use to contain all of the dynamic values that we're
going to need within our gameplay.
So we're starting it off by setting up a couple different values.
So a minimum and maximum for our random number.
So these can be also updated and changed as needed to make the dynamic functionality of the game.
All of the main gameplay started whenever the dorm was loaded, and once that loaded, we loaded the
elements into the game object.
So we've got that still that global variable that's going to contain all of the values that are going
to be changing throughout the gameplay.
So we've got all of the elements selected here so we can easily access them.
We've got the number of guesses being tracked in here and this is a global value.
So it's always changing, always updating as the players playing the game.
We can also dynamically change the minimum and maximum values if needed.
And then we've got the number that was randomly generated and that the user has to guess.
So the objective is that the user inputs their guesses and we compare it with the value that's being
discussed and we determine if the player got the value correct.
And if not, then we send them back to continue guessing and we give them a little bit of a hint whether
it's higher or lower.
So once we selected the elements, we needed some interaction.
And that was the best listener on the click button, because, of course, the objective of the game
is to click, to enter and a guess and to click that button.
And then we also had an insight function that set up some of the game structure.
So we set up a number of guesses.
And the object we also generated our random number that the user needs to guess that we sent in a message
to the player to guess a number and outputting the game minimum and maximum values so that the user
can see and get the parameters that they need to work with for the gameplay, creating a function to
send messages, because we've got quite a few messages that were communicating back to the player.
So we've got a function for that.
And what this function does is it updates that inner HTML of the message area.
So that's this little area up here.
Also updating the color text in that message area and then updating the border color of the input.
So that's updating that, turning it blue as well as we've got the background color of the button that's
updating.
And we also have if s.L are comes in as false, if there's no value there, then we've got some default
values that we're setting.
And we also update in the color of the button as well.
So that's what we set up for the message.
And we continue to use message multiple times within the code.
So once the game starts, it waits for the user to take action, to enter in a value into the input
area.
And once that value is entered in, they click the button to create their guess.
So the guess is where all of the game logic sits.
So we've got whenever that user clicks, that guess.
But it's invoking a function called guess value.
And within that, yes, value.
We're doing a check to see if that button contains a class of a replay.
And if it does, that means that the player is in a replay mode where they're playing a next round of
the game.
So that's where we need to rebuild to iron it.
So rebuild?
No, they're guessing it.
And we also update some of the values and then we're updating the button contents to be guests, as
well as some of the other values that we reset when the game was over.
We need to reset them back to the players, to the play styles and values we increment.
And if it's not replay in the button this way, we can use the same button.
Or it could have had two buttons, one that does the replay and then then one that shows whenever we're
doing guesses.
So we increase the guesses.
If the user is making a guess, we clear out.
We get the guest value, we clear out the value of the guests.
So there's always no value in there.
After the guest has been sent through, we make sure that we're converting the guests value of the input
into an integer.
As with forms, typically the content comes in within a string format in JavaScript and JavaScript does
have dynamic types so it can switch between numbers and strings, but it's always good to kind of force
it to a number.
And then this is also where we can check to see if the temp guess is a number.
And if it's not, then we're sending back an error message to the player that they need to enter in
digits.
So we make every.
That really stands out as an error.
Next, we check to see if the player has won, if they've guessed the number correctly, and if they
have, then we pass over a message to the player that they've won and how many guesses it took, what
they essentially scored.
And then we run our game over function.
And the GAMEOVER function really just resets the gameplay to be the start value as well as it sets it
up to rebuild the game.
So we've got restart game.
We hide the input because at this point we don't need an input.
And we also add that class of replay to the button so that what next time the player clicks the button,
we can check if this class exists.
And if it does, then we know that that restart was the one that was clicked.
We also update the game, Max.
So making the game more difficult every round, every time they solve it, it's going to have a larger
spread between the numbers.
That's what happens when they get it correct.
If they don't have it correct, then we check to see if the guests value is larger than the game number.
And if it is, then we pass on a message that it should be lower their guess.
And if it's not than we pass on a message that's higher.
We also set some of the color defaults, passing it into message, all of those values that then of
course, we utilize updating that style properties of several of the elements on the page and then the
game continuously loops.
So the design of the game is to constantly put it back to the player, to add their guesses and try
to guess the hidden number in as few guesses as possible.
Thanks again for taking this course and for taking the section building the no guessing game.
I've included all of the source code so you could try it out for yourself, experiment with it, extend
on it, have some fun with it, and practice using and manipulating DOM elements using JavaScript.