This lesson, we are going to be looking at starting the game and we can, of course, launch the game
right away when it starts, but there's a better effect if we add in a timeout in order to start launching
the shapes from showing up.
And this way, the user can not know when to expect them to show up.
And the way that we're going to do that is we're going to use set timeout.
So what set timeout does is it allows us to set a timer which executes a function or a specific piece
of code at a specific time when the timer expires.
So the way that it works, we've got a function, we've got some code and we've got our Dile that we
want to add in.
There's an example of it over here where we've got delayed alert, cleared alert.
And this is actually how you can clear the time out and you can also set the time out.
So we've got our time out.
We can add in window windows an optional it is a Windows method that's available in JavaScript, but
you don't have to include the window.
You can just do set time out and then have the function that you want to get invoked after this time
is rendered out.
And this is in milliseconds.
So this is two seconds or 12 milliseconds.
And then lastly, you can also have a parameter that we're passing in into this function at this point.
And then at once we want to clear the time out.
We can always select the time out.
And that's why we assign a variable to this time out object.
And that way we can clear it when we need to clear it.
And you can see this in action.
So it's going to show an alert box.
After two seconds, there's our alert and we can also clear the alert before it happens so we can start
it and then we can clear it so it never happens.
Let's bring this into our code and start our time out.
We launch this function right away by default, the white box.
So let's add that into the timeout.
And I need to set up a value so that I can access and clear it.
So we're going to use play area.
And because it's an object, then we can add in the timer within here as part of the object using the
set timeout method is going to run the my box function at a given period of time, and this time we
can set it to a preset value to like every starting after two seconds, I can get rid of that my box
value there, or we can randomize this.
And because we did set up this nice random function that we did earlier, we can set this to anywhere
from zero to thirty seconds.
So let's try that out and see it in action.
Restart set timer.
So we had start that time.
It showed up really quickly.
This time there was a little bit of a lag there.
And again, we don't know when it's showing up because this is randomized.
So go ahead and add this into your project, add the set timer and set a random time for the square
or the shape to show up.
And coming up next, I'm going to show you how you can make these shapes interactive so we can finally
click on these and end the game.
So that's all coming up in the upcoming lesson.