This lesson, we're going to be doing our final code review, and this is where we take the opportunity
to play through a game just to make sure that it's functioning as intended.
We have a start button, come into the game, press start.
We're represented with a bunch of letters and then we've got our possible solution.
So we know the word that we're looking for has eight characters.
So we select any one of the letters to start with and we see that we get a message back, not found.
Eight letters left.
So next, let's try something else.
Got an L you found L letter one time, seven letters.
And I think I know what the answer here is.
And of course I do, because I set up the wording and it is also my name.
So we found C letter one time, zero letters left.
We get our start button again.
So we get a next option here.
And I have a feeling I know what this one is as well.
So usually it's good idea to play through the game just to make sure that everything is working as intended
and that there are no problems with the gameplay.
So once you've played through the game and this last one is, of course, the game should end and no
more words, the game is completed.
So that's a really basic hangmen game that we created.
Now let's do a quick run through of the code going in.
We set up some styling to make it look better, of course, set up our HTML.
So try to keep that as a minimal as possible because we did want to focus a lot of the course lessons
on JavaScript, of course.
So set up a little bit of HTML there and then we need it to create our variable array with our string
values that we wanted to use to output those values for the player.
We create a player object to contain information that the player can utilize.
Also selecting out all of the elements as objects in JavaScript so we can so it can be used within the
code that we added an event listener to the button.
We only have one button on the page.
So that's our start button clearing out any inner HTML that might already be sitting within those elements.
One and two, we loop through all of our words that are available within the my words are reset the
button display to be non sorted.
The my words array randomly sorted, selected out the first item in the array set up to a variable the
word.
Then we took the word and we split the string into an array so that we had an array with all of the
letters that are contained within the word.
Next, we built out the board for the player to be able to interact with, and if not, if there were
no words left that we ended the game.
The main core function was the building of the board where we loop through the values within the solution
here.
So this is that array that we created from the selected word.
We created elements, bunch of diffs, added a class of letter to set some default in our text to that
also hyd letter object in the background so we could utilize that and then appended it to our output
element with the class of output two.
And then once we added it into our document object, we could use the document query selector all to
select all of those into a node list that we can then utilize and loop through to check our solution
for the player we built out the all of the available letters using from character code created diffs.
Add in a class of letter, created hidden value in my letter, object within the element.
And then we created our handler, which was the same function that we would remove out to make it only
clickable once.
So we added that as an event listener updated our inner HTML to be representative of the letter within
the tenth value and then output it into our output.
One object that is indicated by the class of output one and in the elements.
And we attach the handler as our click function, which made it easy to remove.
So once it's click, we could remove the event listener just as easily as we added in the event listener.
We added in a class because we want to feed it away a little bit.
So this letter is no longer clickable and we want to have something different visually for the player.
Set up some default variables that we could utilize in order to output messaging, as well as calculate
the win for the player loop through all of the available letters in the word.
And then if we did find it, we updated it to the right character so that we were slowly representing
the solution to the player.
We calculated how many how many letters the player got right in there.
Guess as well as how many letters they currently have right.
To use that value of how many they got currently right within the guests to output a message to the
player.
And then also we calculated how.
The letters we have left and if we don't have any letters left, that means that the players solve our
puzzle and we can show them the start button again.
And as well, we've put out some messaging to the players so they know what's going on in the game.
This is a quick run through.
And I do suggest that you take the source code that has been provided within the lessons, try it out
for yourself, experiment a little bit, extend on the functionality that we've gone through in the
earlier lessons and build out your own version of this game.
Thanks again for taking the section and the lessons of this course.