1
00:00:00,670 --> 00:00:01,160
Welcome.

2
00:00:01,180 --> 00:00:05,920
This is going to be the lesson we're going to set up our basic game structure, so setting up some of

3
00:00:05,920 --> 00:00:09,830
our HTML and then connecting it to JavaScript object.

4
00:00:09,940 --> 00:00:13,810
So first of all, let's create an area where we can display the score.

5
00:00:14,380 --> 00:00:18,430
We can just give it a class of score and we'll connect to it again with JavaScript.

6
00:00:18,670 --> 00:00:21,800
So try to keep the HTML to a minimal as possible.

7
00:00:21,970 --> 00:00:27,880
Then we've got our game area and then within the game area we can add a few more divs.

8
00:00:28,660 --> 00:00:30,910
One of them can be our start screen.

9
00:00:30,970 --> 00:00:36,130
This is the start screen that's going to be displayed to the player as they come in and we can add in

10
00:00:36,130 --> 00:00:40,540
some content in their price was just right in their press start.

11
00:00:40,690 --> 00:00:46,500
We'll also create a game over message so this can be a class of game message.

12
00:00:46,750 --> 00:00:50,890
So any of the communications and by default I'm going out of class of hide.

13
00:00:51,250 --> 00:00:57,130
And then this is the class that we can toggle to hide and show this particular element and all using

14
00:00:57,130 --> 00:00:57,820
JavaScript.

15
00:00:58,060 --> 00:01:02,410
And the lastly, one more class that we need to create, one more element that we need to create.

16
00:01:02,680 --> 00:01:05,010
And this is going to be our main game area.

17
00:01:05,140 --> 00:01:11,320
So this is where all the action is going to happen and that should be it for the HTML in order to start

18
00:01:11,320 --> 00:01:12,260
our gameplay.

19
00:01:12,400 --> 00:01:15,700
There's a few styles that we do need to take care of as well.

20
00:01:15,710 --> 00:01:17,650
So we created one called height.

21
00:01:17,950 --> 00:01:22,470
And what this one will do, this one will display and show elements.

22
00:01:22,480 --> 00:01:24,250
So by default it will be none.

23
00:01:24,490 --> 00:01:30,910
And when we add it to any one of our elements that we're going to not see that particular element so

24
00:01:30,910 --> 00:01:35,380
we can use that within our JavaScript in order to highlight and show element.

25
00:01:35,410 --> 00:01:37,840
Also, let's set up our game area.

26
00:01:37,870 --> 00:01:44,200
So adding in some styling and this is just some quick styling, just background color.

27
00:01:44,350 --> 00:01:47,330
And we'll do that as Sky-Blue setting a width.

28
00:01:47,350 --> 00:01:51,160
So this is going to be one hundred percent height of one hundred percent as well.

29
00:01:51,280 --> 00:01:55,870
And we'll set the margin to auto, even though we're not going to see it because we're at 100 percent

30
00:01:55,870 --> 00:01:56,800
and 100 percent.

31
00:01:57,050 --> 00:02:00,530
So this is just in case we decide to adjust the size.

32
00:02:00,580 --> 00:02:06,880
Also, let's set up some Class four score as well so we can see the score output, setting this one

33
00:02:06,880 --> 00:02:12,130
as a background color of black and having the text so that we can see it really easily.

34
00:02:12,340 --> 00:02:17,350
We can text, align line center, let's set a height for this one and then font size.

35
00:02:17,870 --> 00:02:23,710
It's a little bit bigger than the standard font and then also a font family to make it look a little

36
00:02:23,710 --> 00:02:24,490
bit more interesting.

37
00:02:24,910 --> 00:02:26,080
So let's refresh.

38
00:02:26,500 --> 00:02:29,170
And so now we've got our score area.

39
00:02:29,170 --> 00:02:35,680
We've got a message to press the start, and we also need to set up our start screen as well.

40
00:02:35,680 --> 00:02:40,060
So our start screen essentially is going to be our start button or start area.

41
00:02:40,150 --> 00:02:41,410
So make it stand out.

42
00:02:41,410 --> 00:02:43,180
We can do a background color of red.

43
00:02:43,180 --> 00:02:44,320
So it really stands out.

44
00:02:44,440 --> 00:02:48,730
We'll position it left twenty five percent, one hundred picks off the top.

45
00:02:48,850 --> 00:02:52,420
The color can be white and setting the width to be fifty percent.

46
00:02:52,420 --> 00:02:55,600
So its center lines add some padding then also a border.

47
00:02:55,690 --> 00:02:57,790
And let's refresh and we can text.

48
00:02:57,790 --> 00:02:59,530
Align this to center as well.

49
00:02:59,560 --> 00:02:59,930
So great.

50
00:03:00,040 --> 00:03:06,130
Next we need to set up JavaScript and now let's select those elements that we created.

51
00:03:06,310 --> 00:03:13,510
So select the one with the class of score using document query selector and selecting the element with

52
00:03:13,510 --> 00:03:14,080
score.

53
00:03:14,110 --> 00:03:21,160
We can also select our start screen into an object, the same format we're using query, select.

54
00:03:21,160 --> 00:03:25,990
And since there's only one and the one that we're trying to select, we can just use query selector

55
00:03:25,990 --> 00:03:26,530
for this one.

56
00:03:26,710 --> 00:03:29,080
Let's also select our game area.

57
00:03:29,080 --> 00:03:31,530
So this is where all the action is going to happen, all the gameplay.

58
00:03:31,570 --> 00:03:34,390
And let's do one more using the documents.

59
00:03:34,390 --> 00:03:38,860
So let's refresh and make sure that we do have the right elements.

60
00:03:38,860 --> 00:03:39,970
So we do have our score.

61
00:03:40,360 --> 00:03:41,620
I'll make this a bit bigger.

62
00:03:41,650 --> 00:03:43,420
We've got our start screen.

63
00:03:43,420 --> 00:03:48,130
So I'm just selecting the objects in JavaScript and I'm not putting them in the console.

64
00:03:48,130 --> 00:03:54,340
And when I put in the console, they should return back the correct element that's been selected into

65
00:03:54,340 --> 00:03:54,970
that object.

66
00:03:54,970 --> 00:03:57,940
And then the last one, we've got our game message.

67
00:03:58,270 --> 00:04:00,790
So everything looks ready to go for the next lesson.

68
00:04:01,000 --> 00:04:03,730
So go ahead and set up your game screen.

69
00:04:03,970 --> 00:04:05,470
Adding in the elements.

70
00:04:05,860 --> 00:04:11,920
You can apply some styling, you can customize the styling as well a bit the elements into objects that

71
00:04:11,920 --> 00:04:16,180
are going to be usable within the upcoming lessons as we called out our application.