1
00:00:00,710 --> 00:00:03,590
This lesson, we're going to be showing you how you can start the game play.

2
00:00:04,460 --> 00:00:08,870
We need to set up a few more global variables in order to use them.

3
00:00:09,260 --> 00:00:11,860
So let's grab and set up play area.

4
00:00:12,800 --> 00:00:21,110
And this is an object where we can set certain values within it, variable to store the start time.

5
00:00:21,470 --> 00:00:25,110
So set that one up and leave that blank just as start.

6
00:00:25,340 --> 00:00:32,920
So we have something to fill in and we want to get the start time whenever the player starts playing.

7
00:00:33,170 --> 00:00:36,530
So the players plus the start button, the game is in play.

8
00:00:36,710 --> 00:00:41,690
And before we show any buttons or boxes, we need to log that start time.

9
00:00:41,870 --> 00:00:44,510
And the start time is going to be coming from the system.

10
00:00:44,510 --> 00:00:47,810
The computer system start time because it's browser based.

11
00:00:48,080 --> 00:00:53,240
So whatever your computer time is on your computer that you're using, it will show that.

12
00:00:53,840 --> 00:01:00,260
And for this example, we're going to be making use of JavaScript Dete method and within the method

13
00:01:00,440 --> 00:01:08,480
we have a way to get the timestamp and the timestamp is get time, which records the number of milliseconds

14
00:01:08,630 --> 00:01:11,320
since January 1st, 1970.

15
00:01:11,540 --> 00:01:15,680
So if we have a time before 1970, are we going to see it's negative?

16
00:01:15,830 --> 00:01:20,160
And if we have a time after 1970, you're going to see it's positive.

17
00:01:20,360 --> 00:01:22,700
So if I had run here, we've got negative.

18
00:01:22,880 --> 00:01:30,620
If I just do the date and if I hit run, this is going to give us the current number of milliseconds

19
00:01:30,980 --> 00:01:34,700
that it has been since January 1st, 1970.

20
00:01:34,970 --> 00:01:36,980
So you can go ahead and try this out for yourself.

21
00:01:37,130 --> 00:01:44,780
You can go over to the MDN website, or you can just simply type in the new date and then get time within

22
00:01:44,780 --> 00:01:46,160
your JavaScript.

23
00:01:46,160 --> 00:01:47,840
And you can see that being rendered out.

24
00:01:48,050 --> 00:01:53,660
And your time will obviously be different than mine because this is the number of milliseconds.

25
00:01:53,660 --> 00:01:55,080
So this is constantly changing.

26
00:01:55,310 --> 00:01:58,340
So if I click it one more time, you're going to see that now.

27
00:01:58,340 --> 00:01:59,480
It's already updated.

28
00:01:59,570 --> 00:02:01,940
It's been a bunch of milliseconds since I've been talking.

29
00:02:02,180 --> 00:02:04,400
So let's bring this into our project.

30
00:02:04,400 --> 00:02:10,790
And this is how we're going to grab the time that the player starts and using that start variable that

31
00:02:10,790 --> 00:02:13,370
we've set up using DETE.

32
00:02:14,390 --> 00:02:20,390
So creating a new date object in JavaScript and we can change those methods together.

33
00:02:20,540 --> 00:02:21,620
So you have an option here.

34
00:02:21,620 --> 00:02:27,560
You can do it separately and then use the moon landing like they did over here and we could use start

35
00:02:27,560 --> 00:02:29,540
and then use start, get time.

36
00:02:29,780 --> 00:02:34,970
But we're just going to chain them together to save a little bit of space on the statements and we're

37
00:02:34,970 --> 00:02:36,400
going to use that get time.

38
00:02:36,620 --> 00:02:43,040
So now it's going to log the current starting time in milliseconds and which is going to give us a starting

39
00:02:43,040 --> 00:02:48,850
point and we can use that variable afterwards to record the finishing time.

40
00:02:49,040 --> 00:02:55,460
So when we start, you can see that we get our time in milliseconds, the time and milliseconds.

41
00:02:55,550 --> 00:03:00,890
So now it's recorded in the global variable start and we can make use of it within our game.

42
00:03:01,940 --> 00:03:06,260
So the next thing that we want to do is we want to launch the circles showing up.

43
00:03:06,650 --> 00:03:09,740
So I show you how to do that in the upcoming lesson.

44
00:03:09,860 --> 00:03:17,240
We'll create another function for that and we're going to launch that using set time out so that it's

45
00:03:17,240 --> 00:03:22,030
more unpredictable and the players actually not going to know when the circles are going to show up.

46
00:03:22,400 --> 00:03:29,090
So go ahead and pause the video, add this into your code, add the date object into your code, get

47
00:03:29,090 --> 00:03:31,520
the current time output into your console.

48
00:03:31,790 --> 00:03:34,730
Get familiar with the date object in JavaScript.