1
00:00:00,480 --> 00:00:06,780
This lesson, we're going to be finishing off and concluding our combo guessing game, let's do a quick

2
00:00:06,780 --> 00:00:11,340
run through of the gameplay so the player comes in presented with a start button.

3
00:00:11,580 --> 00:00:12,950
They pressed the start button.

4
00:00:12,960 --> 00:00:14,640
They're presented with the combination.

5
00:00:14,760 --> 00:00:21,840
So we need to set these to be zeros as well as we need to have an end game function as well.

6
00:00:22,290 --> 00:00:29,310
And when we we also need to provide some additional instructions for the player as to what the blue

7
00:00:29,310 --> 00:00:33,920
means, what the green means and what the red means, and then also what the game over.

8
00:00:34,020 --> 00:00:36,510
We need to have the ability to restart the game.

9
00:00:36,780 --> 00:00:43,440
So let's all add all of that into our code so we do have ability to check to see if the game is over.

10
00:00:43,650 --> 00:00:46,800
So let's set up a function that's going to be our game end.

11
00:00:47,370 --> 00:00:53,130
And this is the function that we're going to invoke once the game concludes so we can simply grab that

12
00:00:53,130 --> 00:00:54,210
function over here.

13
00:00:54,330 --> 00:01:00,840
And so the console game over, we're going to run the function of get game and within the game end,

14
00:01:01,560 --> 00:01:03,840
let's see what happens right now when we game.

15
00:01:03,840 --> 00:01:07,650
And so nothing happens, but we should have the ability to.

16
00:01:08,690 --> 00:01:15,590
Provide a message to the player, how many guesses it took and also game over, adding that in and we

17
00:01:15,590 --> 00:01:19,990
already have the setup to provide content into our message area.

18
00:01:20,510 --> 00:01:21,950
I to copy this one.

19
00:01:23,030 --> 00:01:30,050
And we also need to reset this check combo button to start solved the combo in guesses.

20
00:01:30,320 --> 00:01:32,950
So now we're outputting some information to the player.

21
00:01:33,440 --> 00:01:36,430
We see that you solve the combo in one guesses.

22
00:01:36,800 --> 00:01:39,820
Let's update the start button, take game in play.

23
00:01:39,860 --> 00:01:44,810
We're going to set it to false and that will generate the maker and set this off as well.

24
00:01:44,810 --> 00:01:52,790
And we need to update that button in our HTML to be start so that we can have an option for the player

25
00:01:52,790 --> 00:01:53,930
to restart the game.

26
00:01:53,930 --> 00:01:58,400
And we're going to set score to zero on that first run through as well.

27
00:01:58,490 --> 00:01:59,990
So we don't have to do it a second time.

28
00:02:00,230 --> 00:02:04,170
So we'll call this one a restart game gameplay to force.

29
00:02:04,180 --> 00:02:09,890
So refresh we start, we're going to solve the game and we've got an option now to restart the game.

30
00:02:10,220 --> 00:02:11,210
So we'll see what happens.

31
00:02:11,480 --> 00:02:16,850
And notice that when we're running this maker, we need to zero out all of that information.

32
00:02:17,390 --> 00:02:20,450
So let's do that in this as well.

33
00:02:20,450 --> 00:02:26,390
So we've got our game area that we're spending a child to, and we want to remove all of the contents

34
00:02:26,390 --> 00:02:30,680
of the game area before we try to set a new game area.

35
00:02:31,070 --> 00:02:33,380
And we're setting that over within Maker.

36
00:02:33,530 --> 00:02:39,200
So before we set it to make her, let's update the inner turmoil of game area, just to be blank.

37
00:02:40,300 --> 00:02:46,780
So now try that one more time check combo, so we solved it in one guess, restart the game and we've

38
00:02:46,780 --> 00:02:48,780
got our restart here as well.

39
00:02:49,210 --> 00:02:50,560
So we've got guesses.

40
00:02:50,560 --> 00:02:54,160
One guesses, too, and we solved it in three guesses.

41
00:02:54,160 --> 00:02:55,110
Restart the game.

42
00:02:55,390 --> 00:02:58,540
We need to update that inner turmoil of the.

43
00:03:00,110 --> 00:03:05,000
Message area in our HTML, guess the combo.

44
00:03:05,570 --> 00:03:08,230
Try that one more time, so start check combo.

45
00:03:08,660 --> 00:03:15,380
You solve the combo in one guesses restart, guess the combo, you solve the combo in one guesses.

46
00:03:15,620 --> 00:03:21,170
And I'm doing this so that we have more than one guess and we see that we are it is working properly.

47
00:03:21,440 --> 00:03:25,460
So we're able to have the player restart the game and provide a solution.

48
00:03:25,850 --> 00:03:31,700
Also adding in, there's going to be some instructions so instructions can be static.

49
00:03:32,360 --> 00:03:34,070
So there's our instructions for the game.

50
00:03:34,640 --> 00:03:36,950
I got to transform this into small.

51
00:03:37,550 --> 00:03:40,070
Let's refresh it and see what it looks like with the instructions.

52
00:03:40,310 --> 00:03:45,470
So now we start we've got some instructions and we should also provide a little bit of spacing there

53
00:03:45,470 --> 00:03:46,010
as well.

54
00:03:46,370 --> 00:03:50,420
So let's apply some styling to make it look better within the button.

55
00:03:51,230 --> 00:04:00,350
We'll add a margin at the bottom of fifteen picks, provide some spacing between that button and we

56
00:04:00,350 --> 00:04:05,120
should also add a margin at the top to ten picks at the top.

57
00:04:05,120 --> 00:04:05,900
So refresh.

58
00:04:06,840 --> 00:04:14,640
So we've got a margin there at the top margin at the bottom, also going to update the font, so font

59
00:04:14,640 --> 00:04:22,760
size going to make it even smaller and update the font family to be different than the rest of the wording.

60
00:04:23,400 --> 00:04:25,220
So we've got our instructions at the bottom.

61
00:04:25,440 --> 00:04:29,660
We've got our check combo and then we've got our message to the player at the top.

62
00:04:29,940 --> 00:04:36,540
One last thing that we need to do when we're generating these, we can get rid of that value to be correct

63
00:04:36,750 --> 00:04:38,570
and we'll set the value to be zero.

64
00:04:38,580 --> 00:04:40,440
So let's refresh it start.

65
00:04:40,710 --> 00:04:42,210
All of them are at zero.

66
00:04:42,390 --> 00:04:48,360
And now it's a matter of seeing how many guesses it takes in order to render out the right combination.

67
00:04:48,840 --> 00:04:49,830
So let's try that.

68
00:04:49,980 --> 00:04:57,600
And I'm just doing this random check combo, and it is important to try to play through the game many

69
00:04:57,600 --> 00:05:00,160
times in order to see if you're getting it right.

70
00:05:00,180 --> 00:05:01,380
So I've got one number right.

71
00:05:02,050 --> 00:05:04,070
And I'm increasing these because they're low.

72
00:05:04,200 --> 00:05:07,350
So these two must be sixes and this could be an eight.

73
00:05:07,380 --> 00:05:11,540
So I guessed it within four guesses and now I have the ability to restart the game.

74
00:05:12,540 --> 00:05:17,490
So that's how you play the game and always do try that out and make sure that the game is working as

75
00:05:17,490 --> 00:05:18,040
expected.

76
00:05:18,210 --> 00:05:19,710
Let's do a quick run through.

77
00:05:19,710 --> 00:05:26,940
In a refresh of the content of this application, we started out by updating some of the styling.

78
00:05:26,940 --> 00:05:32,200
So we present the game content in a little bit better of a format added in our HTML.

79
00:05:32,520 --> 00:05:37,140
So this is all of our HTML that we're presenting to the user in order to play our game.

80
00:05:37,170 --> 00:05:41,700
We don't need a message area so we can communicate what's happening within the gameplay back to the

81
00:05:41,700 --> 00:05:42,060
player.

82
00:05:42,360 --> 00:05:46,760
We need a place to present the game combinations so the interactions for the game.

83
00:05:47,400 --> 00:05:53,580
And we also need a button that creates the interaction for the player to be able to guess the combination.

84
00:05:54,210 --> 00:06:00,840
Using JavaScript, we added all of those elements into objects apply to an event listener to the button.

85
00:06:01,020 --> 00:06:05,790
We set some default variables and within the event, listener of the button.

86
00:06:05,920 --> 00:06:12,090
So we're only using one button and we're updating the text on the button dynamically using JavaScript.

87
00:06:12,210 --> 00:06:15,930
So that button is always clickable and it will do different things.

88
00:06:15,930 --> 00:06:21,480
And the way that we're controlling that is using the gameplay variable as a boolean value.

89
00:06:21,840 --> 00:06:28,190
So we check to see if the gameplay is a boolean value of false and if it is, we set it to true.

90
00:06:28,200 --> 00:06:31,140
So that means that we run through one time with the starting of the game.

91
00:06:31,380 --> 00:06:38,220
We reset the score, we update the inner HTML of the game area to be blank, and then we generate out

92
00:06:38,220 --> 00:06:39,630
our combination lock.

93
00:06:39,630 --> 00:06:41,070
And this is all fully dynamic.

94
00:06:41,250 --> 00:06:45,960
So if we were to update that value, we could update it to whatever number we want.

95
00:06:46,170 --> 00:06:52,050
So we can also update this to be more dynamic where we could have a variable in there and a variable

96
00:06:52,050 --> 00:06:52,470
here.

97
00:06:52,590 --> 00:06:57,590
And then whenever we run and we call out to make sure this is where we can pass in a value.

98
00:06:57,780 --> 00:07:04,770
So if we want to have six number combination, it can really be easily added in and changed and update

99
00:07:04,790 --> 00:07:05,960
and the game will work the same.

100
00:07:06,300 --> 00:07:11,250
So that's the best combination when you are building out these games, try to make them as dynamic as

101
00:07:11,250 --> 00:07:11,820
possible.

102
00:07:11,970 --> 00:07:19,080
So this is where we're selecting the number of values, combinations, digits that are available within

103
00:07:19,080 --> 00:07:20,400
this combination.

104
00:07:20,400 --> 00:07:23,670
Look, next we check to see.

105
00:07:23,790 --> 00:07:30,960
So if its game is in play and if it's in play, then we run the checker whenever they click this button.

106
00:07:30,960 --> 00:07:32,370
Doesn't matter what it says on it.

107
00:07:32,610 --> 00:07:35,220
That means that we're checking to see if it's functioning.

108
00:07:35,400 --> 00:07:37,020
I can get a console message.

109
00:07:37,290 --> 00:07:38,880
We update the score by one.

110
00:07:39,060 --> 00:07:43,050
The score is how many guesses this particular round has taken.

111
00:07:43,410 --> 00:07:45,270
We update the message to the player.

112
00:07:45,270 --> 00:07:48,600
So the player is aware of what's happening, that we've updated the score.

113
00:07:48,930 --> 00:07:52,170
We select all of the elements that have NUM.

114
00:07:52,170 --> 00:07:53,730
And again, this makes a dynamic.

115
00:07:53,910 --> 00:07:59,250
So we loop through the document object, selecting all of the elements that match this criteria.

116
00:07:59,580 --> 00:08:05,070
So in this case, we've got elements with the class of NUM, so we're looking for those and then we've

117
00:08:05,070 --> 00:08:07,200
got a variable there for the win condition.

118
00:08:07,800 --> 00:08:12,300
And this is the way that we tell how many of these are correct.

119
00:08:12,510 --> 00:08:17,610
So depending on how many of these wind conditions we can run through, that gives us an indication of

120
00:08:17,760 --> 00:08:18,960
how many the player got.

121
00:08:18,960 --> 00:08:19,380
Correct.

122
00:08:19,560 --> 00:08:25,410
And you can also output that variable to the player if you want to, within a message as well, getting

123
00:08:25,410 --> 00:08:26,760
rid of the console message.

124
00:08:26,760 --> 00:08:27,810
We don't need that anymore.

125
00:08:27,810 --> 00:08:30,240
And also this console message, we don't need that anymore.

126
00:08:31,290 --> 00:08:37,230
We're checking to see if the number is if they match and if it does match, then we turn it green,

127
00:08:37,230 --> 00:08:42,690
the background color and we update the color to be white and we update the win condition, which again

128
00:08:42,690 --> 00:08:47,280
is the number of correct values that are presented within the combination.

129
00:08:48,740 --> 00:08:54,410
Next, we have an else, so if the numbers are not matching, that means that the player either gets

130
00:08:54,410 --> 00:08:55,250
high or low.

131
00:08:55,460 --> 00:08:57,800
We check to see if the player guessed low.

132
00:08:57,980 --> 00:08:59,930
And if they did, then we turn it blue.

133
00:09:00,140 --> 00:09:05,600
Otherwise, it's going to be the guest high and we turn it Red Wings.

134
00:09:05,600 --> 00:09:10,310
Update the background color to whatever color was indicated here within the Tarana state.

135
00:09:10,460 --> 00:09:12,980
And then we also update the color to be black.

136
00:09:13,130 --> 00:09:18,800
So this is in case we've already set it correct and then they change the value.

137
00:09:19,010 --> 00:09:21,500
So that way they'll be consistent and they'll all be black.

138
00:09:22,760 --> 00:09:29,210
We checked to see if the wind condition is equal to the numbers length, the numbers length will be

139
00:09:29,210 --> 00:09:31,280
how many digits we have to solve here.

140
00:09:31,760 --> 00:09:38,510
And if it is equal, that means that the game is over and then we run the game over function, which

141
00:09:38,510 --> 00:09:45,410
upstate's the message to the player sets the gameplay to false updates, the content of the entire HTML

142
00:09:45,410 --> 00:09:47,240
button instead of checkable.

143
00:09:47,240 --> 00:09:51,000
It'll be a restart game and our last function is the maker function.

144
00:09:51,260 --> 00:09:55,880
So this is where we generate our HTML elements using JavaScript.

145
00:09:56,330 --> 00:10:00,350
We essentially are creating an input element with a number.

146
00:10:00,360 --> 00:10:02,700
You can still see these here within the console.

147
00:10:02,870 --> 00:10:09,620
So this is the element that we're generating its input type number and the maximum and minimum numbers.

148
00:10:09,770 --> 00:10:11,120
And this is a simple five.

149
00:10:11,270 --> 00:10:17,060
So we'll see that we can't update those values to be beyond what those maximum and minimum numbers are.

150
00:10:18,210 --> 00:10:23,700
There's also a width that we're setting, we can update this with if we want to, we could keep it within

151
00:10:23,700 --> 00:10:25,660
the NUM class if we wanted to.

152
00:10:25,830 --> 00:10:30,420
So we don't necessarily need this, but this is just the way that you can update with and you can also

153
00:10:30,420 --> 00:10:33,870
update height as well so you can apply any type of styling that you want.

154
00:10:34,080 --> 00:10:39,180
All of that information just goes within the style attribute that you can see down here in the right

155
00:10:39,180 --> 00:10:39,680
hand side.

156
00:10:40,520 --> 00:10:46,340
Also, we're applying a class of numb, and this is really important to our gameplay because we are

157
00:10:46,340 --> 00:10:50,150
looping through all of the elements to detect the ones that have come.

158
00:10:50,150 --> 00:10:51,980
And this is what makes our game dynamic.

159
00:10:52,070 --> 00:10:57,680
So it doesn't matter what you change the number to, it's going to if it's generating another field

160
00:10:57,680 --> 00:10:59,900
here, it's going to be taken into consideration.

161
00:10:59,900 --> 00:11:03,120
When we're doing our check, we're adding in the order.

162
00:11:03,350 --> 00:11:07,700
This isn't actually being used, but it might come in useful down the line.

163
00:11:07,700 --> 00:11:12,360
If we want to have a particular order of numbers, then we can do it this way as well.

164
00:11:12,530 --> 00:11:16,990
So this is just a hidden value that's sitting in the background currently not in use, but potentially

165
00:11:17,000 --> 00:11:17,650
could be used.

166
00:11:18,260 --> 00:11:20,730
We also have our correct value.

167
00:11:20,900 --> 00:11:25,370
So this is where we're setting a random value while we're generating the element.

168
00:11:25,580 --> 00:11:31,400
Each one of these objects, element objects contains the correct value as well.

169
00:11:31,550 --> 00:11:33,890
And notice that you can't see it within the HTML.

170
00:11:34,010 --> 00:11:38,600
So the player does not actually see what the correct value is until they are actually guessing.

171
00:11:38,600 --> 00:11:45,620
And then this is how we actually also determine what the check check of the element value is and see

172
00:11:45,620 --> 00:11:46,510
if it's correct.

173
00:11:46,520 --> 00:11:51,230
And then here we're just setting the value so that they're all zeros by default so we can get rid of

174
00:11:51,230 --> 00:11:54,680
our console message and once we've built the elements.

175
00:11:54,680 --> 00:11:56,660
So all of these are to build that element.

176
00:11:56,870 --> 00:11:59,550
And once we build it, we apply it to the game area.

177
00:11:59,720 --> 00:12:07,070
And now when we go into inspect, you can see within the HTML if the game div, that's the game area

178
00:12:07,070 --> 00:12:08,390
with the class of game.

179
00:12:08,570 --> 00:12:11,240
You see, we've generated out all of the elements.

180
00:12:11,270 --> 00:12:16,060
So whatever number we've entered into maker, that's how many we're actually generating out.

181
00:12:16,580 --> 00:12:19,970
And that's all taken in from the argument that's passed in.

182
00:12:20,060 --> 00:12:25,040
And we've got a loop there that generates out elements and continuously upends them to the game area.

183
00:12:25,310 --> 00:12:26,300
So now it's up to you.

184
00:12:26,450 --> 00:12:32,120
Take what you've learned in the earlier lessons, apply it, have some fun with it, extend on it and

185
00:12:32,150 --> 00:12:33,470
build out your own version of this game.