1
00:00:00,300 --> 00:00:01,110
Hey, welcome back.

2
00:00:01,140 --> 00:00:01,920
How's it going?

3
00:00:01,960 --> 00:00:06,690
Hope you're able to create a version of the game, this lesson, we're going to do a quick overview

4
00:00:06,690 --> 00:00:09,780
of the gameplay just to make sure everything is working properly.

5
00:00:09,930 --> 00:00:13,380
So we set out to create a game where we've got a start button.

6
00:00:13,590 --> 00:00:18,480
And usually the best way to create the game is to do step by step, start working through.

7
00:00:18,480 --> 00:00:24,090
And how your conditions of the game are going to work with the wind conditions are and what information

8
00:00:24,090 --> 00:00:25,400
you need to present to the user.

9
00:00:25,590 --> 00:00:29,070
So we start out with the game and we build out a game board.

10
00:00:29,070 --> 00:00:35,010
So we've got all of the options underneath and we ask the player to start the game to select a case

11
00:00:35,130 --> 00:00:37,820
and they can click from any one of the cases that are below.

12
00:00:38,220 --> 00:00:43,500
So they've presented with 16 cases and this actually corresponds with the number of values we've got.

13
00:00:43,680 --> 00:00:47,790
So we can actually add in any number of values and the number of cases will change.

14
00:00:48,000 --> 00:00:50,070
You might want to apply a little bit of styling to that.

15
00:00:50,250 --> 00:00:56,160
And then alongside the left and the right hand side are the hidden values that are contained in these

16
00:00:56,160 --> 00:00:56,730
cases.

17
00:00:56,940 --> 00:00:59,370
So the user selects anyone that they want.

18
00:00:59,370 --> 00:01:05,040
So they selected number 11 and then the next move, what the player needs to do is now select three

19
00:01:05,040 --> 00:01:05,580
cases.

20
00:01:05,850 --> 00:01:07,800
So they select three more cases.

21
00:01:07,800 --> 00:01:13,200
And too bad because that one was a high one and too bad again, because that was another high one and

22
00:01:13,200 --> 00:01:16,280
great job and that was fairly low one.

23
00:01:16,650 --> 00:01:21,030
So now my offer is low because I got rid of two of the high ones.

24
00:01:21,150 --> 00:01:26,190
And the offer is a combination of all of these values divided by what is remaining.

25
00:01:26,280 --> 00:01:31,320
So I can either accept it and walk away from the game right now at 22 or I could decline it and keep

26
00:01:31,320 --> 00:01:31,770
playing.

27
00:01:32,070 --> 00:01:36,240
So if I decline it again, I'm just clicking through randomly here.

28
00:01:36,570 --> 00:01:38,250
So I don't actually know what the values are.

29
00:01:38,760 --> 00:01:43,890
So second offer is an offer of thirteen, so it's getting even worse.

30
00:01:43,890 --> 00:01:47,010
I'm not doing too good or I can select three more cases.

31
00:01:47,010 --> 00:01:53,220
So how about I decline and I select three more cases and it looks like I got rid of the other good ones.

32
00:01:53,580 --> 00:01:58,320
So right now I'm at offer number three and I'm at six.

33
00:01:58,770 --> 00:02:06,660
So let's select three more cases and see what happens or we can decline it or we could accept six.

34
00:02:06,900 --> 00:02:09,120
So it just seems to be getting worse and worse.

35
00:02:09,270 --> 00:02:11,230
So I'm getting rid of some of the smaller ones.

36
00:02:11,300 --> 00:02:14,400
I'm getting a great job and now I'm up to eight.

37
00:02:14,820 --> 00:02:17,280
Or I can select one more case so I can decline it.

38
00:02:17,490 --> 00:02:21,930
So I only have two cases left and I am also holding one case.

39
00:02:21,930 --> 00:02:27,240
So that was the one that originally selected and I got rid of the large offer.

40
00:02:27,420 --> 00:02:28,950
So now my offer is two.

41
00:02:29,100 --> 00:02:33,330
I can accept it or I can decline it and it is the last offer.

42
00:02:33,480 --> 00:02:35,670
So if I accept it, I walk away with two.

43
00:02:35,670 --> 00:02:39,300
If I decline it, they just give me whatever's contained within the case.

44
00:02:39,450 --> 00:02:41,400
And this time I walked away with one.

45
00:02:41,400 --> 00:02:44,340
So I did the absolute worst I could do in the game.

46
00:02:44,520 --> 00:02:49,800
And it's a good thing I can start the game again selecting another case and I can play through it as

47
00:02:49,800 --> 00:02:52,980
many times as I want trying to optimize my gameplay.

48
00:02:53,280 --> 00:02:54,930
So let's do a quick code review.

49
00:02:55,380 --> 00:02:59,640
So we started out by setting up the index, the HTML file.

50
00:02:59,760 --> 00:03:01,860
So this is our main structure file.

51
00:03:02,070 --> 00:03:06,480
We determined what we want to present to the user and then how we're going to present it.

52
00:03:06,690 --> 00:03:13,740
So we started out with basically that we wanted a three column website start button and then we've got

53
00:03:13,740 --> 00:03:18,180
a couple models, which would be the core interaction for the user within the game.

54
00:03:18,420 --> 00:03:20,070
Also applying some styling.

55
00:03:20,070 --> 00:03:25,230
I'm not going to get into that, but I'm sure you can go through the styling and make it look a whole

56
00:03:25,230 --> 00:03:25,890
lot better.

57
00:03:26,040 --> 00:03:30,630
So this was just the basics in order to be able to present the content to the user.

58
00:03:30,840 --> 00:03:36,630
And as I developed these games, oftentimes I don't like to focus too much on the styling, but in this

59
00:03:36,630 --> 00:03:40,830
case, without styling, this game wouldn't really look very interesting.

60
00:03:40,830 --> 00:03:44,910
So we had to apply some styling because it's a very wordy type game.

61
00:03:45,480 --> 00:03:47,430
And then came JavaScript.

62
00:03:47,430 --> 00:03:50,520
And of course, that's what you're here for, to learn more about JavaScript.

63
00:03:50,640 --> 00:03:56,850
So we ran through how to construct our main app object, so that held all of our code within there.

64
00:03:57,120 --> 00:04:02,460
We waited for the document content to load so same thing as J query on Ready.

65
00:04:02,760 --> 00:04:07,170
So whenever the DOM content is loaded, we are ready to start interacting with it.

66
00:04:07,440 --> 00:04:10,890
So the first thing that we did is we set up some of our game variables.

67
00:04:11,070 --> 00:04:12,490
We did some calculations.

68
00:04:12,490 --> 00:04:18,630
So use some of these newer features and JavaScript where we can filter and also sought so where we can

69
00:04:18,630 --> 00:04:24,150
enter in some parameters and to sort and customize how we're doing the array sorting.

70
00:04:24,390 --> 00:04:25,380
So we did that twice.

71
00:04:25,620 --> 00:04:31,740
So one day, one time we sort it from high to low and the other one from where this one was from high

72
00:04:31,740 --> 00:04:34,130
to low, and then this one was from low to high.

73
00:04:34,380 --> 00:04:40,410
So two great examples also setting up some more game variables and then we got into the game place.

74
00:04:40,410 --> 00:04:42,360
So this was all sitting in the in it.

75
00:04:42,540 --> 00:04:48,600
So whenever the DOM content has loaded, that's all we want to set up and collect all of our objects

76
00:04:48,810 --> 00:04:50,160
in a usable format.

77
00:04:50,340 --> 00:04:54,450
So we create an object called Page that's stored all of the elements on the page.

78
00:04:54,450 --> 00:04:57,480
So we don't have to constantly query into the DOM to select them.

79
00:04:57,690 --> 00:04:59,660
And we also added our eventless and.

80
00:04:59,820 --> 00:05:05,310
Here as well, so that was all set up, all of the interaction of the game and selecting of all the

81
00:05:05,310 --> 00:05:09,770
page elements, so that way we could use them in the JavaScript.

82
00:05:09,960 --> 00:05:13,750
So first thing we did is walk through how the player's going to start the game.

83
00:05:14,250 --> 00:05:20,610
So we got rid of the start button, created a game board and set up some of these values and parameters

84
00:05:20,790 --> 00:05:21,930
so that we're ready to go.

85
00:05:22,050 --> 00:05:23,660
And also had a pop up message.

86
00:05:23,670 --> 00:05:28,670
And this is the instructions for the player on what's happening next, built the two modal pop up.

87
00:05:28,700 --> 00:05:32,670
So we've got pop up and pop up to this is the decision one.

88
00:05:32,790 --> 00:05:35,490
And really they're kind of doing the same thing.

89
00:05:35,490 --> 00:05:41,430
But the structure of the models is slightly different and it would take quite a bit of code to adjust

90
00:05:41,430 --> 00:05:41,730
that.

91
00:05:41,910 --> 00:05:46,260
So it's usually better to just take the shorter format and just create two separate models.

92
00:05:47,040 --> 00:05:50,900
Here's the calculation which we're using within the offer pop up.

93
00:05:51,090 --> 00:05:54,280
So when we start the game, first thing we want to do is build the game board.

94
00:05:54,300 --> 00:06:01,110
So this one was a fairly complex set of lessons where we made some calculations on how we can make a

95
00:06:01,110 --> 00:06:06,600
game board that's going to be dynamic depending on how much content we have to present, as well as

96
00:06:06,690 --> 00:06:09,530
how much screen size we have to work with.

97
00:06:09,750 --> 00:06:12,090
So we set up all of those calculations.

98
00:06:12,090 --> 00:06:17,970
I know that was quite a bit and quite a bit of calculations right off the bat, but they seemed to work.

99
00:06:17,970 --> 00:06:19,800
And of course, you can adjust them.

100
00:06:19,800 --> 00:06:24,510
And the good thing about using variables is you can make adjustments and tweaks if you don't like how

101
00:06:24,510 --> 00:06:27,340
it's being displayed and it will change how it's displayed.

102
00:06:27,570 --> 00:06:31,170
So creating the elements, adding in the parameters into the elements.

103
00:06:31,410 --> 00:06:37,020
So we added in and set them, styled them, position them and then added them onto the page.

104
00:06:37,140 --> 00:06:39,630
And in this case, we're adding in those side elements.

105
00:06:39,840 --> 00:06:46,350
So we're adding on the left side and the right side, breaking it down evenly between the two and calculating

106
00:06:46,350 --> 00:06:47,610
out where the next one goes.

107
00:06:47,880 --> 00:06:55,230
Then we're selecting an element randomly and pulling it out of our array or pushing it into our game

108
00:06:55,230 --> 00:06:58,590
holding array so that we can reference it later on.

109
00:06:58,770 --> 00:07:04,710
And then we constructing the element using a variable called maker and then also calculating where we're

110
00:07:04,710 --> 00:07:05,400
placing it.

111
00:07:05,400 --> 00:07:07,170
And if we're moving on to the next row.

112
00:07:07,410 --> 00:07:13,800
And then the core gameplay was where we select the cases, and that was where we check what's within

113
00:07:13,800 --> 00:07:14,340
the case.

114
00:07:14,610 --> 00:07:22,320
And if in the case is we need to show what's in the case and we also need to calculate out how we can

115
00:07:22,320 --> 00:07:24,690
move these values along within the cases.

116
00:07:24,810 --> 00:07:29,360
And then most importantly, also what we can present to the user as the next step.

117
00:07:29,520 --> 00:07:36,090
So make some calculations, use the various arrays where we're holding values that are in play and also

118
00:07:36,090 --> 00:07:37,380
values that we've used.

119
00:07:37,500 --> 00:07:40,780
And then also we're selecting the elements as we're constructing them.

120
00:07:40,800 --> 00:07:46,820
So that made it really easy to hide the side ones and as well as to hide the main elements.

121
00:07:46,950 --> 00:07:48,990
But of course, those ones are the ones that are clicked.

122
00:07:49,140 --> 00:07:51,360
So a lot easier to detect and pick up.

123
00:07:51,570 --> 00:07:56,880
We're passing messages back to the user so that they know what's going on and what's going on behind

124
00:07:56,880 --> 00:07:58,080
the scenes in the code.

125
00:07:58,290 --> 00:08:03,390
And that leads them to the next step where they get eventually they're going to get an offer.

126
00:08:03,540 --> 00:08:08,310
And this is the decision point of the game where we within the close pop up.

127
00:08:08,430 --> 00:08:14,160
So whenever they close the popup window, that moves them to the next step and if there's an offer there,

128
00:08:14,310 --> 00:08:15,990
then the offer is going to be presented.

129
00:08:16,000 --> 00:08:17,880
So that's where we got that offer condition.

130
00:08:18,150 --> 00:08:22,290
And if the offer is there, then we run through all of the offer logic.

131
00:08:22,470 --> 00:08:28,740
We calculate out how much content is left, how many, how much value is left in the hidden cases.

132
00:08:29,310 --> 00:08:32,070
We divide it by the number of cases that are available.

133
00:08:32,220 --> 00:08:37,980
So we create an offer for the player, make them choose whether they take the offer or if they want

134
00:08:37,980 --> 00:08:38,940
to continue to play.

135
00:08:39,210 --> 00:08:45,450
And then we also calculate out how many more cases they need to select until the next offer.

136
00:08:45,600 --> 00:08:49,100
Or if it's their last case, then we let them know that as well.

137
00:08:49,230 --> 00:08:52,020
So that's it for the game and the Game Logic.

138
00:08:52,020 --> 00:08:55,020
And I hope you had an opportunity to try out some of the code.

139
00:08:55,230 --> 00:09:00,570
And the really objective here is to just get comfortable with JavaScript, interacting with the DOM

140
00:09:00,690 --> 00:09:06,480
and trying out some of these different functions that are very helpful as your coding and developing

141
00:09:06,480 --> 00:09:07,620
your JavaScript code.

142
00:09:07,830 --> 00:09:11,010
If you have any questions or comments, I'm always happy to hear from you.

143
00:09:11,310 --> 00:09:12,390
Please let me know.

144
00:09:12,390 --> 00:09:18,960
And as well, all of the source code is included and the best way to learn is just to try the content

145
00:09:18,960 --> 00:09:22,560
out for yourself within your own editor and see how it works.

146
00:09:22,770 --> 00:09:28,590
And I also do suggest that the way that the project is structured, that it's kind of a starter project

147
00:09:28,770 --> 00:09:35,070
so that you can take on it and extend on it and really customize what's happening within the gameplay.

148
00:09:35,280 --> 00:09:40,110
And I'm sure there's quite a few different directions that you can take the gameplay.

149
00:09:40,320 --> 00:09:47,010
So please feel free to take the source code, try to first self extend on it and have fun with it.

150
00:09:47,130 --> 00:09:51,090
And most of all, practice JavaScript and I'll see in the next one.