This is a part of the course where we do a final play through of our game just to make sure that everything
is working as intended, so we come into the game, we've got press start button, we go out and we
pressed the start button.
It does get disabled.
And we also see that we run that sequence.
We don't have any additional messages in here.
And this is something that the users need.
So they have some direction to follow.
So let's go ahead and create a function and this function will output our messages.
So we call it messenger and we can send a message.
And we already have our message within that message object selecting that HTML element so we can simply
update the contents of it.
And this way we can use this function whenever we want to update some information contained within that
element so we can update that press start button to whatever message we want contained in there.
So we want to update this as soon as the player hits the click button, so that means that now the player,
the game is in play.
So taking that message and we might want to also hide the start button as well.
So that's another option.
Instead of just disabling it, we can hide that display property.
So taking a button, applying style and display style, and we can set it to none.
So that will hide it.
And we can also show it once we've ended the game.
So going down to our end game function.
So now we can display it as block so that it will hide and show the button, go back to the refresh
hit start and we see that we've got red red.
So it's running twice.
Let's see what happens.
We get red, red.
We got it correct.
Let's start again.
And this time we've got three colors.
So Soylent went green, green, blue.
And once again, we got it correct so we can start again, the button now disappears, so now we have
to watch again.
So it's blue, blue, yellow, green.
And yes, I am cheating because I do see the values down here and typically within the gameplay.
You want to see those values.
That's all it says is match pattern.
So that's another thing that we need to output and again, communication to the user.
So where we've got pattern matcher, we should also when we're ending the game, we should let the player
know if they got it correct or not.
And this is where we can have our value here.
So instead of logging it out to the console and let's try that one more time.
So press start button match pattern.
So it's green.
Blue.
We got it correct.
We start again, so it's now yellow, green, green, we've got it cracked again, start, and this
time we'll get an incorrect.
And there's one other thing that's happening whenever I'm clicking it, because I've got the user clicks
out in the console here, so if I get rid of that, you're going to see that even if I'm clicking these
until I'm able to click it, I'm not I'm not going to see anything happening with it.
So we see that we got it incorrect.
We'll try it one more time again.
Yellow, blue.
We got it correct.
We move up a level.
Let's do a final quick code review.
So we set up all of our styling that we need it.
We also set up the basic core HTML elements that we need for our gameplay.
Connected them using JavaScript with document query.
Selector created an array of all the different colors that we wanted in order to play our game, set
up some gameplay variables where we've got a couple of arrays.
One of the arrays is going to be used by the game to create the sequence and then the other one is where
the player creates the sequence.
And then we compare both sequences to see if they match.
And if they do match, then the player got everything correct.
We also have in play, which gives us control over allowing the player to start the game as well.
We've got a plate number, so this is how many colors we're going to show for the initial sequence.
So this is the starting value that we're showing.
We're listening for the Windows object to load.
Once it loads, we run the function set up.
What setup does is set up, runs through and builds our game board.
So we see that the game has loaded.
We loop through the number of colors.
So we do have four.
We build out all of the contents of that particular element.
So we generate a div.
We create a function in order to generate diffs.
We update the background color, add a class of box, set the opacity to 50 percent, add my color values.
So this is a hidden value within the element object in the background.
So you don't actually see that within your HTML.
And we also have our event listener and the event listener adds that interactivity to each one of those
elements that were dynamically generating.
And then lastly, we append the brand new element, freshly created element into our game area object,
which we selected over here, which corresponds with this particular div.
So once we build out our game board, we have the next objective is to wait and listen for the player
to kick off the gameplay.
So when they're ready to play, they hit that start button, that start button checks to make sure that
we're not already in play.
So it's restarting when it's already in play.
We don't want that.
So that's where we've got that condition.
And then we're running a function called player.
So this is when the game is in play.
When his first kicks off, we disable the button, we hide the button.
You could only you could also only just hide the button if you wanted to.
We pass over a message to the user so that they see that what their instructions are is to match the
pattern.
We make sure that the game clicks and user clicks are both set to blank arrays and then we initiate
that sequence.
And what the sequence does is this is what creates that initial sequence for the gameplay.
So this is building out the sequence that the game is going to use and also what the player has to follow.
So we're grabbing all of the elements with box.
So these are the freshly created ones.
We're decreasing number by one, and that's because we're using recursion to run that same function.
Again, we need a way out and that's to decrease it.
And this is our way out of the recursion of this function.
And we know once it hits zero, then we've gone through all of the numbers that we needed to loop through
all of the elements that we need loop through within this particular gameplay.
We set the gameplay to true, allowing the player to select different boxes and build out their own
sequence.
We get a random number.
So this basically picks out a random element.
We push that value into our console.
We set that random value, that square element to opacity, to light so that we can distinguish it,
that it's lit up.
We wait five hundred milliseconds and then we set it back to half.
So that's the initial state.
And then we also have a timeout to run the next part of the sequence.
So once this time is out, then we set another time out and then within a second it's going to run the
next sequence.
And we do need to have that pause there in before we run the next sequence so that you do have that
pause in case we're displaying that same color multiple times in a row, then we're not going to be
able to distinguish between it.
So that's where we need to have that second set timeout.
We've got our set up function there and then the rest of the functionality is dependent on the user
where when we generated these elements, we added the event listener to check answer.
So this means that the user.
Has to check the elements that they believe are the next within the sequence, we check to make sure
that it's in place.
So this is where our control is to allow the user to actively participate.
We check to see which element triggered this event.
We update that element with we update our array user clicks array with the color from that element.
So this is that hidden value that we created when we generated that element of my color and call it
whatever you want.
Also, we set the capacity to one so that it stands out.
So basically it blinks brighter.
We also set the time out to five hundred milliseconds and then we set that opacity back to its original
state of zero point five.
So that's the click that the user sees.
And then we also check to see if the game is over.
And once the user clicks, array length is equal to the game clicks array length.
So this is the one that we randomly created.
We know that the game is over.
The users clicked out all of the available clicks and we set the inplay to false and then we run the
end game function.
The end game function console likes we can get rid of that console log.
It disables, it enables the start button again so the player can play the same sequence again if the
player got the sequence right.
So the string right.
So both of those arrays match, then we increase the play number.
So that adds another color within the sequence that's going to be available.
We output a message to the player that they got it cracked.
They've got a new layer level or if they don't match.
So if these two don't match, then we output to the player that it's not correct.
But they still have the option to restart the game with the same number of play items.
It's essentially that was a quick run-Through of the game, of course, you can take the functionality
of this game, extend on it, expand on it, and really make it your own, have some fun with it and
enjoy working with JavaScript.
Thanks again for taking this lesson.