1
00:00:00,090 --> 00:00:05,610
Hello and welcome in this lesson, we're setting up the game structure, HTML and then connecting the

2
00:00:05,610 --> 00:00:10,370
JavaScript to the HTML objects so that we can use them in the upcoming lessons.

3
00:00:10,620 --> 00:00:12,990
So let's go ahead and set up our basic structure.

4
00:00:13,200 --> 00:00:20,880
So this is what we want our interface to look like for the user so we can create one called Top Bar

5
00:00:21,060 --> 00:00:27,930
and we can have our score in here, as well as other stats that we might want to display to the user.

6
00:00:28,530 --> 00:00:32,660
And we'll give this one a class and this one will be specifically for score.

7
00:00:32,910 --> 00:00:34,140
So this is a span.

8
00:00:34,350 --> 00:00:40,440
And that means that if I use JavaScript, I can connect to that and I can update the value that's contained

9
00:00:40,440 --> 00:00:43,320
within the element with the class of score.

10
00:00:43,560 --> 00:00:45,990
We also need a main game container.

11
00:00:46,470 --> 00:00:49,890
So give this one a class and we can just call this one container.

12
00:00:50,040 --> 00:00:52,700
And this is where all of the gameplay will take place.

13
00:00:52,890 --> 00:00:57,180
So within the main game container, let's set up a way to start the game.

14
00:00:57,190 --> 00:01:02,040
So this is just a start button and we can just sinemet start game.

15
00:01:02,880 --> 00:01:04,920
This was an element where the game would start.

16
00:01:05,520 --> 00:01:08,720
We also need a few elements that we can interact with.

17
00:01:08,720 --> 00:01:09,690
Then we can move.

18
00:01:10,110 --> 00:01:12,480
So we're going to have one called my ship.

19
00:01:13,170 --> 00:01:17,100
This is going to be the player's ship that they're going to move around on the screen.

20
00:01:17,580 --> 00:01:20,250
And then also we need to set up another one.

21
00:01:20,760 --> 00:01:22,440
We can call this one Fiame.

22
00:01:22,740 --> 00:01:28,620
So this will be the projectile that the player is firing at the aliens and the aliens are going to get

23
00:01:28,620 --> 00:01:30,720
generated using JavaScript.

24
00:01:30,960 --> 00:01:36,440
So we're not going to include anything else and we're going to try to do as much as possible with JavaScript.

25
00:01:36,660 --> 00:01:41,190
So now we've got a basic structure for our game and it doesn't show a whole lot.

26
00:01:41,190 --> 00:01:43,530
It shows the score and a start game button.

27
00:01:43,740 --> 00:01:46,230
So we need to connect them into our JavaScript.

28
00:01:46,350 --> 00:01:48,900
So setting those up, we can have one.

29
00:01:48,900 --> 00:01:51,120
We can call it BTE and start.

30
00:01:51,120 --> 00:01:53,340
So this can be our start button object.

31
00:01:53,670 --> 00:01:59,190
So connecting to that existing object and making that connection with query selector.

32
00:01:59,400 --> 00:02:05,550
And when we do this, this gives us the option to interact with the content that's being presented on

33
00:02:05,550 --> 00:02:06,120
the page.

34
00:02:06,750 --> 00:02:13,140
So interact using the document object model and connecting to that instance of that element.

35
00:02:13,330 --> 00:02:19,140
So any of the updates that we do now with Button Start, it's going to be representing that object and

36
00:02:19,140 --> 00:02:22,440
that object is the element with the class of start button.

37
00:02:22,800 --> 00:02:24,870
And for classes, it's just like us.

38
00:02:24,870 --> 00:02:26,970
We need to include a prefix.

39
00:02:27,180 --> 00:02:33,510
So for classes it's a dot, for ideas it's a hash and for the tag names, it's just the tag name on

40
00:02:33,510 --> 00:02:33,990
its own.

41
00:02:34,200 --> 00:02:36,750
And selector selects the element.

42
00:02:36,960 --> 00:02:42,030
And if we have more than one element with the same class, it will select the first one that it finds

43
00:02:42,030 --> 00:02:42,730
on the page.

44
00:02:43,050 --> 00:02:45,540
Next, let's make a connection to the ship.

45
00:02:45,840 --> 00:02:49,740
And this is going to be the element that we're going to move around or the player is going to move around

46
00:02:49,740 --> 00:02:50,700
as they play the game.

47
00:02:51,180 --> 00:02:53,010
So we need to select that.

48
00:02:53,190 --> 00:02:58,940
And then, of course, we're going to be using that and manipulating its location using JavaScript.

49
00:02:59,490 --> 00:03:03,690
Another variable that we should set up is the main container.

50
00:03:03,730 --> 00:03:05,580
That's the main container object.

51
00:03:05,580 --> 00:03:08,120
And this is where all the gameplay is going to take place.

52
00:03:08,460 --> 00:03:15,360
So again, we can use query selector selecting the element with a class of container and the projectile

53
00:03:15,360 --> 00:03:17,130
that the player is going to fire.

54
00:03:17,250 --> 00:03:19,170
So we can just call that fire me.

55
00:03:19,200 --> 00:03:24,840
And these are just the variables that we're going to use in order to connect to those elements.

56
00:03:25,050 --> 00:03:32,070
And then lastly, let's have one four score output so we can output the score to the user and let them

57
00:03:32,070 --> 00:03:37,890
know what's happening and what they are scoring and how much their score is every time it changes.

58
00:03:37,890 --> 00:03:38,990
So that's what we need to set up.

59
00:03:39,390 --> 00:03:40,680
So go ahead and refresh it.

60
00:03:40,980 --> 00:03:46,560
And then usually what I like to do before we proceed is I like to list out all of these objects that

61
00:03:46,560 --> 00:03:50,010
we've connected to the elements and make sure that we do have that connection.

62
00:03:50,220 --> 00:03:56,970
And you can see once you listed out, once you listed the variable name, then you write in the console

63
00:03:56,970 --> 00:03:59,610
and you can see when you hover over it, it goes blue.

64
00:03:59,730 --> 00:04:05,250
And that means that the browser is able to detect which element we're referring to and the same thing

65
00:04:05,250 --> 00:04:07,680
for the ship and container.

66
00:04:07,920 --> 00:04:11,880
So we've got that mean div that's got the container Fiame as well.

67
00:04:11,880 --> 00:04:12,810
So we've got that one.

68
00:04:13,110 --> 00:04:15,240
And then lastly the score output.

69
00:04:15,540 --> 00:04:22,470
So now that we have those and we can update them using a JavaScript so we can do things like HTML and

70
00:04:22,470 --> 00:04:23,910
reset their values.

71
00:04:24,030 --> 00:04:29,490
And you can see that as I've updated here within the JavaScript, it's also updated on the page and

72
00:04:29,490 --> 00:04:33,450
that's what we want to make sure is happening, that we do have that connection and then we're all set

73
00:04:33,450 --> 00:04:35,760
to make the manipulation of the elements.

74
00:04:35,940 --> 00:04:39,330
So go ahead and set up your basic core structure for the game.

75
00:04:39,330 --> 00:04:44,670
He could be ready to move on to the next lesson where we bring in eventless or so whenever the button

76
00:04:44,670 --> 00:04:45,360
gets clicked.

77
00:04:45,570 --> 00:04:50,130
We're also going to apply a little bit of styling in the next lesson to make this look more like a button

78
00:04:50,250 --> 00:04:52,680
and then also some styling for the score.

79
00:04:52,710 --> 00:04:55,050
And that's all still to come in the upcoming lesson.