1
00:00:00,720 --> 00:00:06,420
This is a part of the course where we do a final play through of our game just to make sure that everything

2
00:00:06,420 --> 00:00:11,820
is working as intended, so we come into the game, we've got press start button, we go out and we

3
00:00:11,820 --> 00:00:12,810
pressed the start button.

4
00:00:12,930 --> 00:00:14,280
It does get disabled.

5
00:00:14,490 --> 00:00:17,370
And we also see that we run that sequence.

6
00:00:17,590 --> 00:00:19,950
We don't have any additional messages in here.

7
00:00:20,160 --> 00:00:22,560
And this is something that the users need.

8
00:00:22,680 --> 00:00:24,950
So they have some direction to follow.

9
00:00:25,290 --> 00:00:30,990
So let's go ahead and create a function and this function will output our messages.

10
00:00:31,260 --> 00:00:35,850
So we call it messenger and we can send a message.

11
00:00:36,990 --> 00:00:45,630
And we already have our message within that message object selecting that HTML element so we can simply

12
00:00:45,630 --> 00:00:47,280
update the contents of it.

13
00:00:47,430 --> 00:00:53,310
And this way we can use this function whenever we want to update some information contained within that

14
00:00:53,310 --> 00:00:59,460
element so we can update that press start button to whatever message we want contained in there.

15
00:01:00,630 --> 00:01:08,490
So we want to update this as soon as the player hits the click button, so that means that now the player,

16
00:01:08,490 --> 00:01:09,820
the game is in play.

17
00:01:10,410 --> 00:01:16,860
So taking that message and we might want to also hide the start button as well.

18
00:01:17,010 --> 00:01:18,210
So that's another option.

19
00:01:18,210 --> 00:01:22,210
Instead of just disabling it, we can hide that display property.

20
00:01:22,320 --> 00:01:29,870
So taking a button, applying style and display style, and we can set it to none.

21
00:01:30,030 --> 00:01:31,260
So that will hide it.

22
00:01:31,740 --> 00:01:35,020
And we can also show it once we've ended the game.

23
00:01:35,040 --> 00:01:37,240
So going down to our end game function.

24
00:01:37,710 --> 00:01:44,850
So now we can display it as block so that it will hide and show the button, go back to the refresh

25
00:01:44,850 --> 00:01:48,060
hit start and we see that we've got red red.

26
00:01:48,220 --> 00:01:49,440
So it's running twice.

27
00:01:49,710 --> 00:01:50,670
Let's see what happens.

28
00:01:51,010 --> 00:01:52,260
We get red, red.

29
00:01:52,590 --> 00:01:53,610
We got it correct.

30
00:01:53,790 --> 00:01:54,690
Let's start again.

31
00:01:55,110 --> 00:01:57,210
And this time we've got three colors.

32
00:01:57,440 --> 00:01:59,340
So Soylent went green, green, blue.

33
00:02:00,430 --> 00:02:06,040
And once again, we got it correct so we can start again, the button now disappears, so now we have

34
00:02:06,040 --> 00:02:07,030
to watch again.

35
00:02:07,040 --> 00:02:09,310
So it's blue, blue, yellow, green.

36
00:02:09,310 --> 00:02:14,290
And yes, I am cheating because I do see the values down here and typically within the gameplay.

37
00:02:14,440 --> 00:02:16,000
You want to see those values.

38
00:02:16,770 --> 00:02:18,810
That's all it says is match pattern.

39
00:02:19,030 --> 00:02:23,440
So that's another thing that we need to output and again, communication to the user.

40
00:02:23,620 --> 00:02:29,530
So where we've got pattern matcher, we should also when we're ending the game, we should let the player

41
00:02:29,530 --> 00:02:31,540
know if they got it correct or not.

42
00:02:31,750 --> 00:02:35,440
And this is where we can have our value here.

43
00:02:35,750 --> 00:02:40,640
So instead of logging it out to the console and let's try that one more time.

44
00:02:41,680 --> 00:02:43,630
So press start button match pattern.

45
00:02:43,900 --> 00:02:44,560
So it's green.

46
00:02:44,560 --> 00:02:45,010
Blue.

47
00:02:45,040 --> 00:02:45,880
We got it correct.

48
00:02:47,590 --> 00:02:55,360
We start again, so it's now yellow, green, green, we've got it cracked again, start, and this

49
00:02:55,360 --> 00:02:56,530
time we'll get an incorrect.

50
00:02:57,940 --> 00:03:03,250
And there's one other thing that's happening whenever I'm clicking it, because I've got the user clicks

51
00:03:03,250 --> 00:03:08,560
out in the console here, so if I get rid of that, you're going to see that even if I'm clicking these

52
00:03:08,740 --> 00:03:13,110
until I'm able to click it, I'm not I'm not going to see anything happening with it.

53
00:03:13,570 --> 00:03:15,190
So we see that we got it incorrect.

54
00:03:15,370 --> 00:03:17,250
We'll try it one more time again.

55
00:03:17,290 --> 00:03:18,070
Yellow, blue.

56
00:03:18,070 --> 00:03:18,940
We got it correct.

57
00:03:19,120 --> 00:03:20,320
We move up a level.

58
00:03:21,520 --> 00:03:23,740
Let's do a final quick code review.

59
00:03:23,920 --> 00:03:26,710
So we set up all of our styling that we need it.

60
00:03:26,950 --> 00:03:31,750
We also set up the basic core HTML elements that we need for our gameplay.

61
00:03:32,200 --> 00:03:35,800
Connected them using JavaScript with document query.

62
00:03:35,800 --> 00:03:42,520
Selector created an array of all the different colors that we wanted in order to play our game, set

63
00:03:42,520 --> 00:03:46,390
up some gameplay variables where we've got a couple of arrays.

64
00:03:46,570 --> 00:03:52,780
One of the arrays is going to be used by the game to create the sequence and then the other one is where

65
00:03:52,780 --> 00:03:54,340
the player creates the sequence.

66
00:03:54,340 --> 00:03:57,370
And then we compare both sequences to see if they match.

67
00:03:57,370 --> 00:04:00,070
And if they do match, then the player got everything correct.

68
00:04:00,280 --> 00:04:07,390
We also have in play, which gives us control over allowing the player to start the game as well.

69
00:04:07,690 --> 00:04:13,600
We've got a plate number, so this is how many colors we're going to show for the initial sequence.

70
00:04:13,600 --> 00:04:16,090
So this is the starting value that we're showing.

71
00:04:16,330 --> 00:04:19,360
We're listening for the Windows object to load.

72
00:04:19,570 --> 00:04:21,970
Once it loads, we run the function set up.

73
00:04:22,210 --> 00:04:26,500
What setup does is set up, runs through and builds our game board.

74
00:04:26,710 --> 00:04:28,570
So we see that the game has loaded.

75
00:04:28,780 --> 00:04:30,880
We loop through the number of colors.

76
00:04:30,880 --> 00:04:31,870
So we do have four.

77
00:04:32,110 --> 00:04:36,340
We build out all of the contents of that particular element.

78
00:04:36,520 --> 00:04:37,930
So we generate a div.

79
00:04:37,930 --> 00:04:40,270
We create a function in order to generate diffs.

80
00:04:40,570 --> 00:04:49,180
We update the background color, add a class of box, set the opacity to 50 percent, add my color values.

81
00:04:49,180 --> 00:04:52,930
So this is a hidden value within the element object in the background.

82
00:04:52,930 --> 00:04:55,150
So you don't actually see that within your HTML.

83
00:04:55,360 --> 00:05:00,490
And we also have our event listener and the event listener adds that interactivity to each one of those

84
00:05:00,490 --> 00:05:02,890
elements that were dynamically generating.

85
00:05:02,890 --> 00:05:10,000
And then lastly, we append the brand new element, freshly created element into our game area object,

86
00:05:10,180 --> 00:05:15,190
which we selected over here, which corresponds with this particular div.

87
00:05:15,550 --> 00:05:23,260
So once we build out our game board, we have the next objective is to wait and listen for the player

88
00:05:23,350 --> 00:05:25,000
to kick off the gameplay.

89
00:05:25,240 --> 00:05:30,460
So when they're ready to play, they hit that start button, that start button checks to make sure that

90
00:05:30,490 --> 00:05:31,780
we're not already in play.

91
00:05:31,930 --> 00:05:34,030
So it's restarting when it's already in play.

92
00:05:34,030 --> 00:05:34,900
We don't want that.

93
00:05:35,080 --> 00:05:36,940
So that's where we've got that condition.

94
00:05:37,120 --> 00:05:39,190
And then we're running a function called player.

95
00:05:39,400 --> 00:05:41,740
So this is when the game is in play.

96
00:05:41,770 --> 00:05:45,730
When his first kicks off, we disable the button, we hide the button.

97
00:05:45,880 --> 00:05:49,120
You could only you could also only just hide the button if you wanted to.

98
00:05:49,690 --> 00:05:55,330
We pass over a message to the user so that they see that what their instructions are is to match the

99
00:05:55,330 --> 00:05:55,810
pattern.

100
00:05:56,050 --> 00:06:01,750
We make sure that the game clicks and user clicks are both set to blank arrays and then we initiate

101
00:06:01,840 --> 00:06:02,860
that sequence.

102
00:06:03,070 --> 00:06:09,840
And what the sequence does is this is what creates that initial sequence for the gameplay.

103
00:06:10,210 --> 00:06:16,180
So this is building out the sequence that the game is going to use and also what the player has to follow.

104
00:06:16,330 --> 00:06:18,820
So we're grabbing all of the elements with box.

105
00:06:18,940 --> 00:06:20,740
So these are the freshly created ones.

106
00:06:20,980 --> 00:06:27,640
We're decreasing number by one, and that's because we're using recursion to run that same function.

107
00:06:27,640 --> 00:06:30,640
Again, we need a way out and that's to decrease it.

108
00:06:30,760 --> 00:06:33,670
And this is our way out of the recursion of this function.

109
00:06:33,820 --> 00:06:38,650
And we know once it hits zero, then we've gone through all of the numbers that we needed to loop through

110
00:06:38,860 --> 00:06:42,430
all of the elements that we need loop through within this particular gameplay.

111
00:06:42,610 --> 00:06:50,140
We set the gameplay to true, allowing the player to select different boxes and build out their own

112
00:06:50,140 --> 00:06:50,650
sequence.

113
00:06:50,950 --> 00:06:52,750
We get a random number.

114
00:06:52,900 --> 00:06:55,960
So this basically picks out a random element.

115
00:06:56,440 --> 00:07:00,370
We push that value into our console.

116
00:07:00,640 --> 00:07:08,320
We set that random value, that square element to opacity, to light so that we can distinguish it,

117
00:07:08,320 --> 00:07:09,130
that it's lit up.

118
00:07:09,730 --> 00:07:14,980
We wait five hundred milliseconds and then we set it back to half.

119
00:07:14,980 --> 00:07:16,120
So that's the initial state.

120
00:07:16,450 --> 00:07:20,440
And then we also have a timeout to run the next part of the sequence.

121
00:07:20,740 --> 00:07:26,680
So once this time is out, then we set another time out and then within a second it's going to run the

122
00:07:26,680 --> 00:07:27,490
next sequence.

123
00:07:27,730 --> 00:07:33,520
And we do need to have that pause there in before we run the next sequence so that you do have that

124
00:07:33,520 --> 00:07:40,570
pause in case we're displaying that same color multiple times in a row, then we're not going to be

125
00:07:40,570 --> 00:07:41,740
able to distinguish between it.

126
00:07:41,920 --> 00:07:44,710
So that's where we need to have that second set timeout.

127
00:07:45,520 --> 00:07:50,410
We've got our set up function there and then the rest of the functionality is dependent on the user

128
00:07:50,560 --> 00:07:55,450
where when we generated these elements, we added the event listener to check answer.

129
00:07:55,630 --> 00:07:57,160
So this means that the user.

130
00:07:57,430 --> 00:08:04,230
Has to check the elements that they believe are the next within the sequence, we check to make sure

131
00:08:04,230 --> 00:08:05,010
that it's in place.

132
00:08:05,280 --> 00:08:10,200
So this is where our control is to allow the user to actively participate.

133
00:08:10,530 --> 00:08:14,030
We check to see which element triggered this event.

134
00:08:14,430 --> 00:08:21,810
We update that element with we update our array user clicks array with the color from that element.

135
00:08:21,840 --> 00:08:27,750
So this is that hidden value that we created when we generated that element of my color and call it

136
00:08:27,750 --> 00:08:28,440
whatever you want.

137
00:08:28,860 --> 00:08:32,600
Also, we set the capacity to one so that it stands out.

138
00:08:32,610 --> 00:08:34,380
So basically it blinks brighter.

139
00:08:34,650 --> 00:08:40,980
We also set the time out to five hundred milliseconds and then we set that opacity back to its original

140
00:08:40,980 --> 00:08:42,690
state of zero point five.

141
00:08:42,930 --> 00:08:45,210
So that's the click that the user sees.

142
00:08:45,570 --> 00:08:49,220
And then we also check to see if the game is over.

143
00:08:49,350 --> 00:08:54,090
And once the user clicks, array length is equal to the game clicks array length.

144
00:08:54,100 --> 00:08:56,190
So this is the one that we randomly created.

145
00:08:56,490 --> 00:08:57,810
We know that the game is over.

146
00:08:57,960 --> 00:09:03,720
The users clicked out all of the available clicks and we set the inplay to false and then we run the

147
00:09:03,720 --> 00:09:05,070
end game function.

148
00:09:05,400 --> 00:09:09,540
The end game function console likes we can get rid of that console log.

149
00:09:09,690 --> 00:09:16,950
It disables, it enables the start button again so the player can play the same sequence again if the

150
00:09:16,950 --> 00:09:19,290
player got the sequence right.

151
00:09:19,530 --> 00:09:20,670
So the string right.

152
00:09:20,670 --> 00:09:24,990
So both of those arrays match, then we increase the play number.

153
00:09:25,140 --> 00:09:29,190
So that adds another color within the sequence that's going to be available.

154
00:09:29,460 --> 00:09:32,850
We output a message to the player that they got it cracked.

155
00:09:33,000 --> 00:09:37,680
They've got a new layer level or if they don't match.

156
00:09:37,710 --> 00:09:42,060
So if these two don't match, then we output to the player that it's not correct.

157
00:09:42,210 --> 00:09:47,760
But they still have the option to restart the game with the same number of play items.

158
00:09:49,160 --> 00:09:53,870
It's essentially that was a quick run-Through of the game, of course, you can take the functionality

159
00:09:53,870 --> 00:09:59,120
of this game, extend on it, expand on it, and really make it your own, have some fun with it and

160
00:09:59,120 --> 00:10:01,220
enjoy working with JavaScript.

161
00:10:01,550 --> 00:10:03,530
Thanks again for taking this lesson.