This lesson we're going to do a quick run through in an overview of all of the source code that we've
built up in the earlier lessons, so we added in a little bit of styling also, we went through great
lengths not to have to write any HTML, and we generated the whole game interaction using JavaScript.
So there's no HTML.
It's all within the script tags and all generated with JavaScript.
And I know what you're thinking.
It was probably easier to generate and just write it out in HTML and it probably was.
But this is in order to practice creating elements on the fly with JavaScript.
So we have to make sure that the Windows object loaded and once the Windows object loaded, that we
can initiate the game content building function and that's the it.
And this is where we build out all of those elements that we needed in order to create that game interaction.
So simply adding in and building our gameboard.
We also had before we did that, we also set up some variables that we're going to use within the course
of the gameplay.
So we had our array full of all the words that we're using.
And then we've got a couple of global variables that we use and we reference later on within the functions.
So once we've built out our game, we added in an event listener to the button in order to start and
to kick off the game.
So what that does is that launches the start function and all of the stuff happens within the start
function.
I get get rid of these console messages because of course, we don't need them for a game functionality.
We set a variable for the current to be zero.
So that initiates it.
And even if we're starting the game again, there's always going to reset it back to zero.
We select our start time.
So this is when the game kicks off.
I'd that start button so that the player doesn't see that anymore.
Create a temporary array using the my word.
Sorry.
So we slice all of those values and that creates a temporary, we sort that temporary.
So remember the function that we're using sort and this was a quick way to reorganize an array randomly.
And then we also do that for the my words as well.
So now we've got both of them sorted and they're going to be in different orders.
And this helped us when we're presenting the content and as we're outputting that content.
So it's not the same, we take our game object.
So that game element that we created earlier with the class of game, adding it into an object called
game that we can reuse and we can add elements to content, too.
And then we loop through that array that we built out that we just duplicated from the Mairie.
So contains all of the words that we need to output.
We use a variable called temp and we split the value of the string value of the word.
So the word is item and we split that using the JavaScript method, turning the string into an array
with all of the different letters as array items, and then we resort that array.
So the same function that we did up here where we resort that value and then we join it back together.
So recreating temp and recreating it back into a string and then we have a scrambled, essentially scrambled
word and then we can utilize that in our output.
Next, we create an element.
So generate an element using document, create element adding in some inner text.
So this is just so all of the text is the same until we hover over it, adding in class of box so we
get some styling to create them into more of a box style, setting some defaults.
So we're setting default to red in color as well as we add hidden value of the element of the elements
of a value of word there and setting that word to be equal to the word that we're outputting from the
array so that we can compare that later on to check to see if the player got the word correct.
We added in some event listeners.
So Mouse, enter where we update the color and then we update the text that's going to be contained
within that box.
And then once the most leaves, we reset it back to what originally was.
And we had the word select and we also have the word select there as well.
Next, we add an event listener and this is the click event.
So this is that player interaction.
So the player interacts with that content, they click it.
We do a comparison of the word we've picked up over here, as well as whatever the current word is that
the player is searching for.
If it's a match, then we add the class of hidden, effectively hiding that box element, and then we
increment the current value of the item, the index value that we're on in the array, and then we run
the function next word, which generates out the next word visibly for the player.
We also have an else wrong going into the console.
So this one we're not really utilizing, but we could potentially penalize the.
Player for getting something wrong, so we could add to that, so that's an addition that we could add
into the gameplay.
And then once we've generated all of the elements, object information, we simply append it to game.
And then once we've wrapped up all of those elements that we've added all that functionality and generated,
we want to generate out the next word.
And that's going to be for the player to be able to see the next word that is available.
And because the current is set to zero, it's going to show that first word within that array.
And then we go through checking to see if the value of current is larger or equal to the my words length.
And that means that the game is over.
And if the game is over, we get the end time.
We calculate subtracting the start time from the end time, dividing it by a thousand.
So that gives us how many seconds the game was played.
We update the game content, erasing all of those elements with the words because we're resetting it
back to the beginning set so that we can launch start again.
We saw that start button and then we output to the player the game over and how many seconds it took.
And otherwise, if the game isn't over, then we output the next word for the user to select from the
elements that are available on the page.
We create a function to easily output messages into our game area for the player to be able to read.
And it's actually that was a wrap up of all of the functionality that we had within our gameplay, and
I do suggest that you try this out for yourself and get familiar with all this JavaScript functionality.
And also we built this out to be dynamic.
So even if we were to add in additional words, our application would wouldn't break it still be functional
and we could add new words and we could have multiple arrays of words and so on.
So have some fun with it.
Try it out for yourself.
And remember, all of the source code is included so you can easily copy and paste the code in order
to get the same application working within your editor.
Thanks again for taking this section and learning how to build this application from scratch.