In this lesson, we're going to be introducing scoring, so let's set up a variable, a global variable
to hold our score.
We're going to have our score at zero by default.
And when we start the game, we want to make sure that we are resetting that score back to zero.
So set it back to zero.
And now that we've got our match, we want to make sure that every time that they're doing a guess.
So every time that they press this checker button the button to check the combination, our score is
increasing.
So that means that the amount of Treis that they're taking in order to render out this content also
just above, I'm going to create a brand new div, give it a class of message.
And this is where we can provide information to the player.
And for now, we'll type in guess combo in there and we can update this message.
So selecting it into a JavaScript object, using our document and query selector, selecting the element
via the class.
So make sure that we put the dot there the in order to indicate that it is a class that we're accessing.
So now we've got our ability to send information back to the player, so as we loop through, I'm going
to get rid of some of these console messages because we don't need them anymore.
As we loop through all of the different combinations, we check to see if there's a match.
We want to output some value.
And if there is a match, then we're going to take that value of whatever numbers.
So selecting that object, we're going to apply a style and we can do background color.
And if it is correct, how about we set the background color to green, go out and try that out, press
start check combo.
They all go green because of course, we know that we are guessing properly.
We can also update the value of the color as well.
So doing color and we can turn this to white.
So it looks a little bit better and it stands out.
So try that one more time.
Guess the combination and we got those right again.
Guess the combination.
And we're not doing anything different.
We're not setting out any different color.
So let's go down here where we've got no match and we're going to check to see if it's larger or smaller.
And then depending on what the condition is, if it's larger or smaller, we're going to update the
background color.
So let's set a value of color.
And we're going to take the.
We're going to use a territory operator in this case, so we're going to check to see if this value
is less than whatever the value of correct is.
And if it is, then we're going to return back.
A value of blue, otherwise we're going to return back a value of red.
So try that out.
And instead of doing the color green, let's add one more line here and make this bigger, because,
of course, we are running out of space here.
So now all we have to do is update the value of color here and by default, I'm always going to set
it to be black.
So instead of white, it will be black, so whenever it's wrong, it will be black.
So try that out and refresh.
And check the so goes green, check the combo so it goes blue, so that means that the number is larger.
Read that we've gone to high and the number is too high.
So as we generate and we make the checks until we get a green, then we know that everything is correct.
So one more thing that we should do, and this is going to be our win.
And right now, our win condition will be zero.
And as we loop through, we want to make sure that if the wind condition is going to increase every
time we get one correct, so wind condition is going to increment by one every time it's correct.
And then after we've finished doing the loops, this is the way that we're going to tell if the player
made the gas correctly.
And then this is where we restart the game.
So we're going to do a quick check to see if wind condition is equal to whatever the value of numbers
and always think that we may need to make it dynamic as possible.
So if these are equal, then that means that the game is one retry that one more time.
So we get that and we see that game is over.
If I update that, then no longer we're seeing the game over so we can see that it's doing the checker.
No match, no match.
When we go to two or a one and back to a zero, we see that game over.
So that is functioning properly.
And that's the next thing that we need to do is initiate that game over function as well as we can update
the guests combo and number of guesses as well, because we are incrementing the number of guesses within
this within the score so we can update that.
So updating the value of message, selecting the inner HTML guesses, and this is going to be equal
to whatever the value of score is.
So start and we have guesses.
One guesses, two guesses, three guesses.
Four.
And the objective is to guess it in as little guesses as possible.
And so red is too high and blue is too low.
And that's up to the player to determine if they've guessed it properly.
So coming up next, we're going to have to set some wind conditions and have the ability to reset and
start the game once more.
So go ahead and add in the wind conditions, update the background colors.
You might want to select different colors other than ones that I have.
And this can all go into instructions for the player, how to play the game as they're guessing the
combinations.
So coming up next, we'll do a quick overview and an end of the game and then also a review of the source
code.
So that's still to come.