1
00:00:00,150 --> 00:00:06,480
Welcome back to our last lesson of the section where we're going to be reviewing our gameplay and just

2
00:00:06,480 --> 00:00:14,370
making sure that it is functioning as intended so we can make our game back up to 100 percent and minimize

3
00:00:14,370 --> 00:00:15,400
the screen area.

4
00:00:15,720 --> 00:00:17,460
So we're all ready to try that out.

5
00:00:17,560 --> 00:00:22,710
So we've got our press start and we've got our bird that's flying around.

6
00:00:22,920 --> 00:00:29,580
So objective is to try to make sure that he doesn't hit any obstacles and try to keep him alive as much

7
00:00:29,580 --> 00:00:30,510
as possible.

8
00:00:30,870 --> 00:00:35,820
So once he hits one of the obstacles, then the game ends, or if he runs off the bottom of the screen,

9
00:00:35,820 --> 00:00:40,130
the game ends and also want to make sure that we are able to restart the game.

10
00:00:40,380 --> 00:00:43,110
So it's another crucial part that you should always check.

11
00:00:43,260 --> 00:00:45,720
And we see that we are able to restart it.

12
00:00:46,050 --> 00:00:49,320
And we saw that we also developed it fairly dynamically.

13
00:00:49,320 --> 00:00:57,030
So some of these variables, we can adjust our speed as well as we can adjust the spacing between the

14
00:00:57,030 --> 00:00:57,740
obstacles.

15
00:00:57,990 --> 00:01:02,700
So if we wanted more spacing between the obstacles, we can add that in as well.

16
00:01:02,940 --> 00:01:04,860
And now we see that we've got our speed.

17
00:01:06,340 --> 00:01:13,210
So these are all dynamic, and when you are developing content, it's always best to keep it as dynamic

18
00:01:13,210 --> 00:01:14,070
as possible.

19
00:01:14,350 --> 00:01:20,140
So this leaves room for extending on it, expanding on it, and gives you the ability to make adjustments

20
00:01:20,320 --> 00:01:21,880
to really tweak the gameplay.

21
00:01:21,910 --> 00:01:25,080
When you need to tweak that, everything looks like it's working properly.

22
00:01:25,360 --> 00:01:30,430
So we are ready to do a code review of all of the lessons that we've covered in the earlier part of

23
00:01:30,430 --> 00:01:30,940
the course.

24
00:01:31,600 --> 00:01:34,600
So we're looking through and we went through first.

25
00:01:34,600 --> 00:01:40,000
We set up a bunch of styling and I don't want to focus too much on the styling and you can customize

26
00:01:40,000 --> 00:01:41,330
the styling as needed.

27
00:01:41,560 --> 00:01:46,000
So this was just to display the content in a bit better format.

28
00:01:46,120 --> 00:01:51,790
And also the most important part was that we're setting position to absolute that gives us the ability

29
00:01:51,790 --> 00:01:54,970
to move these elements within our screen.

30
00:01:55,000 --> 00:02:02,890
We also tried to keep the HTML to a minimal as much as possible, minimizing how many elements we are

31
00:02:02,890 --> 00:02:08,890
creating and want to keep the bulk of the element creation and the bulk of what's happening within the

32
00:02:08,890 --> 00:02:11,860
scheme staying within our JavaScript.

33
00:02:12,100 --> 00:02:17,680
Because, of course, the focus of this course is to work with JavaScript, become more familiar JavaScript,

34
00:02:17,800 --> 00:02:21,430
interact with the elements on the page using JavaScript.

35
00:02:21,680 --> 00:02:23,350
So we came into our project.

36
00:02:23,350 --> 00:02:29,950
First thing we did is we set up our objects and these objects connected to our elements on the page.

37
00:02:30,110 --> 00:02:34,060
So that made it really easy in order to select those elements.

38
00:02:34,060 --> 00:02:39,880
So we gave them meaningful names and used our query selector in order to select the elements on the

39
00:02:39,880 --> 00:02:40,290
page.

40
00:02:40,420 --> 00:02:45,820
So brought them into objects and that allowed us to reference them in JavaScript and make use of them

41
00:02:45,820 --> 00:02:46,840
within our JavaScript.

42
00:02:46,870 --> 00:02:49,150
Next, we added in our event listeners.

43
00:02:49,300 --> 00:02:51,640
So this is where all the interaction takes place.

44
00:02:51,790 --> 00:02:58,240
We added in event listeners for certain key elements on the page, and then we added an event listeners

45
00:02:58,240 --> 00:03:00,940
for any of the Moorestown functions.

46
00:03:00,950 --> 00:03:02,920
So any time or the key down functions.

47
00:03:03,100 --> 00:03:08,230
So any time the player is pressing one of the keys down, we're tracking which key gets pressed and

48
00:03:08,230 --> 00:03:10,420
we're placing it in an object called Keys.

49
00:03:10,540 --> 00:03:14,050
And then we're referencing that object in order to create our movement.

50
00:03:14,230 --> 00:03:17,950
As we're looping through the animation frames, we also have a player object.

51
00:03:18,100 --> 00:03:25,180
So this was to keep track of player information and player values that we need to use within the game.

52
00:03:25,420 --> 00:03:30,640
And having these two within the global scope made it easy to reference within the functions we could

53
00:03:30,940 --> 00:03:36,790
of as well pass them within the functions so that we don't have to call out to them or reference them

54
00:03:36,790 --> 00:03:37,270
globally.

55
00:03:37,510 --> 00:03:39,280
So that's an alternative as well.

56
00:03:39,490 --> 00:03:41,590
And that's going to make a little bit more complex.

57
00:03:41,680 --> 00:03:45,790
But that's something that if you wanted to extend on this project, you're able to do so.

58
00:03:45,820 --> 00:03:48,090
Next, we came in and we set some values.

59
00:03:48,100 --> 00:03:54,760
So whenever the start button was pressed or the game screen was pressed, we had a way to start the

60
00:03:54,760 --> 00:03:55,300
gameplay.

61
00:03:55,630 --> 00:03:57,660
So that's where we've got our start.

62
00:03:58,000 --> 00:04:00,540
So we set some of the player object values.

63
00:04:00,820 --> 00:04:04,140
We also updated some of the visuals for the player.

64
00:04:04,150 --> 00:04:10,990
So updating the game area, clearing that out in case it's a restart and then hiding the element, the

65
00:04:10,990 --> 00:04:11,950
message area.

66
00:04:12,400 --> 00:04:14,650
We created a couple elements on the fly.

67
00:04:14,650 --> 00:04:21,430
So this was our player character that we're generating using create element in JavaScript.

68
00:04:21,760 --> 00:04:27,730
And then for these elements that we created, we needed to set some style properties as well as we're

69
00:04:27,730 --> 00:04:33,880
using some data object in the background that's running within that element object so that we can reference

70
00:04:33,880 --> 00:04:37,110
that when we need it functions that we use for the gameplay.

71
00:04:37,210 --> 00:04:40,690
Then we also appended those elements to our page.

72
00:04:41,050 --> 00:04:47,950
And again, we set some more player values within the player object in order to track where that player

73
00:04:47,950 --> 00:04:48,880
character is.

74
00:04:48,880 --> 00:04:49,530
The position.

75
00:04:49,930 --> 00:04:52,290
We also were counting the number of pipes.

76
00:04:52,660 --> 00:04:58,510
So this is something that isn't really adding to the gameplay, but it is an option if you want to count

77
00:04:58,510 --> 00:05:01,200
how many pipes and have a specific means.

78
00:05:01,210 --> 00:05:06,850
And again, this is dynamic content that you can use in order to extend your gameplay so you could take

79
00:05:06,850 --> 00:05:07,840
the number of pipes.

80
00:05:07,840 --> 00:05:13,150
And once you had 50 pipes or 20 pipes, then that level has passed and you can make some adjustments

81
00:05:13,360 --> 00:05:17,980
to the speed as well as the spacing between the pipes.

82
00:05:18,130 --> 00:05:23,590
So all of this is fairly dynamic and this is what we're using in order to set these values.

83
00:05:24,250 --> 00:05:30,970
Also, we were calculating how many of the of the pipes that we can fit onto the screen.

84
00:05:31,240 --> 00:05:35,560
So using the spacing value so you can make this global as well.

85
00:05:35,920 --> 00:05:38,520
And again, even more dynamic if you need to.

86
00:05:38,530 --> 00:05:43,600
So you could set the spacing to be something like that if you wanted to, and make it a little bit more

87
00:05:43,600 --> 00:05:48,430
dynamic, then we loop through and we built all of the pipes, depending on how many we calculated that

88
00:05:48,430 --> 00:05:51,500
we could fit in, and then we started our animation.

89
00:05:51,540 --> 00:05:57,550
So this is one of the most important parts of the game because this is what creates our game flow and

90
00:05:57,550 --> 00:05:58,480
our animation.

91
00:05:58,480 --> 00:06:02,650
And what it does is it kicks off this function called play game.

92
00:06:02,660 --> 00:06:05,600
So going into play game, this is where everything happens.

93
00:06:05,680 --> 00:06:11,470
This is where the core gameplay takes place, so within play game, first thing that we do is we check

94
00:06:11,470 --> 00:06:15,670
to see if the player inplay value is set to true.

95
00:06:15,820 --> 00:06:19,790
There's a boolean value in this controls the actual gameplay.

96
00:06:20,110 --> 00:06:25,390
So if we want to pause the gameplay, we could remove out the inplay and we could add that in if we

97
00:06:25,390 --> 00:06:31,210
wanted to start that back up again, we select the elements from our document object.

98
00:06:31,220 --> 00:06:34,390
So the element with the class bird and the class swing.

99
00:06:34,400 --> 00:06:39,460
So these are the two that we created dynamically and then this will give us the option to adjust them

100
00:06:39,640 --> 00:06:41,070
with the arrow key values.

101
00:06:41,350 --> 00:06:47,620
We also kicked off the moving of the pipes since we could have as well added all that functionality

102
00:06:47,620 --> 00:06:48,040
here.

103
00:06:48,250 --> 00:06:55,120
But it's always better if you break apart some of these actions so you don't get these really long functions

104
00:06:55,240 --> 00:06:58,400
and this one could be broken down even more as well if needed.

105
00:06:58,660 --> 00:07:02,040
So we have a function that moves our pipes along.

106
00:07:02,050 --> 00:07:07,540
So this was this one here where we have the same format where we select all of the elements with the

107
00:07:07,540 --> 00:07:08,490
class of pipe.

108
00:07:08,860 --> 00:07:14,680
We loop through them, we adjust their style values, and then we also check to see if it's run off

109
00:07:14,680 --> 00:07:15,310
of the screen.

110
00:07:15,400 --> 00:07:17,110
And we also do a collision check.

111
00:07:17,290 --> 00:07:21,900
And if we do remove it from the screen, then we create a new one.

112
00:07:21,910 --> 00:07:23,080
So we create another pipe.

113
00:07:23,080 --> 00:07:27,100
So this is a brand new one that takes the position of the one that ran off the screen.

114
00:07:27,130 --> 00:07:30,480
And we also have our tracking within the play game.

115
00:07:30,640 --> 00:07:33,370
So we've got the tracking of the key presses.

116
00:07:33,550 --> 00:07:38,200
So this is where we're looking in that Kei's object from where we're setting these as we press any of

117
00:07:38,200 --> 00:07:40,230
the keys down and we release the keys.

118
00:07:40,510 --> 00:07:42,490
So these are turning into boolean values.

119
00:07:42,490 --> 00:07:44,020
So they're either true or false.

120
00:07:44,230 --> 00:07:49,120
And we're checking to see if the key arrow left key is been pushed down, right.

121
00:07:49,120 --> 00:07:50,920
Key up and down.

122
00:07:51,070 --> 00:07:53,870
And then we're making the calculations accordingly.

123
00:07:53,890 --> 00:07:58,630
Also, we're checking to see if we're within our boundaries of our screen area.

124
00:07:58,870 --> 00:08:03,910
And that's the second part of the condition just to make sure that we are within the boundaries.

125
00:08:03,910 --> 00:08:08,920
And if we are, then we're safe to make our movement and we set move to true.

126
00:08:09,470 --> 00:08:16,000
The what the what move is doing is it's giving us the ability to move and adjust our position of our

127
00:08:16,000 --> 00:08:16,450
wing.

128
00:08:16,480 --> 00:08:20,920
So any time that any one of the keys is pressed, our wings will go up and down.

129
00:08:21,100 --> 00:08:24,310
And if we're not pressing the keys, then the wings are going to be static.

130
00:08:24,310 --> 00:08:26,410
There's going to be no movement in the next.

131
00:08:26,410 --> 00:08:30,460
We're automatically moving the character down.

132
00:08:30,470 --> 00:08:33,430
So this is our gravity effect that we're adding into the game.

133
00:08:33,460 --> 00:08:40,120
We're also checking to see if the player Y is greater than the screen.

134
00:08:40,130 --> 00:08:43,230
So if it's run off of the screen, then we play game over.

135
00:08:43,240 --> 00:08:49,570
We also then adjust the bird position and adjusting the bird position because the wing is inside of

136
00:08:49,570 --> 00:08:51,670
it, adjust the wing position as well.

137
00:08:52,120 --> 00:08:57,670
And then we kick off our animation frame again so we continuously loop through this pre game function.

138
00:08:57,670 --> 00:09:00,040
That's why it is the one of the most crucial functions here.

139
00:09:00,490 --> 00:09:03,070
And we also update the score constantly.

140
00:09:03,310 --> 00:09:08,370
So we're updating the score and we're outputting it to the player so they can see the score value.

141
00:09:08,410 --> 00:09:12,250
We've got a few functions here where one where we're ending the game.

142
00:09:12,370 --> 00:09:17,560
So essentially we're showing that message information by removing the class of height.

143
00:09:17,590 --> 00:09:19,890
We're setting our inplay to false.

144
00:09:19,900 --> 00:09:23,230
Remember this pauses any of the animation frame games.

145
00:09:23,230 --> 00:09:28,990
And because it doesn't allow it to reset the animation frame again, because we are checking that condition,

146
00:09:29,170 --> 00:09:34,390
that inplay value before we go into there, we're updating the birds or flipping them upside down when

147
00:09:34,390 --> 00:09:35,020
he crashes.

148
00:09:35,230 --> 00:09:38,440
And then we're opening a message for the player to see what happened.

149
00:09:38,890 --> 00:09:44,050
This is where we're tracking the key values and we're placing it into our keys.

150
00:09:44,050 --> 00:09:45,490
Objects are setting it us.

151
00:09:45,490 --> 00:09:45,880
True.

152
00:09:45,880 --> 00:09:49,960
Whenever the key is pressed down and we're setting it as false whenever the key is lifted.

153
00:09:50,110 --> 00:09:55,930
And this also gives you the option to really easily add any other key process within our functionality.

154
00:09:56,080 --> 00:09:59,650
So you can do quite a bit more with any other key presses it's already built in.

155
00:09:59,770 --> 00:10:03,640
You just have to have the condition looking for that value within the Keys object.

156
00:10:03,670 --> 00:10:08,020
Another important function that we have within our gameplay is the collision detection.

157
00:10:08,050 --> 00:10:13,900
So we're using the get bounding client rectangle and that's the reference to the Mozilla area where

158
00:10:13,900 --> 00:10:14,560
it's located.

159
00:10:14,980 --> 00:10:18,910
So this was getting some parameters of what each element is.

160
00:10:19,150 --> 00:10:22,690
So we've got our top right, left and bottom positions.

161
00:10:22,690 --> 00:10:30,580
And using these values, we can fairly easily do a comparison on the on the vertical as well as the

162
00:10:30,850 --> 00:10:34,600
horizontal and see if any of this overlap is true.

163
00:10:34,780 --> 00:10:38,950
And if it is, then what we're doing is we're flipping this upside down.

164
00:10:39,250 --> 00:10:45,910
And if it's coming out as false, so any of these are false, then we're turning it into true.

165
00:10:45,910 --> 00:10:48,310
We're negating it, and that's how we're passing it back.

166
00:10:48,310 --> 00:10:51,550
We're checking to see if the collision happened and the collision happened.

167
00:10:51,550 --> 00:10:52,540
Then we end the game.

168
00:10:52,750 --> 00:10:55,070
So this is, again, within that moving of the pipes.

169
00:10:55,090 --> 00:10:58,690
Another important function that we had was the building of the pipes.

170
00:10:58,930 --> 00:11:05,020
And this was a great exercise in creating elements on the fly where we're creating an element.

171
00:11:05,390 --> 00:11:08,250
We're setting some default object values into it.

172
00:11:08,270 --> 00:11:14,240
We're also updating its class list, updating that's in our HTML, updating its height randomly, and

173
00:11:14,240 --> 00:11:17,690
then we're setting these values within the style properties.

174
00:11:17,690 --> 00:11:22,400
And then we had a few other value object values that we had in the background that we're running that

175
00:11:22,400 --> 00:11:23,270
we could utilize.

176
00:11:23,270 --> 00:11:27,530
And we're setting their background color to red so we can also make this random if we wanted to.

177
00:11:27,740 --> 00:11:32,640
So that's another way to extend upon the gameplay to make the board a little bit more interesting.

178
00:11:32,660 --> 00:11:34,870
We also have our pipes here.

179
00:11:34,880 --> 00:11:36,350
So this is the second part of the pipe.

180
00:11:36,350 --> 00:11:43,460
And this one essentially is calculated out how high it has to be taking into consideration what our

181
00:11:43,460 --> 00:11:50,690
total height that's available, our first pipe, the so the top pipe hiders minus also the spacing that

182
00:11:50,690 --> 00:11:52,120
we generated here at random.

183
00:11:52,340 --> 00:11:55,310
So we've got different spacing between the top and the bottom pipe.

184
00:11:55,580 --> 00:12:00,290
We built out some styling, applied the styling to it, and then appended it to our game area just like

185
00:12:00,290 --> 00:12:01,320
we did with the first pipe.

186
00:12:01,670 --> 00:12:06,090
So essentially adding all of that in within one shot, within that one function.

187
00:12:06,110 --> 00:12:09,050
So hope you had an opportunity to build out your own version of the game.

188
00:12:09,230 --> 00:12:13,700
And I do encourage you to try out the code for yourself and see it working.

189
00:12:13,940 --> 00:12:19,670
And you can even make adjustments and tweaks to really familiarize yourself working with the DOM, interacting

190
00:12:19,670 --> 00:12:22,220
with elements within the dome and manipulating those elements.

191
00:12:22,250 --> 00:12:24,020
Thanks again for taking the course.

192
00:12:24,020 --> 00:12:29,390
And remember, I'm always available and always happy to help clarify any of the content within the Q&A

193
00:12:29,390 --> 00:12:29,900
section.