1
00:00:00,270 --> 00:00:00,990
Welcome back.

2
00:00:00,990 --> 00:00:06,180
In this lesson, we're going to do a quick overview of what we built within the game.

3
00:00:06,510 --> 00:00:09,680
So first of all, we have one style, which is the box.

4
00:00:09,930 --> 00:00:11,340
We also have the gameplay area.

5
00:00:11,340 --> 00:00:12,900
So you can style that if needed.

6
00:00:13,080 --> 00:00:16,530
We created three different elements within our HTML.

7
00:00:16,530 --> 00:00:19,470
So button a message area and our gameplay area.

8
00:00:20,010 --> 00:00:23,040
We needed to create a few objects within the game.

9
00:00:23,190 --> 00:00:26,190
So we've got one that's called in play and then the play area.

10
00:00:26,190 --> 00:00:33,300
So play area is actually an object so we can utilize that and update the inplay value into it.

11
00:00:33,810 --> 00:00:40,770
So let's do play area dot in play so that will get rid of some of the excess there.

12
00:00:41,100 --> 00:00:45,150
And every time we're calling in play we can just use that object value.

13
00:00:45,510 --> 00:00:46,860
The clean set up a little bit.

14
00:00:47,010 --> 00:00:53,130
And you can also find that this is a great way to kind of place more of your content within an object

15
00:00:53,130 --> 00:00:53,640
format.

16
00:00:53,790 --> 00:00:58,420
So that's a lot easier to read when and relate to itself.

17
00:00:58,950 --> 00:01:00,900
So basically that's our play area.

18
00:01:00,900 --> 00:01:08,190
So while it's and play, then you can't click the button and this is where we connect it to all the

19
00:01:08,190 --> 00:01:10,820
different objects and move this function out.

20
00:01:11,400 --> 00:01:19,830
So we set up our initial variables, created some objects to contain the elements from our HTML, created

21
00:01:19,830 --> 00:01:25,260
a default start message within the message, added an event listener for the click button.

22
00:01:25,740 --> 00:01:32,070
So it's listing on the button and if the button gets clicked, then we hide the button and we set the

23
00:01:32,070 --> 00:01:32,840
game and play.

24
00:01:33,150 --> 00:01:37,890
We update the message to the player and we launch our show box.

25
00:01:38,250 --> 00:01:42,920
So what shoebox does is it starts the time and the timer area.

26
00:01:43,230 --> 00:01:50,880
We can also clean this up a little bit more as well, where we can just simply launch it like this so

27
00:01:50,880 --> 00:01:52,530
we don't need that extra function.

28
00:01:52,890 --> 00:01:57,900
So it is a good idea if you can remove content that go ahead and you can remove it as well.

29
00:01:58,260 --> 00:02:02,880
So we don't actually need the inplay either, but I'll leave that in because there are some benefits

30
00:02:02,880 --> 00:02:03,930
to doing it this way.

31
00:02:04,050 --> 00:02:08,710
If you add more functionality, that's always a good idea to have those options available.

32
00:02:09,180 --> 00:02:15,570
Next, we launch the function called my box, and that's where we create the element on the fly.

33
00:02:15,570 --> 00:02:22,850
So we create a div, add a bunch of style properties to that div added in and a class of box.

34
00:02:23,070 --> 00:02:29,070
So this one again is not necessary because we're building all of the styling out using JavaScript.

35
00:02:29,220 --> 00:02:31,740
So it's actually not necessary in the final product.

36
00:02:32,010 --> 00:02:34,020
We can also get rid of the console log.

37
00:02:34,170 --> 00:02:38,640
So all of these are setting style properties to that generated element.

38
00:02:38,940 --> 00:02:44,970
Then we're adding an event listener and we're also adding in an object value called START.

39
00:02:45,270 --> 00:02:50,520
And then lastly, we're adding it to the game area so the player can see it and it shows up on our screen.

40
00:02:50,700 --> 00:02:52,290
We added in an event listener.

41
00:02:52,290 --> 00:02:53,160
So that's the hit.

42
00:02:53,550 --> 00:02:57,360
And for the hit it's listening for whatever that element gets clicked.

43
00:02:57,660 --> 00:03:01,980
If it does get clicked, then we record the time in milliseconds.

44
00:03:02,340 --> 00:03:06,420
We pull back that start time that we created earlier over here.

45
00:03:06,420 --> 00:03:10,830
Within that object, we calculate out the duration in seconds.

46
00:03:11,220 --> 00:03:15,810
We output that value to the player so they can see how many seconds it took to click it.

47
00:03:16,230 --> 00:03:22,560
We clear the time out so that when it's already going to get cleared, because with the time it's going

48
00:03:22,560 --> 00:03:28,590
to run one time and execute that function, we add within the game area, we remove the element that

49
00:03:28,590 --> 00:03:29,190
got hit.

50
00:03:29,400 --> 00:03:34,350
So we're go to children and then we remove the first child, which is the only one that we have within

51
00:03:34,350 --> 00:03:34,740
the game.

52
00:03:34,950 --> 00:03:42,390
Set that timer again and we launch a new new shape to show up are utility functions where we generate

53
00:03:42,390 --> 00:03:42,930
a color.

54
00:03:43,230 --> 00:03:52,050
So using random as well as generating a hex value, we generate random hex value and here we make sure

55
00:03:52,050 --> 00:03:54,330
that it's at least got a zero in front of it.

56
00:03:54,420 --> 00:03:55,890
If it's only one character.

57
00:03:55,920 --> 00:04:01,050
And we return back a hex value, random color random, which we use throughout the game.

58
00:04:01,050 --> 00:04:02,790
So a lot of times we're using random.

59
00:04:03,000 --> 00:04:09,900
So we created a function to basically generate math random from JavaScript and we also have a messenger

60
00:04:09,990 --> 00:04:10,500
area.

61
00:04:10,500 --> 00:04:14,760
So message area that we output content into the inner HTML.

62
00:04:15,060 --> 00:04:20,460
So these were three utility functions that we built that we can utilize within this game or we could

63
00:04:20,460 --> 00:04:23,130
make use of within other games that we build out as well.

64
00:04:23,250 --> 00:04:24,840
So go ahead and try this out for yourself.

65
00:04:24,840 --> 00:04:29,430
All of the source code is included as well as this is step by step.

66
00:04:29,430 --> 00:04:35,760
So you can go through the lessons, try it out and extend on the gameplay, really make it your own.

67
00:04:35,760 --> 00:04:38,100
Get familiar with working with JavaScript.

68
00:04:38,310 --> 00:04:40,470
Thanks again for taking these lessons.