Welcome back in in this lesson, we're going to be doing a final overview of the game and separating
it out, cleaning it up and so on.
So one of the things that I did notice is that we do have a problem here where we're covering up the
score and that's contained within the stats class.
So let's make a quick adjustment within the stats class, adding in some success.
And this is usually what I do at the end.
I like to just kind of fine tune the look and feel of it.
And of course, in this, I'm just I don't want to focus too much on the success.
So I'm just doing a quick adjustment to some of the success.
Also, it can do a font size as well.
So it's a little bigger and wall text allowing it to center to see what that looks like.
So refresh.
Press button to start.
We should also move the button down as well.
So we've got our page.
Margin and will set the margin to auto.
And text Aline.
Or we're going to set margin top.
Margin top analysts do 40 picks, so that will move it down.
So it's going to put our button down so that way it's not going to interfere with our game and we've
got our game separated out.
So next, let's just do a quick clean up of the source code.
We're going to take this style out, will make a new separate style page for that.
So a new file, we can call it style dot scissors, and we're just going to link to it within our code
and I'll clean this one up as well.
So go back to index.
So using link.
Arial type Texas and using ATRA style, see us go and refresh, so that's working.
And now next, let's take the JavaScript out and then we'll do a quick overview of all the functions
within the code here.
And we're going to link out to a source and it's still got to create it.
So let's dump that in here and we'll save this as script dot James.
And I'll clean that up and then we'll do a quick overview of the code, so we're linking out to script
dot J.S..
And that should clean that up, so just make sure everything is still working and functioning properly
so there's not a whole lot here within the TEMEL, we tried to keep it as a minimum, so we created
our basic classes and our basic game area container.
We also made a fairly dynamic within the JavaScript so that we can add more buttons, we can add more
pages and we can extend our game to have a lot more functionality if we wanted to.
The styling was as simple and straightforward.
We applied a little bit of styling, minimal styling in order to make the game look a little bit more
attractive within the script.
We're going to do a quick run-Through.
So first of all, we set up a couple objects that we're going to make use of throughout the game.
So these are objects we've got play area and player, our main core objects.
The player is the one that's actually going to be changing when we start the game changes, the play
area should stay the same.
And that's where we're using all of our main document objects that we're placing in there.
We also got the game object, so that's where we can hold our data.
And of course, we could have also loaded that within a plate area object as well.
So we could have done that to kind of clean things up.
But for now, we're going to leave it because we did want to keep it separate because there was a few
different ways that we're bringing that data in and you can use the fetch or you can just simply use
a JavaScript object.
And that gives you the ability to adjust some of these values.
Or you could use the default values that have in the JSON file.
So next we select that the elements that we're going to be using.
We also selected all of the elements, the buttons and the pages.
So as we said, we did want to make it dynamic.
So if we added more buttons, we can make use of it.
We turn these into actual arrays from the node lists.
Now, you don't have to do this.
I was just demonstrating that this is an option.
And we showed you later on how we can just use query selector all and grab all of the ones that the
class and use the node list.
We can get a length from there as well.
But this is in case you ever want to output that or move it, use it within a more of an array format.
You can do it within this way as well.
This gave us actual arrays that we could make use of.
So the button was an actual array.
So we loop through it and we added the event listeners onto that arrays.
So whenever any one of the buttons gets clicked, we've got a function called handle button.
So that handle button, what that does is that checks to see what class is contained in there.
So if you added new buttons, you can have new game one, new game two and so on and so on, just giving
them the classes.
And that's going to give you the ability to select those different buttons.
But we only have one button so far within this game.
So we've also got start game.
We can get rid of the console messages because they're not needed anymore.
So we launched the function start game whenever the new game button is clicked.
And this time now it says try again.
So whenever a new game is clicked, that's going to basically start the game.
So what's going to happen is that we're resetting those player object values.
So score to zero items to zero.
So the items is the number of lives essentially that you have where updating adding a class of visible
to removing the class visible from the main page and adding it to the game page.
So essentially of two different pages in this game.
So we're toggling between the two.
We're setting player game over to false.
So it's going to allow the game to play and function.
If this goes to true, that that means our game stops.
Stops.
We had to start pop and we have an update score.
So the update score was fairly straightforward.
It simply updates the score of the page.
So that was just up here at the top here where we were updating that play area.
And we need to call to this several times.
That's why I threw it into a function.
And then going down here where we've got the start pop, so this actually starts the game going and
we get a random element from the ones that were created.
So the game board gets created when the page loads and we're selecting a random one.
They all have a class of pop in them.
So that makes them really easy to go and select.
So if we go over to here, we can see that this was all generated with JavaScript and we've got all
of these divs that were created and they all have a class of pop.
So what's happening here when we click random up function is where grabbing going into the document
object using query selector, all selecting all the elements with a class of pop, putting them into
our node list.
With the node list we have a length, so we're selecting one at random, using the math random and javascript.
And what we're doing over here is we're checking to see if it's the same as the last one.
And if it is, then we're running that function again and hopefully we continue to run it through and
then eventually we're going to get something that's different from the last one over here.
So once we pass this part, if it's different one, then we're setting it as the new lost value.
So whatever the value of the county is, and then we're returning back that element that we've selected
and that's putting it into our variable new pops or our new object, I can get rid of this console message
as well.
We're adding a class of active to it.
So what that's doing is that's activating.
And the active class has that blue background, light blue background, and it's doing the border shadow
and so on.
So it's got a few other more visual cues to it where adding an event listener to them.
So that gives that makes them clickable.
If they get clicked, it goes to a function called hip hop.
We're getting a random time so we can also do floor or ceiling.
It doesn't actually matter.
This is just a random number.
You can adjust this and make the game a little bit harder or easier depending on how challenging you
want to make it.
We're setting our random we're selecting a random object that we've got from the list of all the objects
here.
And so this is again, this is very dynamic.
So if we get more items within that object list, they're just going to easily flow into the gameplay
because we're using length.
So we're not setting a default one.
We're making it as dynamic as possible and as robust as possible.
We're storing we're creating a new value in new pop object of old and we're storing that inner text.
So that gives us the ability to remember whatever that value was.
So when we don't have to show that icon anymore, then we can always go back to the original value that
was sitting in there.
And over here we're setting a value.
So we're getting this from that object value.
So each one of these items within that object have an icon.
So that's the icon that's shown.
And then this is the value that's associated with it.
We've got our inner HTML where we're outputting the icon and the value.
So that's visible to the player so the player knows what they can click and what they can't click.
We're setting within the play area.
We're setting a new value called inplay, and this is our time out function.
And at times on whatever that random time that was created, we're removing.
So once the timeout is done, it's going to run the code that's in here.
So it runs all of this code, whatever.
That time out is ready.
We're removing the class of octave.
So the same one that we added in, we're just removing it out.
So it's not going to be popped up anymore.
We're removing the ability to click on it.
So we don't want people clicking on it afterwards, of course.
And we're updating the inner text with that old value that we've got here.
So basically resetting it back to how it was that we've got a few checks that we're doing here.
So we're checking to see if the value is greater than zero.
And if it is, that means that the player should have clicked it and because they didn't click that
they lose a life.
We update the score every time we make an adjustment to the score.
And also, if the player has less than or equal to zero, then that means that's game over and we end
the game.
And if it's not game over, if the player is still not in GAMEOVER mode, then we start the pop once
again.
So we start the same function once again, game over.
It sets that player game over to true and it toggles our review of our pages.
So setting the main page to visible, so showing us our try again button hiding that game board.
So we're removing the classic visible and then we're updating the value with the new game element with
try again.
So that's essentially it.
And of course, you can adjust the values and variables that we set up within the game we saw earlier
how we can update the rows and columns and that will update how many rows and columns we have in our
board.
So you can make it a little bit more challenging if you want.
We're dynamically adjusting the width of the gameplay area and we're also centering it, so centering
it within the elements.
So even if you make the page really big, you see that it's always centered nice and neatly.
We're also setting and creating these elements on the fly, so whenever we're resetting the gameboard,
we clear it all out and we start again.
So whenever we're doing start, we're simply building it out and then we're spending it to the main
play area.
So that's going to give us a brand new board each time freshly created using JavaScript.
And this is done through the board builder.
So we don't have to do this more than once.
Once we start the game, the board is built and it's fully functional.
But in case you do need to build the board again, you've got that within a function where you could
rebuild it really easily if you want to do that.
So hope you enjoyed this course and do try it out for yourself, I've included all of the source code.
If you have any questions, please feel free to ask within the Q&A section.
I'm always happy to answer any questions, clarify any content that is has been presented within the
course.
Thanks again for taking the course.
See you next time.