1
00:00:00,460 --> 00:00:06,370
This lesson, we are going to be looking at starting the game and we can, of course, launch the game

2
00:00:06,370 --> 00:00:13,540
right away when it starts, but there's a better effect if we add in a timeout in order to start launching

3
00:00:13,540 --> 00:00:15,550
the shapes from showing up.

4
00:00:15,730 --> 00:00:20,320
And this way, the user can not know when to expect them to show up.

5
00:00:20,530 --> 00:00:23,990
And the way that we're going to do that is we're going to use set timeout.

6
00:00:24,010 --> 00:00:31,180
So what set timeout does is it allows us to set a timer which executes a function or a specific piece

7
00:00:31,180 --> 00:00:35,020
of code at a specific time when the timer expires.

8
00:00:35,350 --> 00:00:40,600
So the way that it works, we've got a function, we've got some code and we've got our Dile that we

9
00:00:40,600 --> 00:00:41,410
want to add in.

10
00:00:41,590 --> 00:00:47,260
There's an example of it over here where we've got delayed alert, cleared alert.

11
00:00:47,410 --> 00:00:52,270
And this is actually how you can clear the time out and you can also set the time out.

12
00:00:52,450 --> 00:00:53,950
So we've got our time out.

13
00:00:54,190 --> 00:01:00,940
We can add in window windows an optional it is a Windows method that's available in JavaScript, but

14
00:01:00,940 --> 00:01:02,080
you don't have to include the window.

15
00:01:02,080 --> 00:01:09,550
You can just do set time out and then have the function that you want to get invoked after this time

16
00:01:10,210 --> 00:01:11,800
is rendered out.

17
00:01:11,800 --> 00:01:13,180
And this is in milliseconds.

18
00:01:13,330 --> 00:01:16,540
So this is two seconds or 12 milliseconds.

19
00:01:16,700 --> 00:01:24,370
And then lastly, you can also have a parameter that we're passing in into this function at this point.

20
00:01:24,520 --> 00:01:26,860
And then at once we want to clear the time out.

21
00:01:27,070 --> 00:01:28,980
We can always select the time out.

22
00:01:29,080 --> 00:01:33,190
And that's why we assign a variable to this time out object.

23
00:01:33,310 --> 00:01:35,740
And that way we can clear it when we need to clear it.

24
00:01:35,890 --> 00:01:37,570
And you can see this in action.

25
00:01:38,380 --> 00:01:40,030
So it's going to show an alert box.

26
00:01:40,030 --> 00:01:46,330
After two seconds, there's our alert and we can also clear the alert before it happens so we can start

27
00:01:46,330 --> 00:01:48,540
it and then we can clear it so it never happens.

28
00:01:48,970 --> 00:01:52,600
Let's bring this into our code and start our time out.

29
00:01:53,050 --> 00:01:56,710
We launch this function right away by default, the white box.

30
00:01:56,980 --> 00:01:58,720
So let's add that into the timeout.

31
00:01:59,050 --> 00:02:02,950
And I need to set up a value so that I can access and clear it.

32
00:02:03,220 --> 00:02:04,810
So we're going to use play area.

33
00:02:04,990 --> 00:02:12,820
And because it's an object, then we can add in the timer within here as part of the object using the

34
00:02:12,820 --> 00:02:21,910
set timeout method is going to run the my box function at a given period of time, and this time we

35
00:02:21,910 --> 00:02:28,540
can set it to a preset value to like every starting after two seconds, I can get rid of that my box

36
00:02:28,540 --> 00:02:31,300
value there, or we can randomize this.

37
00:02:31,480 --> 00:02:38,020
And because we did set up this nice random function that we did earlier, we can set this to anywhere

38
00:02:38,020 --> 00:02:40,750
from zero to thirty seconds.

39
00:02:40,960 --> 00:02:43,120
So let's try that out and see it in action.

40
00:02:43,780 --> 00:02:45,470
Restart set timer.

41
00:02:46,060 --> 00:02:47,920
So we had start that time.

42
00:02:47,920 --> 00:02:49,060
It showed up really quickly.

43
00:02:49,270 --> 00:02:51,250
This time there was a little bit of a lag there.

44
00:02:51,250 --> 00:02:55,120
And again, we don't know when it's showing up because this is randomized.

45
00:02:55,360 --> 00:03:02,260
So go ahead and add this into your project, add the set timer and set a random time for the square

46
00:03:02,500 --> 00:03:03,670
or the shape to show up.

47
00:03:03,880 --> 00:03:08,350
And coming up next, I'm going to show you how you can make these shapes interactive so we can finally

48
00:03:08,350 --> 00:03:11,050
click on these and end the game.

49
00:03:11,080 --> 00:03:13,300
So that's all coming up in the upcoming lesson.