1
00:00:00,120 --> 00:00:05,850
This is our set up lesson where we're going to be setting up the HTML as well as connecting our JavaScript

2
00:00:06,000 --> 00:00:10,140
to the HTML in order to begin our game development process.

3
00:00:10,360 --> 00:00:12,930
So first of all, we need a way to display a score.

4
00:00:13,150 --> 00:00:15,780
We need a way to display a score to the player.

5
00:00:15,990 --> 00:00:23,850
We also want to have score, stay on screen and then adjust a particular element or a particular span

6
00:00:23,880 --> 00:00:24,640
on the page.

7
00:00:25,020 --> 00:00:27,900
So updating that and we need a way to select that.

8
00:00:28,080 --> 00:00:33,780
So we've created a span with a class of score and we're going to use JavaScript to update that.

9
00:00:34,140 --> 00:00:38,500
We also have another value that we want to present to the player.

10
00:00:38,910 --> 00:00:45,960
So this one is going to be enemy left and this will be calculating how many bad guys are still left

11
00:00:45,960 --> 00:00:47,840
to come out on the screen.

12
00:00:48,180 --> 00:00:50,310
So we'll give this one a class as well.

13
00:00:50,520 --> 00:00:55,150
We can call it bad left and by default, we'll just set it to zero.

14
00:00:55,350 --> 00:00:59,520
We also need a mean game container, so we'll give it a class of container.

15
00:00:59,730 --> 00:01:02,700
And then this is where all the gameplay will take place.

16
00:01:02,940 --> 00:01:06,880
Starting out will also create a class called Message.

17
00:01:07,200 --> 00:01:09,570
So this is where our message area goes.

18
00:01:09,660 --> 00:01:16,320
And any information we want to present to the player we can add in here, such as press start to begin.

19
00:01:16,590 --> 00:01:21,900
So that means that we also need to create our start button so this can be a div as well, and we'll

20
00:01:21,900 --> 00:01:23,220
adjust it with styling.

21
00:01:23,380 --> 00:01:30,820
So give it a class of B10 and this will be our start button and we'll label it such as well.

22
00:01:31,110 --> 00:01:34,760
And then lastly, we're also going to need the players element.

23
00:01:35,010 --> 00:01:41,170
So this can be called Baskett, a class of basket and we're going to design it using JavaScript.

24
00:01:41,520 --> 00:01:47,850
So this is all of the core elements that we need in HTML in order to present our content so we don't

25
00:01:47,850 --> 00:01:49,830
have an applied any staling to it yet.

26
00:01:49,830 --> 00:01:51,810
And we'll do that in the upcoming lesson.

27
00:01:52,140 --> 00:01:56,050
So this lesson, we're still going to connect our JavaScript to those elements.

28
00:01:56,610 --> 00:02:01,230
So let's set up a few variables and the first one can be message.

29
00:02:01,590 --> 00:02:08,450
So using document and query selector, we're going to select the element with a class of message.

30
00:02:09,030 --> 00:02:11,700
So prefix it with a dot to select class.

31
00:02:12,150 --> 00:02:15,060
We also need to select our score.

32
00:02:15,580 --> 00:02:22,490
We just call it score output using documents and query selector, once again selecting the element with

33
00:02:22,500 --> 00:02:28,800
a class of score so that we have that within an object format and we can utilize it in JavaScript and

34
00:02:28,800 --> 00:02:32,500
let's get the other ones into JavaScript objects as well.

35
00:02:32,520 --> 00:02:39,780
So query selector and we're going to select the element with a class of bad left so that we can update

36
00:02:39,780 --> 00:02:40,660
this information.

37
00:02:40,770 --> 00:02:47,220
We also need to select our button so we can just call it BTN and we'll use query selector again because

38
00:02:47,220 --> 00:02:53,040
we only do have those that one element that we are selecting and we'll also select the last one that

39
00:02:53,040 --> 00:02:53,670
we created.

40
00:02:53,820 --> 00:02:55,320
So that's the basket.

41
00:02:55,560 --> 00:03:03,060
And using the same format as the other elements, select that element into a JavaScript object and this

42
00:03:03,060 --> 00:03:05,640
one needs a dot in front of it because it's class.

43
00:03:05,850 --> 00:03:07,560
So let's refresh the page.

44
00:03:07,560 --> 00:03:12,720
And we don't see anything different within our HTML output and which just makes sure that we do have

45
00:03:12,720 --> 00:03:14,190
the elements selected properly.

46
00:03:14,190 --> 00:03:18,290
So now that we've got the element selected, we can update content within it.

47
00:03:18,720 --> 00:03:24,330
So if you want to update the text content, we could say hello in there and you can see that it updates

48
00:03:24,330 --> 00:03:25,020
automatically.

49
00:03:25,020 --> 00:03:26,790
So we've got that connection made.

50
00:03:27,090 --> 00:03:28,860
The other one is the square output.

51
00:03:28,860 --> 00:03:31,110
So that's where the score is going to be next.

52
00:03:31,110 --> 00:03:32,240
We have bad left.

53
00:03:32,250 --> 00:03:40,230
So updating that BTN and then the last element is the basket and then you can hover over these within

54
00:03:40,230 --> 00:03:45,240
the console just to make sure that you did select them properly and you're going to see them lighting

55
00:03:45,240 --> 00:03:45,480
up.

56
00:03:45,480 --> 00:03:46,920
And this is only in Chrome.

57
00:03:47,460 --> 00:03:50,160
Some of the browsers will handle the console differently.

58
00:03:50,370 --> 00:03:52,050
But in this case, we're using Chrome.

59
00:03:52,050 --> 00:03:57,540
And you can see as I hover over the elements in the console that we're returning back that are associated

60
00:03:57,540 --> 00:04:01,050
with the variable names that they highlight as well.

61
00:04:01,320 --> 00:04:06,060
And this is how you can be sure that you have made the connection and you're ready to move on to the

62
00:04:06,060 --> 00:04:11,910
next step where we're going to create in the interaction and updating the content contained within these

63
00:04:11,910 --> 00:04:12,420
elements.

64
00:04:12,600 --> 00:04:15,210
And that's going to be in preparation for the gameplay.

65
00:04:15,480 --> 00:04:19,980
And as well, we need to apply a little bit of styling to make it look more presentable.

66
00:04:20,100 --> 00:04:22,770
So that's still all yet to come in the upcoming lessons.

67
00:04:23,040 --> 00:04:29,760
So go ahead and set up your HTML core structure and the way that you can think about this is anything

68
00:04:29,760 --> 00:04:33,360
you need to present to the user to be able to play the game.

69
00:04:33,360 --> 00:04:39,150
This is what you can set up as your basic start content for your HTML.

70
00:04:39,330 --> 00:04:40,680
So we do have a score.

71
00:04:40,980 --> 00:04:46,710
We do have a bunch of enemies and it's useful information for the player to know how many are left.

72
00:04:46,980 --> 00:04:51,940
We have a main game area, so within the container and then we've got a message area.

73
00:04:51,960 --> 00:04:56,670
We can communicate with the player, we've got a button so that can start the game.

74
00:04:56,910 --> 00:04:59,610
And then lastly, we have a basket.

75
00:04:59,850 --> 00:05:04,500
And this is the players object that they're going to maneuver in the screen, so go ahead and set everything

76
00:05:04,500 --> 00:05:07,110
up and you're going to be ready to move on to the next lesson.