1
00:00:00,060 --> 00:00:05,370
We need to add in some scoring into the game, as well as a way to end the game, so we know that we've

2
00:00:05,370 --> 00:00:08,320
got once we've got a collision, that's when the game is over.

3
00:00:08,610 --> 00:00:13,440
So starting out with the scoring, let's update and add in the score for the game.

4
00:00:13,440 --> 00:00:18,930
We've already got a score element on the page and we've already connected it to a value of score.

5
00:00:19,110 --> 00:00:25,650
And within the player set up, I'm also going to set up a value of score set as default.

6
00:00:26,070 --> 00:00:32,760
And then when we start the game, what I want to do as well is take that value and set it to player

7
00:00:32,880 --> 00:00:35,430
score is going to be equal to zero.

8
00:00:35,440 --> 00:00:37,540
So this is our starting position of the game.

9
00:00:38,010 --> 00:00:44,340
So once the game is in play, every time we loop through, I want to update the score.

10
00:00:44,550 --> 00:00:50,550
So every time we're running through that function play game before we conclude, I want to update the

11
00:00:50,550 --> 00:00:50,880
score.

12
00:00:51,180 --> 00:00:53,850
So let's add that value in.

13
00:00:53,880 --> 00:00:57,960
So that's player score and we're going to increase it by one.

14
00:00:59,230 --> 00:01:07,570
And then using the score object, we're going to update the entire text of that element to equal whatever

15
00:01:07,570 --> 00:01:09,090
the value of player scores.

16
00:01:09,940 --> 00:01:13,510
So try that and we see that we've got our score calculating their.

17
00:01:14,380 --> 00:01:20,320
Add in a little bit of styling for that score, so background, color and also the background color

18
00:01:20,320 --> 00:01:21,250
to be black.

19
00:01:21,610 --> 00:01:23,440
Also, let's set up a height for that.

20
00:01:23,560 --> 00:01:28,190
So height of and text a line will center text a line that value.

21
00:01:28,510 --> 00:01:31,210
And also we need to actually see the score.

22
00:01:31,390 --> 00:01:33,970
So let's update the color of the score to be white.

23
00:01:36,190 --> 00:01:43,390
So we've got our score value, and that's always increasing and we can also update that to say score

24
00:01:43,930 --> 00:01:46,450
to make it more evident what it is that we're outputting there.

25
00:01:46,690 --> 00:01:47,980
So as we're playing the game.

26
00:01:50,380 --> 00:01:51,070
Score.

27
00:01:53,290 --> 00:01:55,480
And increasing the players score.

28
00:01:56,800 --> 00:02:03,610
What's it going to make the text a little bit bigger as well, and of course, you can style this as

29
00:02:03,610 --> 00:02:04,000
needed.

30
00:02:06,070 --> 00:02:07,630
So just some default staling.

31
00:02:09,140 --> 00:02:14,270
And also, I always like to add in the font family so we could and as fantasy.

32
00:02:16,190 --> 00:02:22,460
So we've got our skort score ever increasing in value, and then once we hit the collision, that's

33
00:02:22,460 --> 00:02:23,480
where we want to stop the game.

34
00:02:23,490 --> 00:02:24,830
We lost all of the gameplay.

35
00:02:26,680 --> 00:02:34,840
And we do have a function in order to handle the end game, so let's create that so end game function.

36
00:02:35,140 --> 00:02:38,130
So we've got our hit and at this point we want to end the game.

37
00:02:40,310 --> 00:02:45,410
So when we start the game, ending the game is going to be fairly opposite to that.

38
00:02:45,530 --> 00:02:49,640
So we're just going to build that down here where we've got the start button.

39
00:02:51,950 --> 00:02:52,850
So function.

40
00:02:54,280 --> 00:03:03,250
And game to generate that end of the game, so player start is now going to be false.

41
00:03:05,670 --> 00:03:07,530
So that's going to stop the looping.

42
00:03:09,560 --> 00:03:14,080
And where we've got that animation frame, so it's going to stop it from continuously looping through,

43
00:03:15,500 --> 00:03:18,960
so try that and make sure that we do have a way of ending the game.

44
00:03:19,520 --> 00:03:22,350
So that's our essentially our game ending part there.

45
00:03:23,180 --> 00:03:26,210
We can also update our message.

46
00:03:28,110 --> 00:03:34,170
So our score and in our HTML can say game over.

47
00:03:36,730 --> 00:03:43,660
And I had to line break their score was and then whatever the value of score is going to be, and that's

48
00:03:43,660 --> 00:03:45,670
again held in player score.

49
00:03:46,750 --> 00:03:53,140
So we've got our score score was 104 and game over, so we've got all of the messaging that we need,

50
00:03:54,070 --> 00:03:58,290
I got to make this a little bit bigger because it looks like it's running out of the overlap there.

51
00:03:58,690 --> 00:04:01,390
So the score again or just that slightly.

52
00:04:01,510 --> 00:04:04,740
And sometimes that is the case where you do need to make adjustments at.

53
00:04:06,430 --> 00:04:13,060
So now what I want to do is I want to add the ability to start the game once again, and we can do this

54
00:04:13,060 --> 00:04:19,150
in a number of ways that we want to have the ability to initiate, again, a brand new start screen.

55
00:04:20,550 --> 00:04:27,660
And I'm going to create a button in order to accomplish that so we can add that into our score area,

56
00:04:27,960 --> 00:04:35,400
or we could simply add that on top of our start screen that we hid when we pressed the start button.

57
00:04:36,730 --> 00:04:46,120
And instead of hiding it, we're going to remove that class of hide, so we'll have our start screen

58
00:04:46,120 --> 00:04:46,620
once again.

59
00:04:48,040 --> 00:04:50,970
So once we have our collision, we get our welcome message again.

60
00:04:53,250 --> 00:05:01,230
And I want to update some of the styling for that, I'll do a margin auto so that it centers the content

61
00:05:01,830 --> 00:05:03,940
and for that we also need a width as well.

62
00:05:04,890 --> 00:05:06,480
So it's set up to 300 pics.

63
00:05:06,900 --> 00:05:07,440
Try that it.

64
00:05:08,630 --> 00:05:11,130
Welcome message and see what happens, we'll get a collision.

65
00:05:11,780 --> 00:05:12,480
So there we go.

66
00:05:12,500 --> 00:05:15,320
We've got our welcome message again showing up there.

67
00:05:16,850 --> 00:05:18,080
Instead, a welcome message.

68
00:05:20,680 --> 00:05:21,500
And so there we go.

69
00:05:21,520 --> 00:05:27,610
So we've got all of our gameplay and all of our score and our information being output into our.

70
00:05:29,040 --> 00:05:35,460
So go ahead and add this end game function into your game, and we should also have a way to start the

71
00:05:35,460 --> 00:05:35,990
game again.

72
00:05:36,210 --> 00:05:39,120
And as you can see, it's not really starting well.

73
00:05:39,300 --> 00:05:44,760
So that means that we need to remove quite a few elements when we hit the start game just to make sure

74
00:05:44,760 --> 00:05:46,620
that everything is emptied out.

75
00:05:46,980 --> 00:05:51,780
So going into our start game and we're going to take care of this in the upcoming lesson so that we

76
00:05:51,780 --> 00:05:54,420
can actually restart the game by clicking the button.

77
00:05:54,660 --> 00:05:58,530
And we've got a few things that aren't working exactly as needed.

78
00:05:58,630 --> 00:06:01,080
So we need to take care of those in the upcoming lessons.

79
00:06:01,130 --> 00:06:01,860
That's still to come.