Welcome back in this lesson, we're going to do a quick improvement on the game.
So currently we have a game where we have an element that shows up somewhere randomly within our container.
We track how long it takes the user to click that element.
So what if we want to make an improvement to this where we don't want the game to stop and start and
always have that start button that says we're going to do in this lesson?
Where are we going to set up some intervals and have some timers that we need to clear out and so that
we can continuously keep playing the game.
So we've got our event listener where we're adding in the start button.
So what we want to do here is we want to relaunch Mieke items.
So this will make another item after we clicked it.
We can get rid of the start game button, just simply hide that one and we've got our score area so
that one will still show up.
And instead of having a start button, we're just going to launch another element to try that out.
So we've got our elements.
We've got another element, another element, another element to it if we want to make it even more
interesting where we want to have a timer so that setting up another object here called timer, we're
going to set the time out.
And just as we've built before, we need some values here, some parameters within the timeout.
It's going to run this block a after the timeout completes.
So right now, we'll set it up for one second.
And basically what will happen is we're going to show the element for one second and then we're going
to get rid of it off of the page.
So taking the container and removing the child with the attributes, with the element that matches the
div and we've still got that div object and then we're going to create a brand new one.
So it's going to be a little bit of a problem with this, because what's going to happen is that if
we click it, then we're going to throw an error and if we don't click it, then everything's fine.
We're going to have a new square showing up every second.
It's always going to be moving around.
So what we need to do is we need to update our code where we need to clear the interval.
And that's why I give the interval a variable name so that we can access that interval and we can do
a clear timeout or clear interval.
And in this case, it's a timeout.
So we need to clear this one out before we remove the child.
And this will give us the ability to click it, not have it interfere with our gameplay so we can see
that we're clicking it and we're updating the score.
And it actually doesn't matter.
So if we click it, if we miss it, so sometimes we're clicking at sometimes we're missing it and so
on.
So this is more effective way to create the gameplay.
So go ahead and add in these changes and updates and you're free to update and tweak the game as necessary
in order to produce the gameplay that you're looking for.
And coming up next, we'll do a quick overview and a review of the code that we've worked on in order
to build this application.