Welcome back.
In this lesson, we're going to do a quick overview of what we built within the game.
So first of all, we have one style, which is the box.
We also have the gameplay area.
So you can style that if needed.
We created three different elements within our HTML.
So button a message area and our gameplay area.
We needed to create a few objects within the game.
So we've got one that's called in play and then the play area.
So play area is actually an object so we can utilize that and update the inplay value into it.
So let's do play area dot in play so that will get rid of some of the excess there.
And every time we're calling in play we can just use that object value.
The clean set up a little bit.
And you can also find that this is a great way to kind of place more of your content within an object
format.
So that's a lot easier to read when and relate to itself.
So basically that's our play area.
So while it's and play, then you can't click the button and this is where we connect it to all the
different objects and move this function out.
So we set up our initial variables, created some objects to contain the elements from our HTML, created
a default start message within the message, added an event listener for the click button.
So it's listing on the button and if the button gets clicked, then we hide the button and we set the
game and play.
We update the message to the player and we launch our show box.
So what shoebox does is it starts the time and the timer area.
We can also clean this up a little bit more as well, where we can just simply launch it like this so
we don't need that extra function.
So it is a good idea if you can remove content that go ahead and you can remove it as well.
So we don't actually need the inplay either, but I'll leave that in because there are some benefits
to doing it this way.
If you add more functionality, that's always a good idea to have those options available.
Next, we launch the function called my box, and that's where we create the element on the fly.
So we create a div, add a bunch of style properties to that div added in and a class of box.
So this one again is not necessary because we're building all of the styling out using JavaScript.
So it's actually not necessary in the final product.
We can also get rid of the console log.
So all of these are setting style properties to that generated element.
Then we're adding an event listener and we're also adding in an object value called START.
And then lastly, we're adding it to the game area so the player can see it and it shows up on our screen.
We added in an event listener.
So that's the hit.
And for the hit it's listening for whatever that element gets clicked.
If it does get clicked, then we record the time in milliseconds.
We pull back that start time that we created earlier over here.
Within that object, we calculate out the duration in seconds.
We output that value to the player so they can see how many seconds it took to click it.
We clear the time out so that when it's already going to get cleared, because with the time it's going
to run one time and execute that function, we add within the game area, we remove the element that
got hit.
So we're go to children and then we remove the first child, which is the only one that we have within
the game.
Set that timer again and we launch a new new shape to show up are utility functions where we generate
a color.
So using random as well as generating a hex value, we generate random hex value and here we make sure
that it's at least got a zero in front of it.
If it's only one character.
And we return back a hex value, random color random, which we use throughout the game.
So a lot of times we're using random.
So we created a function to basically generate math random from JavaScript and we also have a messenger
area.
So message area that we output content into the inner HTML.
So these were three utility functions that we built that we can utilize within this game or we could
make use of within other games that we build out as well.
So go ahead and try this out for yourself.
All of the source code is included as well as this is step by step.
So you can go through the lessons, try it out and extend on the gameplay, really make it your own.
Get familiar with working with JavaScript.
Thanks again for taking these lessons.