1
00:00:00,690 --> 00:00:05,820
Hey, welcome back in this lesson, we are going to be focusing on JavaScript whenever we start the

2
00:00:05,820 --> 00:00:07,710
game, we're running the IANSITI function.

3
00:00:07,890 --> 00:00:12,690
And so this is where we're going to focus, what we're going to be presenting and working on in this

4
00:00:12,690 --> 00:00:18,030
lesson and most of the upcoming lessons, because, of course, we do want to focus as much as possible

5
00:00:18,210 --> 00:00:19,390
on JavaScript.

6
00:00:19,710 --> 00:00:22,470
So let's first make some selection of elements.

7
00:00:22,740 --> 00:00:25,980
So within the page, we've got a number of different elements.

8
00:00:26,340 --> 00:00:29,340
So we're going to select them and give them an object name.

9
00:00:29,340 --> 00:00:31,560
So they're all going to be sitting within the page object.

10
00:00:31,770 --> 00:00:38,190
So that makes them a lot easier to select and keeps all of those elements within that one object so

11
00:00:38,190 --> 00:00:42,300
it's easier to work with in the upcoming lessons as we built the game.

12
00:00:42,540 --> 00:00:45,420
So we're making a selection of Motal one.

13
00:00:45,660 --> 00:00:48,270
So that's the element with the class of Motal one.

14
00:00:48,420 --> 00:00:51,990
It's now going to be within page Motal, one that makes sense.

15
00:00:52,200 --> 00:00:56,300
And when we want to reference that particular element, we can easily select that.

16
00:00:56,580 --> 00:00:58,470
Let's also get model two.

17
00:00:58,500 --> 00:00:59,880
We're going to do the same format.

18
00:01:00,060 --> 00:01:01,490
So that's easier to remember.

19
00:01:01,500 --> 00:01:03,970
And when we do need it within the code, we can select it.

20
00:01:04,380 --> 00:01:07,430
There's also going to be the model bodies as well.

21
00:01:07,710 --> 00:01:15,630
So adding in those and this is going to be modal body and selecting the element that just has a class

22
00:01:15,630 --> 00:01:17,730
of modal body.

23
00:01:18,210 --> 00:01:19,830
And I don't think we had the one in there.

24
00:01:19,830 --> 00:01:26,070
So just to model body and then the second one is the one that's going to have model body too.

25
00:01:26,280 --> 00:01:30,080
And this is the second element, and this is the one where we're actually making the deal with.

26
00:01:30,390 --> 00:01:34,230
So we could also rename them as well to keep that in sync.

27
00:01:34,290 --> 00:01:36,170
There's also the page starts.

28
00:01:36,170 --> 00:01:40,800
So we want to be able to select that start button because we want to make that element interactive.

29
00:01:40,800 --> 00:01:42,100
So page start.

30
00:01:42,420 --> 00:01:48,350
So these are all elements on the page, so keep them all within the page object and using documents.

31
00:01:48,360 --> 00:01:50,640
And how about we use query selector again?

32
00:01:50,970 --> 00:01:52,680
It's one of my favorite ones to use.

33
00:01:52,680 --> 00:01:58,830
Often do use query selector within the selection process because it allows us to use the cluster of

34
00:01:58,830 --> 00:02:00,440
selectors, so save it.

35
00:02:00,450 --> 00:02:02,520
So that gives us the start button.

36
00:02:02,730 --> 00:02:06,810
And now to make the button interactive, we can add an event listener to the start button.

37
00:02:07,350 --> 00:02:13,590
So let's do that where we've got the page start and add event listener and the event listener that we're

38
00:02:13,590 --> 00:02:15,310
going to listen for is a click.

39
00:02:16,050 --> 00:02:22,440
So this is going to make that start button interactive and it's going to kick off the start game function.

40
00:02:22,650 --> 00:02:27,840
And this is where we're going to load all of the default values that we're going to initially set whenever

41
00:02:27,840 --> 00:02:29,150
the player starts the game.

42
00:02:29,460 --> 00:02:35,340
And also just going to make sure that I do include that start game function so I can have a list of

43
00:02:35,340 --> 00:02:38,090
functions as well in the start game is going to be one of them.

44
00:02:38,670 --> 00:02:45,840
So function start the game and we can enclose it within the app, the main app object.

45
00:02:45,840 --> 00:02:46,710
So start game.

46
00:02:46,710 --> 00:02:53,660
We're not passing any parameters and for now we'll just console log and we'll see game start.

47
00:02:53,760 --> 00:02:59,790
So whenever anyone clicks the start button, we see that we got game started showing up there.

48
00:03:00,060 --> 00:03:06,270
So it's always good as well to test along the way just to make sure that everything is working as expected.

49
00:03:06,810 --> 00:03:07,960
There's a few other ones.

50
00:03:07,960 --> 00:03:11,850
So let me just do a quick clean up of the content so it's a little bit more readable.

51
00:03:12,330 --> 00:03:18,810
So now we've selected a bunch of the elements and these were all for creating those modal pop ups,

52
00:03:19,050 --> 00:03:23,010
which we are going to be making use of, and that's going to be how the player's going to maneuver through

53
00:03:23,010 --> 00:03:23,400
the game.

54
00:03:23,400 --> 00:03:29,340
And that's going to get information from us about playing the game and where they are within the gameplay.

55
00:03:29,730 --> 00:03:34,970
We also need to have a few other pieces in order to make those interactive.

56
00:03:34,980 --> 00:03:39,300
And we're going to do those as we build them and we show them on the screen.

57
00:03:39,300 --> 00:03:43,620
So we're not showing them quite yet and that's going to be the integral part of the game.

58
00:03:43,800 --> 00:03:47,430
So let's load a few more page objects before we conclude this lesson.

59
00:03:47,760 --> 00:03:50,910
So within the page, I've got the main container.

60
00:03:50,910 --> 00:03:52,650
So this is the main game area.

61
00:03:52,650 --> 00:04:00,060
I'm just going to call it game or page con and selecting the documents and once again, query selector,

62
00:04:00,420 --> 00:04:03,690
selecting the element with the class of game area.

63
00:04:04,350 --> 00:04:07,530
So that will put that as well within the page object.

64
00:04:07,740 --> 00:04:10,230
So once again, we can select it a lot easier.

65
00:04:10,590 --> 00:04:18,330
There's the page main area and document and sometimes as well, it's it's it's a good idea to kind of

66
00:04:18,540 --> 00:04:20,310
build these as you need them.

67
00:04:20,610 --> 00:04:25,650
But I usually like to preload the main ones that I want to work with so I don't have to go back and

68
00:04:25,650 --> 00:04:30,750
forth a lot within the code and I can just get right to developing within the object where I'm creating

69
00:04:30,750 --> 00:04:31,560
the interaction.

70
00:04:31,890 --> 00:04:33,930
So there's the left side.

71
00:04:34,140 --> 00:04:36,810
So these are going to be the main game play areas.

72
00:04:36,810 --> 00:04:42,060
This game area, there's the main which is center, and then we have left side and right side.

73
00:04:42,390 --> 00:04:49,140
So selecting those elements, we've got the left side and that one had a class of left side.

74
00:04:49,140 --> 00:04:51,330
I don't think I'm not sure if I did the upper case.

75
00:04:51,680 --> 00:04:55,590
I have to double check that just to make sure and going back into here.

76
00:04:55,590 --> 00:04:59,250
So it's always good to just kind of double check and make sure that you do have.

77
00:04:59,570 --> 00:05:03,690
Everything, as you remember, so we had side with the camel case.

78
00:05:03,710 --> 00:05:05,020
So that's that's fine.

79
00:05:05,030 --> 00:05:07,750
That's in line and we'll do one for the right side.

80
00:05:08,300 --> 00:05:10,370
So we've got the page right side as well.

81
00:05:10,730 --> 00:05:16,630
And selecting those because we're going to be populating all of these containers with content.

82
00:05:17,300 --> 00:05:20,030
And this is all dynamic content coming from JavaScript.

83
00:05:20,040 --> 00:05:24,670
So it's always good to have these all up and already a few other objects.

84
00:05:25,010 --> 00:05:31,880
So once we initiated, I want to have a placeholder for inplay because this is the value that we're

85
00:05:31,880 --> 00:05:33,000
going to be referring to.

86
00:05:33,290 --> 00:05:39,020
So usually when you do create a game, it's a good idea to have a variable in the background that can

87
00:05:39,020 --> 00:05:42,310
control whether the game is in play or it's not in play.

88
00:05:42,680 --> 00:05:46,940
So that one is going to be the one that we're going to look for before we do any functionality.

89
00:05:47,180 --> 00:05:50,810
And if this is false, then none of the functions are going to work.

90
00:05:50,820 --> 00:05:52,840
The only one that's going to work is going to be the start game.

91
00:05:52,850 --> 00:05:54,500
Everything else is going to be disabled.

92
00:05:54,860 --> 00:05:57,830
And if this is true, then this is going to be enabled.

93
00:05:57,840 --> 00:06:02,540
So that's coming up in the next lesson where we're going to do all the start game functionality and

94
00:06:02,540 --> 00:06:04,850
we're going to kick off this game and get it started.

95
00:06:05,030 --> 00:06:07,220
Progress through the game logic.

96
00:06:07,400 --> 00:06:13,730
So that's still all yet to come and make your selection of the elements of the page elements so that

97
00:06:13,730 --> 00:06:19,340
you have them ready when you are creating the game and the game functionality within the game and the

98
00:06:19,340 --> 00:06:20,000
gameplay.

99
00:06:20,300 --> 00:06:26,360
And we don't we can easily populate content within the visible area and communicate with the user in

100
00:06:26,360 --> 00:06:26,750
the player.