Hello and welcome back.
So now that we've concluded our reaction game, we actually showed a couple of different versions of
how it can work.
We've got now one that constantly builds new clickable objects.
And we also had one earlier that just had the one object that you had to click.
So these ones disappear after one second.
You have to be relatively fairly quick to click them.
And if you go over one second, then they're already going to disappear.
So you can't actually score anything over than one second.
Let's go through our source code.
So we had some styling that we set up for our elements to make them look a little bit nicer.
We also had some HTML that we had to add in for the essential gameplay that we use JavaScript in order
to connect to the player, the objects so that we could select them and utilize them within our code.
We set up a player score which were not really making use of, but we could track how many times and
high scores.
So that's an option there to extend on the current gameplay.
Next, we came in and we added an event listener.
So the event listener was to start the game off.
So we come into the state where the game hasn't started.
There's no gameplay happening and it's up it's up to the user to click the start game button whenever
they're ready.
So the start game and then it launches the creation of the element that has to be clicked and that is
done within the make item function.
So that was really where the core gameplay comes into place.
We get our container boundaries and place them into an object so that we know where we've got our boundaries
and we don't want to place any of the elements outside of the boundaries.
Then we create an elements using create elements in JavaScript.
So create a diff setting all of the styling.
So there's a ton of styling that we set and all using JavaScript and also some math random in order
to randomize some of these values.
Then we had some objects that we were adding in some values that we were adding in in order to help
improve our gameplay.
And this is a good object to add that in because this is our existing object.
So it's always going to stay within that existing object.
So we'll always have a start time value within this object that we created.
And we can then use this start time to calculate out the difference between the end time and the start
time.
Divide up by a thousand.
And that's how many seconds it took the user to click the next element.
We output a score for the user to see how they scored, that we clear the timeout interval.
And so this was essential because if we're removing the element and we've got a timeout and then it
goes to try to remove the element, it's going to throw an error, as we saw.
So that's where we've got the clear timeout.
And then over here we're setting the timeout in a variable called div timer.
So that's where we get that one that we can also clear out.
And then these two do the same.
So they make a new element under make item and it also clears that div from the existing one.
I'm going to just change the order of that.
Even though it is working, it's always better to remove the element and then go initiate the function
to create a new one.
So I'm going to do the same for over here where we're going to remove the element.
Actually, this one was right.
So we removed the element and then make a new one.
And then lastly, we're appending that element that we just created into the container object.
And even though these are going to be different instances, so every time we create a new one, it's
creating a new div and it's playing all these properties to that new one.
So they're not really going to interfere.
But again, good idea to kind of to clear that up and keep the order in place.
So thanks again for taking this section and I hope you've enjoyed it.
I'm also always happy to answer and clarify any content questions that you may have in regards to the
content that we've covered in this section.
Please feel free to connect with me any time and also want to remind you that the source code has been
included so you can trade it for yourself and build your own version of the game.