1
00:00:00,330 --> 00:00:04,320
Hey, there's still a quite a few things that we need to take care of within the gameplay, but we're

2
00:00:04,320 --> 00:00:08,670
getting there and we've got kind of a working model and there are some things that we need to take care

3
00:00:08,670 --> 00:00:08,820
of.

4
00:00:08,970 --> 00:00:15,210
And the one that I'm going to do right now is that we want the lives to go down whenever the ball goes

5
00:00:15,210 --> 00:00:19,800
off the bottom of the screen, because that's really the objective, is to stop the ball from hitting

6
00:00:19,800 --> 00:00:24,870
the bottom and then control it and move it onto the bricks to crush the bricks and to get rid of all

7
00:00:24,870 --> 00:00:25,310
the bricks.

8
00:00:25,530 --> 00:00:28,580
So we also need a way to end the games when all the bricks are gone.

9
00:00:28,710 --> 00:00:30,060
We need a way to end that.

10
00:00:30,330 --> 00:00:38,550
So going into our Ed, we want to do one more check here and checking to see whatever the position of

11
00:00:39,330 --> 00:00:42,000
position ball y is.

12
00:00:42,300 --> 00:00:50,040
And if it's greater than the container Dem height, we can do a subtract 20 so it doesn't always have

13
00:00:50,040 --> 00:00:51,300
to be right to the end.

14
00:00:51,630 --> 00:00:57,030
So if it's greater than the container Dem height, then that means that we've fallen off the edge.

15
00:00:57,510 --> 00:01:02,880
And if we fall off the edge, I'm going to drop this in one more rounded bracket and if we fall off

16
00:01:02,880 --> 00:01:05,400
the edge then we can run a function.

17
00:01:05,400 --> 00:01:08,520
So fall off, it will run a full life function.

18
00:01:08,520 --> 00:01:12,500
And if not, then we can update the direction of the ball.

19
00:01:12,510 --> 00:01:15,910
So let's create that function to handle the falling off of the edge.

20
00:01:15,960 --> 00:01:22,560
So in this function, so fall off is one of the things that we want to do is distract the player lives.

21
00:01:23,160 --> 00:01:29,520
And the reason that I actually I placed it here separate is that we want to be able to check to see

22
00:01:29,520 --> 00:01:36,450
if the players lives have ran out and if a player lives is less than zero.

23
00:01:36,450 --> 00:01:38,190
Now, that means the game's over.

24
00:01:38,190 --> 00:01:39,510
So there's no more game to play.

25
00:01:39,840 --> 00:01:42,660
And we need to create another function in order to handle the end of the game.

26
00:01:43,020 --> 00:01:49,470
And we set the player lives to equal to zero and then we run the end of game function.

27
00:01:49,470 --> 00:01:56,250
Otherwise we update the number of lives where we've got our score updater method.

28
00:01:56,490 --> 00:01:57,720
So that will update that.

29
00:01:58,530 --> 00:02:03,540
And then we also want to have one more function and I'm going to call this one Storper.

30
00:02:03,690 --> 00:02:09,090
So what this is going to do, is this going to stop the ball and set it on top of the paddle so you

31
00:02:09,090 --> 00:02:10,410
can move it alongside the paddle?

32
00:02:11,040 --> 00:02:16,860
So I know we created a few functions here and let's quickly create some placeholders for these functions.

33
00:02:17,070 --> 00:02:21,960
So we have one to end the game and then we have another one that is called Storper.

34
00:02:22,500 --> 00:02:24,060
Stop the ball on top of the paddle.

35
00:02:24,090 --> 00:02:27,560
Before we do Storper, let's do our end game sequence.

36
00:02:27,570 --> 00:02:29,520
So taking our game over.

37
00:02:30,390 --> 00:02:37,770
And applying style to it, and we're going to do a display block of the style.

38
00:02:38,750 --> 00:02:46,070
And then also the game over, we can set the inner HTML and setting this as a game over.

39
00:02:47,650 --> 00:02:57,340
And line break there, your score, and then we can output the player score value so the player can

40
00:02:57,340 --> 00:02:58,150
see what they scored.

41
00:02:59,270 --> 00:03:00,440
And then take player.

42
00:03:01,960 --> 00:03:07,310
Game over and set that to true because the game is no longer in play.

43
00:03:08,350 --> 00:03:18,330
Take the ball style and we're going to need to select the ball element so ball style and then display.

44
00:03:18,550 --> 00:03:23,630
And this is going to be actually the opposite of what we do for the start of the game.

45
00:03:23,920 --> 00:03:26,530
So we're displaying it to Nunc or hiding that.

46
00:03:27,220 --> 00:03:34,870
And also because it's game over, we want to get rid of all of the bricks so we can go temp bricks and

47
00:03:34,870 --> 00:03:38,470
using the document documents a selecter.

48
00:03:39,040 --> 00:03:46,030
All we can loop through all of the elements with a class of brick, just as we did before, where we

49
00:03:46,030 --> 00:03:54,250
were selecting all of them and then looping through them so we can call this one Tilbrook again of temp

50
00:03:54,520 --> 00:03:55,180
bricks.

51
00:03:56,170 --> 00:04:03,710
So looping through all of the bricks, we can take t brick and then parents note.

52
00:04:03,730 --> 00:04:09,970
So just as we did before, where we're removing the child and then remove child and then the child that

53
00:04:09,970 --> 00:04:11,260
we're moving is t brick.

54
00:04:11,860 --> 00:04:13,930
So this will make sure that none of them are left.

55
00:04:14,050 --> 00:04:18,940
And really at the end of the game, we don't want we want to just completely clear up the board.

56
00:04:19,240 --> 00:04:21,460
So that should take care of clearing up the board.

57
00:04:21,730 --> 00:04:25,150
So we've got the end game whenever the list goes down to zero.

58
00:04:25,330 --> 00:04:31,000
So let's try that where we've got the lives and we'll start the lives one.

59
00:04:31,390 --> 00:04:32,440
So let's hit start game.

60
00:04:32,560 --> 00:04:36,760
And we see that whenever we run off the screen, we get game over.

61
00:04:37,060 --> 00:04:41,770
So we're not getting all of the functionality where we're not getting the score showing up.

62
00:04:41,770 --> 00:04:44,170
So let's take a closer look and see what happened here.

63
00:04:44,590 --> 00:04:47,800
So we're supposed to get the end game function firing off.

64
00:04:48,160 --> 00:04:50,620
And I do need to adjust the line height.

65
00:04:50,620 --> 00:04:55,660
And that's the problem there, that the line height is just way too large and also going to add in a

66
00:04:55,660 --> 00:04:56,830
height for it as well.

67
00:04:57,950 --> 00:04:58,990
So game over.

68
00:04:59,890 --> 00:05:05,050
And let's apply a style height and we'll do a height of two hundred fifty packs.

69
00:05:06,750 --> 00:05:07,560
So try that one.

70
00:05:08,440 --> 00:05:13,510
Now, when we go game over, game over your score to and then we can always start again.

71
00:05:13,770 --> 00:05:18,750
So there's a few other things that we need to make sure because it looks like this ball is traveling

72
00:05:18,750 --> 00:05:19,710
super fast.

73
00:05:20,040 --> 00:05:23,280
So we need a way to reset that speed as well.

74
00:05:23,520 --> 00:05:27,810
So it looks like every time I relaunch it, the ball is traveling even quicker.

75
00:05:28,080 --> 00:05:32,430
And that's because we're not actually stopping the animation from running the game.

76
00:05:32,560 --> 00:05:38,550
If the game isn't in play, if the game over is true, then we're not going to do any of the updates.

77
00:05:38,580 --> 00:05:40,370
So that will stop the animation frame.

78
00:05:40,860 --> 00:05:47,190
So if game over and we just put the negative in front of there, so that should stop that from happening.

79
00:05:47,700 --> 00:05:53,370
And let's try that one more time since we have game over and we also need to reset the ball position

80
00:05:53,610 --> 00:05:55,070
whenever we're starting the game.

81
00:05:55,290 --> 00:05:59,460
So let's add that in as well, where we need to set where the ball is positioned.

82
00:05:59,790 --> 00:06:07,830
So ball style and taking our left position and we can do 100 picks and we'll adjust that afterwards

83
00:06:08,160 --> 00:06:12,690
and then ball style and we'll take the top position.

84
00:06:13,110 --> 00:06:18,420
So ball style left and I'm going to use whatever the paddle offset is.

85
00:06:18,600 --> 00:06:23,190
So offset left value plus PEX.

86
00:06:24,410 --> 00:06:32,030
And we're going to do the same thing for top, we're going to offset the paddle, so ball style talk,

87
00:06:32,310 --> 00:06:38,090
we're going to use offset top in order to position where this ball is going to be sitting.

88
00:06:38,360 --> 00:06:42,640
So we start the game and we see that it goes all it goes directly down.

89
00:06:42,860 --> 00:06:46,460
So that means that we also have to toggle the direction as well.

90
00:06:46,830 --> 00:06:52,930
So we want to have the direction of how the ball is traveling to be equal to five, not negative five.

91
00:06:53,330 --> 00:06:58,670
So we also need to multiply that as well by so let's make an adjustment to the ball direction so that

92
00:06:58,670 --> 00:07:00,200
it starts out on a negative.

93
00:07:00,350 --> 00:07:02,090
So that will automatically move it up.

94
00:07:02,960 --> 00:07:09,690
And let's also update this and add in 50 so that we get center of where the panel is located.

95
00:07:09,920 --> 00:07:15,750
So let's seven also to minus 30 for the panel top us and we'll try that one out.

96
00:07:16,010 --> 00:07:21,440
So now, wherever the panel is, that's where the ball is going to start and generate and then it's

97
00:07:21,440 --> 00:07:22,670
going to move up from there.

98
00:07:22,880 --> 00:07:26,810
You can also change this to a smaller number so you have less of an incline.

99
00:07:27,320 --> 00:07:29,230
So it's a little bit more helpful for the player.

100
00:07:29,690 --> 00:07:30,890
So go ahead and add that in.

101
00:07:31,130 --> 00:07:34,790
And coming up next, we've got a part two to the tweaks and updates.

102
00:07:35,060 --> 00:07:37,970
We're going to continue to go through this and update Storper.

103
00:07:37,970 --> 00:07:39,280
So that's still all yet to come.