1
00:00:00,480 --> 00:00:06,060
Congratulations on making it to the end of the section in this lesson, I'm going to do a quick review

2
00:00:06,060 --> 00:00:08,780
of what we covered in the earlier lessons.

3
00:00:09,030 --> 00:00:15,030
So first of all, we came in, we set up our HTML and then we also added in some styling, we tried

4
00:00:15,030 --> 00:00:18,450
to keep it to a minimum because, of course, we do want to focus on JavaScript.

5
00:00:18,630 --> 00:00:24,750
We created one main class, which was the brick as well as the container and then the score in the lives

6
00:00:24,750 --> 00:00:28,200
so that it shows up a little bit bigger on the screen.

7
00:00:28,320 --> 00:00:30,930
And we could have, of course, done that in JavaScript as well.

8
00:00:31,020 --> 00:00:32,760
So it would have taken quite a few lines.

9
00:00:32,880 --> 00:00:37,860
And the earlier lesson where we went through creating the element and applying all of the styling,

10
00:00:37,890 --> 00:00:42,150
it was a good exercise in applying styling, but it did take quite a bit of time.

11
00:00:42,150 --> 00:00:44,550
And as well, a lot of this is repetition.

12
00:00:44,700 --> 00:00:50,220
So once you start accessing the styling and updating the styling, then this is just like setting styling

13
00:00:50,220 --> 00:00:51,270
within a style sheet.

14
00:00:51,450 --> 00:00:53,430
The format is pretty much the same.

15
00:00:53,430 --> 00:00:57,090
The property values are the same, the property names are slightly different.

16
00:00:57,100 --> 00:01:01,170
So keep that in mind as well, that we don't have any spaces, we don't have any dashes.

17
00:01:01,170 --> 00:01:02,640
And this is all camel KAIST.

18
00:01:02,880 --> 00:01:08,790
So sometimes you do have to look up and with editors like Brackett's, you're going to get a dropdown

19
00:01:08,790 --> 00:01:13,800
when you do both style and another dot and you can see a dropdown of the options that you have for the

20
00:01:13,800 --> 00:01:14,310
styling.

21
00:01:14,460 --> 00:01:19,800
So you can start start typing it and generally be able to figure out what the style and how to adjust

22
00:01:19,800 --> 00:01:20,760
that style property.

23
00:01:20,910 --> 00:01:25,530
So everything you can do a success, you can do a JavaScript and you can do it better with JavaScript,

24
00:01:25,530 --> 00:01:25,940
of course.

25
00:01:26,280 --> 00:01:31,410
So getting the container, creating the elements or creating our main game elements, including the

26
00:01:31,410 --> 00:01:37,740
paddle, the ball and then hiding them, we added in event listeners for the key presses to track the

27
00:01:37,740 --> 00:01:38,490
key presses.

28
00:01:38,680 --> 00:01:42,600
So this gives us an option to track multiple key presses at once.

29
00:01:42,840 --> 00:01:47,490
We could have done it as well, that every time the key is pressed, then we take the action directly.

30
00:01:47,670 --> 00:01:53,700
But in this case, we chose to add an update to the paddle object where we were setting the value of

31
00:01:53,700 --> 00:01:57,470
left to right to true and then one key up to false.

32
00:01:57,690 --> 00:02:00,360
So this is in case the user is holding the key down.

33
00:02:00,780 --> 00:02:03,000
We don't need to register it multiple times.

34
00:02:03,150 --> 00:02:08,610
And this is also leads to a smoother animation when you do it this way, because it's only looking for

35
00:02:08,610 --> 00:02:09,900
the object value.

36
00:02:09,960 --> 00:02:14,010
And doesn't matter if you're pressing the key, letting off the key, you're not going to have any type

37
00:02:14,010 --> 00:02:15,030
of choppy movement.

38
00:02:15,120 --> 00:02:20,340
And as soon as you let off the key, then it goes to false and whatever animation frame it's on, then

39
00:02:20,340 --> 00:02:21,750
it's going to stop that action.

40
00:02:21,930 --> 00:02:28,140
We also added in one last one here looking for the press of the up arrow and that would launch the ball.

41
00:02:28,290 --> 00:02:34,110
You can also adjust this to other numbers, other key codes as well, and add that into the string.

42
00:02:34,110 --> 00:02:36,690
So checking to see for a number of different key codes.

43
00:02:36,870 --> 00:02:43,020
And the most important one here is that if player inplay is false, then we're going to set it to true.

44
00:02:43,230 --> 00:02:45,300
And that's what that action is doing.

45
00:02:45,390 --> 00:02:50,310
And setting it to true initiated the ball movement and allowed us to move the ball around.

46
00:02:50,520 --> 00:02:54,230
We set up one main default object called player.

47
00:02:54,390 --> 00:02:59,460
So this is where all the player values go and this is global sitting on the global scope.

48
00:02:59,730 --> 00:03:05,430
So that gave us the ability to access it in any one of the functions and really easily access and update

49
00:03:05,430 --> 00:03:07,860
those values starting the game.

50
00:03:07,860 --> 00:03:12,780
So that was the main game function where when you hit the start game button starts the game.

51
00:03:12,930 --> 00:03:15,000
So there is a bunch of variables that we had to set up.

52
00:03:15,000 --> 00:03:17,400
So everything player is player related.

53
00:03:17,520 --> 00:03:18,840
So we set all of those.

54
00:03:18,840 --> 00:03:21,210
We also set a default position for the ball.

55
00:03:21,450 --> 00:03:26,430
So in case we're starting the game again, we're setting the default position of that ball.

56
00:03:26,580 --> 00:03:33,240
And we also we're handling it whenever we're adding it and landing it on the paddle so we could potentially

57
00:03:33,240 --> 00:03:33,870
remove this.

58
00:03:34,020 --> 00:03:35,790
But let's keep this in case.

59
00:03:36,270 --> 00:03:41,760
But this probably isn't doing a whole lot right now because we did add that updated function.

60
00:03:42,000 --> 00:03:48,930
So next, we set up all the variables for the player, set up the visuals and then set the bricks.

61
00:03:48,930 --> 00:03:54,090
And this was dynamic so we can create as many bricks as we want and we created a function in order to

62
00:03:54,090 --> 00:03:54,600
handle that.

63
00:03:54,600 --> 00:03:56,100
So called it set up bricks.

64
00:03:56,340 --> 00:03:59,700
It takes one parameter and that's the number of bricks that we need to create.

65
00:04:00,030 --> 00:04:05,700
And it builds out the calculations for where it's going to position the bricks.

66
00:04:05,910 --> 00:04:09,540
So positioning in a grid like fashion, so initially it centers them.

67
00:04:09,540 --> 00:04:12,180
So the starting position is centered.

68
00:04:12,420 --> 00:04:20,160
It calculates how many hundred picks bricks it can place across the screen and then it divides the remainder

69
00:04:20,160 --> 00:04:20,850
by two.

70
00:04:20,970 --> 00:04:26,400
So that gives us the ability to center it and then the starting position of Y and every time we hit

71
00:04:26,400 --> 00:04:33,750
to the end of X and we increment X back to zero to the start position and then we also increment Y,

72
00:04:33,750 --> 00:04:38,820
so we get another row of bricks and then whatever number of bricks we have, it will continue to build

73
00:04:38,820 --> 00:04:39,540
out the rose.

74
00:04:39,720 --> 00:04:46,530
We do have one calculation here where we're checking to see and making sure that the width, the the

75
00:04:46,530 --> 00:04:54,420
bricks ro y hasn't passed our center point of the application because we don't want the bricks going

76
00:04:54,420 --> 00:04:59,490
all the way down and we want that dynamic sizing for the screen.

77
00:04:59,810 --> 00:05:05,210
So that's where we added in the ability to skip creating additional bricks, so once we hit a certain

78
00:05:05,210 --> 00:05:09,680
point that we're not going to create any more bricks, we're just going to skip that and the creation

79
00:05:09,680 --> 00:05:10,320
of the bricks.

80
00:05:10,340 --> 00:05:16,060
So this was relatively a simple part where, again, we're creating an element, playing some styles

81
00:05:16,070 --> 00:05:18,530
to it and then appending it to the main container.

82
00:05:18,950 --> 00:05:20,810
So that's took care of starting the game.

83
00:05:21,020 --> 00:05:23,450
We also have a function to update the score.

84
00:05:23,600 --> 00:05:28,670
So any time the lives and the score need updating, we take the value that's contained within the player

85
00:05:28,670 --> 00:05:32,420
object and we apply it to the screen so that we can see it within the screen.

86
00:05:32,630 --> 00:05:39,290
And then we kick off our animation sequence making a request animation frame, calling the function

87
00:05:39,290 --> 00:05:40,190
called update.

88
00:05:40,400 --> 00:05:46,160
And then this is where all the action happens and all the fun stuff happens where we've got we're checking

89
00:05:46,160 --> 00:05:53,720
to see if the game is over first and if the game is not over, if it's in play, we get the paddle position

90
00:05:53,990 --> 00:06:01,370
and then we update the paddle position and we check to see if it's off screen and we can subtract to

91
00:06:01,370 --> 00:06:01,550
it.

92
00:06:02,060 --> 00:06:07,490
So we make sure that the boundaries are set for where we can subtract and where we can add to it.

93
00:06:07,760 --> 00:06:11,930
And then we update its visual position at style properties, left properties.

94
00:06:12,260 --> 00:06:15,570
And then we also check to see if the ball is in play.

95
00:06:15,860 --> 00:06:20,090
So if the ball is waiting on the paddle, then we run the function waiting on the paddle.

96
00:06:20,210 --> 00:06:23,120
If the ball is moving, then we run the function, move ball.

97
00:06:23,330 --> 00:06:29,360
And then after all of that is said and done, we relaunched the animation to have a nice, smooth animation

98
00:06:29,360 --> 00:06:30,140
with an update.

99
00:06:30,140 --> 00:06:34,160
So it continuously runs this block of code while the game is in play.

100
00:06:34,430 --> 00:06:39,260
We create a function waiting on paddle because there's a number of times that we would need to call

101
00:06:39,260 --> 00:06:39,740
to this.

102
00:06:39,980 --> 00:06:46,550
So this what this does is this sets the ball position according to wherever the paddle position is.

103
00:06:46,730 --> 00:06:50,570
And that gave us the ability to kind of make it look like the ball was sitting on top of the paddle

104
00:06:50,570 --> 00:06:52,730
and we could move it across and around.

105
00:06:52,850 --> 00:06:57,620
And then once we the player launches the ball again that we're just go back to moving the ball.

106
00:06:58,040 --> 00:07:02,180
We had some conditions to check to see if the ball falls off screen.

107
00:07:02,300 --> 00:07:04,940
And if it does, then the player loses a life.

108
00:07:05,090 --> 00:07:09,380
If the player is less than zero lives, then the game is over.

109
00:07:09,500 --> 00:07:12,710
We have a function to run the game end and we just reset.

110
00:07:12,710 --> 00:07:14,110
The player lives to zero.

111
00:07:14,270 --> 00:07:19,130
We do an update of the score so that visually representing the change in the lives, so times change

112
00:07:19,130 --> 00:07:22,430
the lives or the score, you need to update its run score updater.

113
00:07:22,550 --> 00:07:28,820
And then we have a function called Storper, which is where we stop the ball from moving and we set

114
00:07:28,820 --> 00:07:29,780
it on top of the paddle.

115
00:07:29,780 --> 00:07:33,260
So that's our function that handles that end of game.

116
00:07:33,280 --> 00:07:35,600
So that shows the start game again.

117
00:07:35,600 --> 00:07:42,560
That option to restart the game gives us our score, sets the game over to Truc so that we're not running

118
00:07:42,560 --> 00:07:44,000
anymore animation frames.

119
00:07:44,300 --> 00:07:48,830
We also hide the ball, hide the ball off the screen.

120
00:07:49,100 --> 00:07:54,860
We then look at all of the bricks and we make sure that there's no bricks left and there shouldn't be

121
00:07:54,860 --> 00:07:55,970
if you've run out of bricks.

122
00:07:55,970 --> 00:07:57,530
But this is just in case.

123
00:07:57,800 --> 00:08:03,230
And of course, we want to remove any bricks that might be existing that might interfere with the next

124
00:08:03,230 --> 00:08:04,130
round of the gameplay.

125
00:08:04,310 --> 00:08:06,320
So always a good idea to kind of make sure.

126
00:08:06,320 --> 00:08:07,850
And you've remove all of the moat.

127
00:08:08,420 --> 00:08:14,390
So, Storper, we already talked about that one and that one runs the cancel animation frame, sets

128
00:08:14,390 --> 00:08:20,330
it on the paddle, and then visually sets it on the paddle, outdates the ball direction and updates

129
00:08:20,330 --> 00:08:20,900
the inplay.

130
00:08:20,900 --> 00:08:22,280
We have our move ball.

131
00:08:22,280 --> 00:08:26,720
So this is where we've got some calculations where we get the balls current position.

132
00:08:26,720 --> 00:08:32,840
So using the offset left and offset top, we get an X and Y position and then we use those X and Y positions

133
00:08:33,050 --> 00:08:34,610
to make our calculations.

134
00:08:34,820 --> 00:08:42,620
We check to see if the ball is if it's gone off screen in any way and if it's at the edge of the screen.

135
00:08:42,620 --> 00:08:46,610
So that created or boundaries gave us the ability to flip it.

136
00:08:46,610 --> 00:08:52,880
So multiplying anything by a negative one will flip it to a negative will become a positive.

137
00:08:53,000 --> 00:08:54,710
A positive will become a negative.

138
00:08:54,860 --> 00:09:00,470
So that's how we change direction, where we just multiply the direction by one.

139
00:09:00,470 --> 00:09:04,820
So whatever the value is within this array, we're just going to multiply it by one.

140
00:09:04,970 --> 00:09:09,260
And this also gave us the flexibility, change the speed of the ball in the angle of the ball and all

141
00:09:09,260 --> 00:09:09,650
of that.

142
00:09:10,250 --> 00:09:16,640
If the ball runs off the screen, that means that we lost a life and we run the follow function, which

143
00:09:16,640 --> 00:09:17,330
we've covered.

144
00:09:17,840 --> 00:09:22,250
And then we also do the same thing for the X, the horizontal coordinates.

145
00:09:22,490 --> 00:09:29,210
So we make sure that if the ball is running off the horizontal right side or the left side, then we

146
00:09:29,210 --> 00:09:30,950
just change the direction of the ball.

147
00:09:31,130 --> 00:09:39,440
So zero was ball direction of the value of how it moves horizontally and ball direction.

148
00:09:39,440 --> 00:09:42,590
One is the one that takes care of the vertical moving.

149
00:09:43,160 --> 00:09:48,470
We also checked to see if there's a collision with the paddle and if there is a collision that the paddle,

150
00:09:48,620 --> 00:09:50,480
then we console logout hit.

151
00:09:50,480 --> 00:09:58,520
We can remove that, we update the ball direction and then we also flip the horizontal direction as

152
00:09:58,520 --> 00:09:58,730
well.

153
00:09:58,850 --> 00:09:59,640
We go.

154
00:09:59,950 --> 00:10:07,990
All of the bricks and we checked to see if bricks is at zero and if it is zero, then we stop the ball

155
00:10:07,990 --> 00:10:08,650
from moving.

156
00:10:08,800 --> 00:10:14,560
We set it back on the panel and then we set up a new set of bricks so the player can continuously play

157
00:10:14,710 --> 00:10:17,490
score more until they actually lose all of their lives.

158
00:10:17,500 --> 00:10:18,510
The game's not going to end.

159
00:10:18,550 --> 00:10:22,680
We loop through all of the bricks that we've selected within the node list.

160
00:10:22,690 --> 00:10:25,000
We check to see if there's collision with the ball.

161
00:10:25,210 --> 00:10:28,990
If there's is collision with the ball, that means that the ball hit one of the bricks.

162
00:10:29,230 --> 00:10:35,470
So we need to update the player score, remove the brick from the visible area and then update and do

163
00:10:35,470 --> 00:10:36,550
the score updater.

164
00:10:36,610 --> 00:10:41,380
And over here is where we're changing the ball's direction so that if it's going up, it'll start going

165
00:10:41,380 --> 00:10:42,550
down and so on.

166
00:10:42,790 --> 00:10:49,690
And then we make an update for the player position of the ball, depending on what we've done here within

167
00:10:49,690 --> 00:10:50,410
the conditions.

168
00:10:50,590 --> 00:10:57,220
And then lastly, we set the ball style properties to match what the ball position, the new ball position

169
00:10:57,220 --> 00:10:58,640
is of X and Y.

170
00:10:58,690 --> 00:11:04,180
I hope you had an opportunity to try out some of the code, extend on the functionality that we've covered

171
00:11:04,180 --> 00:11:09,610
and make the game even better, enhance the gameplay, update some of the styling, make it look better,

172
00:11:09,640 --> 00:11:12,480
really customize the game functionality.

173
00:11:12,550 --> 00:11:14,480
There's a lot of directions to go from here.

174
00:11:14,650 --> 00:11:18,730
Thanks again for taking the course and for taking the section.

175
00:11:19,060 --> 00:11:23,590
If you have any questions or comments or need clarity on any of the topics that have been covered,

176
00:11:23,770 --> 00:11:26,320
I'm always happy to help within the Q&A section.

177
00:11:26,590 --> 00:11:28,840
Please let me know and I'll see you in the next one.