1
00:00:00,300 --> 00:00:05,580
This is the lesson where things start getting interesting as we're going to be connecting to our HTML

2
00:00:05,580 --> 00:00:07,890
elements using JavaScript.

3
00:00:08,820 --> 00:00:13,560
So first of all, let's set up a mean container and we'll call it play area.

4
00:00:13,890 --> 00:00:18,870
So this is going to be our main game object, and I'm going to include all of the elements within the

5
00:00:18,870 --> 00:00:25,440
play area so that we have it nice and neatly within one object also set up another object that we can

6
00:00:25,440 --> 00:00:26,550
use for the player.

7
00:00:26,670 --> 00:00:32,020
And this is going to contain all of the variables that we're going to make use of for the player itself.

8
00:00:32,340 --> 00:00:35,000
So the next thing that we want to do, I'll move the screen up a little bit.

9
00:00:35,460 --> 00:00:41,940
We're going to use our freshly created play area object and we're going to add in the stats to it.

10
00:00:42,420 --> 00:00:48,970
And using our document query selector, you could also select elements by class.

11
00:00:48,990 --> 00:00:51,030
So there's a number of different ways to make the selection.

12
00:00:51,210 --> 00:00:57,750
My preferred way is to use query selector because it's most of you can select all of the different ones

13
00:00:57,750 --> 00:00:59,070
within that same format.

14
00:00:59,070 --> 00:01:04,630
And you just need to specify, just as you would with access, the element that you're selecting.

15
00:01:04,650 --> 00:01:10,710
And so now if a console log out my play area, you're going to see that I'm going to have that element

16
00:01:10,920 --> 00:01:12,230
within my object.

17
00:01:12,240 --> 00:01:18,230
And then that means that I can access it, I can update it, I can make use of it within my elements

18
00:01:18,570 --> 00:01:23,220
so we can see there if I want it to, for instance, update it, I can do play.

19
00:01:25,060 --> 00:01:33,440
Area starts and I can update the entire HTML to be hello, so make nice big hello there.

20
00:01:33,670 --> 00:01:37,610
So refresh and you can see that we've updated that element as hello.

21
00:01:37,930 --> 00:01:41,560
So that gives us the ability to work with all the different elements.

22
00:01:41,920 --> 00:01:48,280
So let's go ahead and add in some additional elements within our play area so we know that we've got

23
00:01:48,280 --> 00:01:50,320
our different screens here.

24
00:01:50,330 --> 00:01:51,940
So we've got the main page.

25
00:01:52,420 --> 00:02:00,790
So selecting out document and we can use query selector once again selecting it by the class.

26
00:02:00,790 --> 00:02:02,700
And we gave it a class of Maine.

27
00:02:03,550 --> 00:02:08,980
And this is one of the reasons actually I'd like to what I'm developing out games to keep it all within

28
00:02:08,980 --> 00:02:15,640
one HTML file so that I can easily refer back to it if I want or if you have tabs, you can switch them

29
00:02:15,640 --> 00:02:19,210
back and forth and tabs and we are going to break this apart afterwards.

30
00:02:19,630 --> 00:02:25,060
But this is just as we're building it out, it's a little bit easier that I can quickly see what I gave

31
00:02:25,060 --> 00:02:30,900
my class names to within that elements so that I can select them within the JavaScript.

32
00:02:31,240 --> 00:02:35,360
We also have play area, so we've got our main game area.

33
00:02:35,740 --> 00:02:43,120
So again, using document query selector and these are going to be very straightforward to select those.

34
00:02:43,120 --> 00:02:45,660
They're all class names that we're grabbing them by.

35
00:02:46,030 --> 00:02:49,060
So it makes it really easy to make these selections.

36
00:02:49,600 --> 00:02:56,690
And we also want to make a selection of our buttons as well so we can do play area.

37
00:02:56,980 --> 00:02:59,380
And this one, we're going to do a little bit differently.

38
00:02:59,380 --> 00:03:04,690
So there's you can do the buttons and you can get it within an object to node list.

39
00:03:05,180 --> 00:03:08,230
So we're actually going to transform that node list into an array.

40
00:03:08,500 --> 00:03:11,830
So first of all, let's select it within our node lists.

41
00:03:11,830 --> 00:03:20,530
So query selector and in this case, because there is more than one button class or there potentially

42
00:03:20,530 --> 00:03:22,990
could be more than one button class, we don't have more than one.

43
00:03:23,350 --> 00:03:29,680
But in case we do decide to add some more buttons, we can grab all of the classes that have a class

44
00:03:29,680 --> 00:03:30,640
name of button.

45
00:03:30,860 --> 00:03:36,790
And now if I do play area, I'm going to consult like this so we can take a closer look at it within

46
00:03:36,790 --> 00:03:37,980
the console area.

47
00:03:40,120 --> 00:03:46,910
So let's refresh and you'll see that within here, within the buttons, I've got a node list, so I've

48
00:03:46,930 --> 00:03:49,270
only have one item there within the node list.

49
00:03:49,600 --> 00:03:56,980
And in case we do want to add more so there is a way to transform this into an array and we can use

50
00:03:56,980 --> 00:04:01,780
the JavaScript array from we could loop through the node list as well.

51
00:04:01,780 --> 00:04:07,870
So there's a few different options are going to use a need array from and we're going to select that

52
00:04:07,870 --> 00:04:09,180
document elements.

53
00:04:09,520 --> 00:04:12,010
So now I see what the difference here is.

54
00:04:12,070 --> 00:04:14,820
We're actually transforming this into an array format.

55
00:04:15,100 --> 00:04:18,870
So now when we go in here and we do buttons, we see that we've got an array.

56
00:04:18,880 --> 00:04:22,690
So before notice that it's a node list, now it says an array.

57
00:04:22,720 --> 00:04:25,630
So this is just a regular standard JavaScript array.

58
00:04:25,780 --> 00:04:28,080
And now we can make use of all of the elements.

59
00:04:28,750 --> 00:04:32,140
So there's one other one that we want to make a selection of, and that's the page.

60
00:04:32,680 --> 00:04:34,000
So we're going to do the same thing.

61
00:04:34,000 --> 00:04:41,800
I can copy this one out and I can call this one page and this will list out all of the pages that I

62
00:04:41,800 --> 00:04:45,630
have within my element, within my HTML.

63
00:04:45,910 --> 00:04:46,720
So refresh.

64
00:04:47,020 --> 00:04:48,940
And now we can see under page.

65
00:04:48,940 --> 00:04:54,130
We've got two different elements there and we've got all of that information that's contained within

66
00:04:54,130 --> 00:04:55,060
those elements.

67
00:04:55,750 --> 00:04:58,590
So we've got quite a few things that are going on here.

68
00:04:59,170 --> 00:05:06,490
So what I want you to do now is try this out for yourself, open up your editor, select the classes

69
00:05:06,490 --> 00:05:12,070
that we're going to be making use of in the upcoming lessons and build it out in the same type of format

70
00:05:12,070 --> 00:05:15,100
that I have where you've got a play area object.

71
00:05:15,280 --> 00:05:20,920
And then within that object, it's going to contain all of the elements that we need to use in the upcoming

72
00:05:20,920 --> 00:05:21,550
lessons.

73
00:05:21,760 --> 00:05:26,290
So go ahead and build that out and I'll show you the next step where we're going to set up the player

74
00:05:26,530 --> 00:05:31,390
and prepare to create some interaction and functionality within the game.