1
00:00:00,210 --> 00:00:06,020
This lesson is about setting up the actual gameplay, so we do have start game, we plus the start button

2
00:00:06,150 --> 00:00:07,770
now it should disappear.

3
00:00:07,920 --> 00:00:13,160
We need to set up a few variables for the player, create a global object.

4
00:00:13,470 --> 00:00:19,050
So for now, I'm going to set one value in here and this is going to be game over to make sure that

5
00:00:19,050 --> 00:00:21,150
the game is actually over is true.

6
00:00:21,270 --> 00:00:26,380
And that will give us the ability to start the game, prevent any default game starts that might happen.

7
00:00:26,400 --> 00:00:30,500
So that's the first condition that we're using is player game over.

8
00:00:30,510 --> 00:00:36,540
And and if it is set to true that we can run through the start game functionality and the first thing

9
00:00:36,540 --> 00:00:42,870
that we want to do within the game over is we're going to set game over to be false so that the game

10
00:00:42,870 --> 00:00:49,340
is in play and we can't press the start button over and over again, hide the game over screen.

11
00:00:49,590 --> 00:00:55,110
So taking that game over screen style and the property that we're going to play is displayed properly.

12
00:00:55,350 --> 00:00:57,660
So setting that to display none.

13
00:00:57,810 --> 00:01:00,000
What happens is the start button heights.

14
00:01:00,000 --> 00:01:04,160
We start our gameplay also update some of the score values.

15
00:01:04,410 --> 00:01:11,760
So this is the ideal spot to set the player score and we want to set player score to be zero also where

16
00:01:11,940 --> 00:01:14,490
the number of lives that we want to set up for the player.

17
00:01:14,700 --> 00:01:16,340
So this is where we can create that.

18
00:01:16,560 --> 00:01:19,080
So in this case, let's set the lives to three.

19
00:01:19,680 --> 00:01:24,600
And we also want to update the ball property so that one is one that's hidden.

20
00:01:24,780 --> 00:01:30,360
So we want to take that display property of the ball and set it to block so that we can see the ball

21
00:01:30,630 --> 00:01:33,660
because that one is going to be moving and it's a crucial part of the game.

22
00:01:33,720 --> 00:01:38,910
So refresh hit the start button and we see we've got the ball and of course, we need to make the ball

23
00:01:38,910 --> 00:01:41,340
animations, but we do have our paddle moving.

24
00:01:41,340 --> 00:01:42,150
So that's a good thing.

25
00:01:42,330 --> 00:01:46,680
And we can continue to build out what we need for the start.

26
00:01:46,920 --> 00:01:49,710
So we also need to build our bricks.

27
00:01:49,710 --> 00:01:50,850
So set up the bricks.

28
00:01:51,150 --> 00:01:55,020
So we're going to have a function to set up bricks, bricks that we need to break.

29
00:01:55,020 --> 00:02:01,290
And also we're going to update the score so we'll have a score later function and we can create this

30
00:02:01,290 --> 00:02:06,810
one now because now we've got a value for score and lives so we can create a function that can update

31
00:02:07,140 --> 00:02:09,390
and we can call it score updater.

32
00:02:09,600 --> 00:02:16,800
So it's going to use the document query selector selecting the element with the class of score and we're

33
00:02:16,800 --> 00:02:21,330
going to update the text content to be equal to the player score.

34
00:02:21,420 --> 00:02:26,370
So this is where the actual score is going to be kept and we're just using this as a way to update it.

35
00:02:26,640 --> 00:02:29,100
And we can also update the number of lives here as well.

36
00:02:29,160 --> 00:02:33,330
There's a lot of times you're going to be updating these together anyway, so we'll have them within

37
00:02:33,330 --> 00:02:34,170
that one function.

38
00:02:34,440 --> 00:02:38,100
So now when we start the game, we've got a score of zero lives of three.

39
00:02:38,400 --> 00:02:42,060
So that's one of the other things that we needed within the start and then set up bricks we're going

40
00:02:42,060 --> 00:02:43,590
to take care of in the upcoming lesson.

41
00:02:43,620 --> 00:02:44,490
I'll show you how to do that.

42
00:02:44,490 --> 00:02:49,590
And within the start game, this is where you need to just consider what you need in order to start

43
00:02:49,590 --> 00:02:50,220
the gameplay.

44
00:02:50,550 --> 00:02:56,220
So the next part of this is that we've set up the player variables that these are going to be changing

45
00:02:56,220 --> 00:02:56,820
through the game.

46
00:02:57,180 --> 00:02:58,860
So player game over.

47
00:02:58,860 --> 00:03:05,580
So if it's in game play and the score, the lives, we've also hidden the element as well as showing

48
00:03:05,580 --> 00:03:07,560
the ones that we want within the game area.

49
00:03:07,740 --> 00:03:13,470
And we've updated the visible score so we can continuously call back to score updated every time we

50
00:03:13,470 --> 00:03:15,600
have a change within the score and the lives.

51
00:03:15,840 --> 00:03:18,900
We've got that request animation frame, which we saw last time.

52
00:03:19,050 --> 00:03:20,790
So that's in here as well.

53
00:03:21,000 --> 00:03:25,170
And we're all ready to move on to the function where we're setting up the bricks.

54
00:03:25,320 --> 00:03:26,610
And that's coming up next.

55
00:03:26,760 --> 00:03:29,610
So go ahead and add in the start game functionality.

56
00:03:29,820 --> 00:03:33,450
And I'm also going to go to this console message because we don't need that one anymore.