1
00:00:00,440 --> 00:00:05,750
This lesson, we're going to be creating a game over function and also doing some more dumb manipulation,

2
00:00:05,870 --> 00:00:06,890
so let's create that function.

3
00:00:08,120 --> 00:00:10,610
So this is what runs when the game is over.

4
00:00:10,760 --> 00:00:15,650
We're passing a boolean value whether they won or lost within the screen function.

5
00:00:15,980 --> 00:00:20,040
So we've got a game over and the game is over once the player wins.

6
00:00:20,360 --> 00:00:23,380
So once they guess correctly, that's where the game is over.

7
00:00:23,390 --> 00:00:25,490
So make sure you add that function in.

8
00:00:26,000 --> 00:00:27,200
And we've got correct.

9
00:00:27,200 --> 00:00:28,610
You guessed the number.

10
00:00:28,640 --> 00:00:35,270
And we also want it to track the number of tries so we can set up the number of tries where we've got

11
00:00:35,270 --> 00:00:39,830
game try or game guesses and setting that to zero.

12
00:00:39,950 --> 00:00:46,130
And then every time the game guess increases, whenever they do, I guess value sets, whenever they

13
00:00:46,130 --> 00:00:48,890
click in that, we're just incrementing up by one.

14
00:00:48,950 --> 00:00:50,740
So this is a way of keeping score.

15
00:00:50,870 --> 00:00:54,320
And we also want to so we've got correct.

16
00:00:54,320 --> 00:00:55,580
You guessed number.

17
00:00:55,850 --> 00:00:57,470
And let's add to that message.

18
00:00:57,680 --> 00:01:02,980
Guesses for was higher, seven was higher and we know it's ten.

19
00:01:02,990 --> 00:01:04,820
So sad that in so correct.

20
00:01:04,820 --> 00:01:07,170
You guessed ten in three guesses.

21
00:01:07,220 --> 00:01:10,460
There's also another thing that we can do to shorten our code a bit.

22
00:01:10,670 --> 00:01:12,290
So we've got the message output.

23
00:01:12,290 --> 00:01:17,560
We're updating the style of the element content and we can also pass in.

24
00:01:17,750 --> 00:01:22,850
So we're every time we're updating the input, we're also doing that so we can save ourselves a little

25
00:01:22,850 --> 00:01:26,210
bit of effort and add in the color.

26
00:01:26,240 --> 00:01:31,100
And we could do the same as we've got either colour or black if there's no color being passed in.

27
00:01:31,400 --> 00:01:36,800
So that's going to save us a few lines of code and still have that same functionality, whatever the

28
00:01:37,040 --> 00:01:38,410
guess is correct.

29
00:01:38,420 --> 00:01:42,950
We're going to update the color of the input was higher and we said seven.

30
00:01:43,100 --> 00:01:47,870
If we go eight, it's lower and we see the colors are updating as well for the input.

31
00:01:48,260 --> 00:01:50,810
We can also update the color of the button if we want to.

32
00:01:51,290 --> 00:01:53,390
So how about we add that in as well?

33
00:01:53,540 --> 00:01:58,790
And we do have the buttons selected in game BTN within the game and object.

34
00:01:58,790 --> 00:02:04,970
So setting the background, background, color of the elements and we can use the same format where

35
00:02:04,970 --> 00:02:12,020
it's either going to be black and then also updating the game button color of the game button to add

36
00:02:12,020 --> 00:02:12,620
style.

37
00:02:12,680 --> 00:02:13,220
Let's try.

38
00:02:13,220 --> 00:02:17,630
That was lower, was lower, was higher and correct.

39
00:02:17,630 --> 00:02:19,070
You guessed in two guesses.

40
00:02:19,070 --> 00:02:20,060
Hide the button.

41
00:02:20,060 --> 00:02:24,210
So when they get it correct, whenever the game is over, there's no more guesses.

42
00:02:24,230 --> 00:02:27,020
We want to update the contents of that button.

43
00:02:27,020 --> 00:02:28,100
So we've got the button.

44
00:02:28,100 --> 00:02:30,050
We can update the style of the buttons.

45
00:02:30,050 --> 00:02:36,410
So we go game over button updating the inner text or the inner HTML game.

46
00:02:36,680 --> 00:02:38,570
And we also want to hide the input.

47
00:02:38,570 --> 00:02:43,160
So we've got our game guests input and selecting style again.

48
00:02:43,160 --> 00:02:45,080
And this one is the display property.

49
00:02:45,290 --> 00:02:47,160
So we're setting that to display none.

50
00:02:47,330 --> 00:02:47,990
Try that.

51
00:02:48,590 --> 00:02:53,270
So we've got five was lower, so we know it's three in two guesses.

52
00:02:53,690 --> 00:02:53,950
Maybe.

53
00:02:53,960 --> 00:02:56,330
Let's also update that to try that again.

54
00:02:56,750 --> 00:03:01,550
And sometimes you do need to play through it a few times just to make sure that you are doing it properly.

55
00:03:01,670 --> 00:03:02,360
So correct.

56
00:03:02,360 --> 00:03:06,230
Guess of one and two guesses restart the game.

57
00:03:06,230 --> 00:03:08,720
So now we want to add and restart the game.

58
00:03:08,960 --> 00:03:14,240
So let's all let's do this in an interesting way where we're going to add in a class and then check

59
00:03:14,240 --> 00:03:16,670
to see if that class is there.

60
00:03:16,880 --> 00:03:21,710
So call it class replay and maybe we want to add some additional padding to it.

61
00:03:22,010 --> 00:03:25,820
And so when we win the game, then to this button.

62
00:03:26,000 --> 00:03:32,810
So the game button, we're going to add a class so we can do that by class list and we've got options

63
00:03:32,810 --> 00:03:34,640
to add, remove and toggle.

64
00:03:34,760 --> 00:03:38,210
And then we just need to specify the name of the class that we want to add.

65
00:03:38,210 --> 00:03:44,120
And so we go with the correct guess of five in two guesses restart game.

66
00:03:44,120 --> 00:03:46,580
So we've added in the pattern the buttons a little bit different.

67
00:03:47,300 --> 00:03:55,340
So next, whenever this button gets clicked, we want to check to see if it's a new restart game.

68
00:03:55,460 --> 00:04:00,680
And the way that we can do that now that we have that class sitting in there, we can check to see if

69
00:04:00,680 --> 00:04:02,120
it contains the class list.

70
00:04:02,120 --> 00:04:06,410
So checking to see if this or we could specify the game button.

71
00:04:06,530 --> 00:04:13,550
So both of them are the same object because the this refers to the element that invoked other so checking

72
00:04:13,550 --> 00:04:19,880
to see class list and we can see if it contains a particular class in here.

73
00:04:20,300 --> 00:04:24,980
So if it contains replay, then this is going to be a replay.

74
00:04:24,980 --> 00:04:32,570
So if this is true, then we want to run this set of code and if it's false, then we're going to run

75
00:04:32,570 --> 00:04:33,170
the other way.

76
00:04:33,200 --> 00:04:40,490
So if it's true, if replay is true, what we'll do is we'll just cancel log so we can track that value.

77
00:04:40,700 --> 00:04:44,690
So we're checking to see and making sure that our replay is working.

78
00:04:44,930 --> 00:04:46,310
So we finish the game.

79
00:04:46,550 --> 00:04:49,190
We've got to correct and whatever number of guesses.

80
00:04:49,460 --> 00:04:53,180
And now when I click the button, it's not doing the guess anymore.

81
00:04:53,210 --> 00:04:55,430
It's outputting replay into the console.

82
00:04:55,670 --> 00:04:59,450
So this is where we can take our actions to reset the game.

83
00:04:59,870 --> 00:05:05,620
The same thing, that kind of what we did within the IANSITI, where we reset the guesses, reset the

84
00:05:05,620 --> 00:05:10,860
game number, where we're resetting these values, so we now we've got a new value for game.

85
00:05:10,870 --> 00:05:16,660
We can also update the game minimum and maximum of what, as well as make the game harder or easier.

86
00:05:17,050 --> 00:05:19,220
And the rest of the functionality is the same.

87
00:05:19,390 --> 00:05:24,240
So we have to also show that input and we have to update the button contents.

88
00:05:24,240 --> 00:05:29,860
So going in here and I'm just going to update it back to see guess within the button contents.

89
00:05:29,870 --> 00:05:31,720
So that's going to say yes.

90
00:05:31,720 --> 00:05:36,190
And instead of display none, it's going to display block so we can have the guess.

91
00:05:36,190 --> 00:05:38,260
Again, one last thing that we need to do.

92
00:05:38,260 --> 00:05:43,600
So we have to completely negate what we did within the game over so that we have the game functionality

93
00:05:43,600 --> 00:05:46,740
back to our reset of the game functionality.

94
00:05:47,110 --> 00:05:51,070
So setting that up and instead of adding, we're going to remove that class.

95
00:05:51,310 --> 00:05:57,340
And you can see also if you do inspect, you can see that it does have the class within it.

96
00:05:57,520 --> 00:06:02,470
So the class of replay is there and initially there's no class of replay.

97
00:06:02,740 --> 00:06:05,310
So let's see if we get the guests properly.

98
00:06:05,650 --> 00:06:10,480
So if we as soon as we get it properly, you're going to see that that button is going to have that

99
00:06:10,480 --> 00:06:11,630
class added to it.

100
00:06:12,010 --> 00:06:18,100
So now, whatever that class is there and if we click it, it's going to give us the ability to replay

101
00:06:18,100 --> 00:06:20,380
and request that value.

102
00:06:20,620 --> 00:06:27,430
And we should also update the content here just to ask the player to guess the value.

103
00:06:27,580 --> 00:06:33,040
So the same information that we had within our initial and really we could just rerun in it because

104
00:06:33,040 --> 00:06:37,810
we're setting all of this information here so we don't have to do it again and again and we don't have

105
00:06:37,810 --> 00:06:40,630
to have the same values showing up there.

106
00:06:40,640 --> 00:06:44,980
The only thing that's different here is that we're updating the button values.

107
00:06:45,280 --> 00:06:49,860
So all of this is already contained within in it, so we don't have to do it again.

108
00:06:49,990 --> 00:06:53,530
So now we are ready to try that and guessing.

109
00:06:53,540 --> 00:06:55,140
So let's guess it correctly.

110
00:06:55,510 --> 00:07:00,850
So we go restart game and walk through the gameplay that you want to have for the player.

111
00:07:00,850 --> 00:07:02,680
So we've got the ability to restart the game.

112
00:07:02,920 --> 00:07:03,850
Welcome to the game.

113
00:07:03,880 --> 00:07:08,250
Yes, a number from one to zero and we're going to guess seven.

114
00:07:08,530 --> 00:07:10,570
So we know that or we're going to guess four.

115
00:07:10,690 --> 00:07:16,540
So seven is the value and we get it correct and then we can start the game again and notice that the

116
00:07:16,540 --> 00:07:17,910
guesses went back to zero.

117
00:07:18,130 --> 00:07:23,230
So there's one thing that we still need to do, and that's every time there's a guess, we need to clear

118
00:07:23,230 --> 00:07:28,660
out that gas input value so we don't constantly have to have the same one.

119
00:07:29,080 --> 00:07:31,730
We're going to just reset it back to Plank.

120
00:07:31,840 --> 00:07:34,420
So now whenever we enter in a guess.

121
00:07:34,570 --> 00:07:38,290
So we've got it in one guess that was a lucky one was higher.

122
00:07:38,620 --> 00:07:39,810
And we know that it's ten.

123
00:07:39,820 --> 00:07:40,810
So try that again.

124
00:07:40,960 --> 00:07:41,850
Was higher.

125
00:07:41,890 --> 00:07:43,090
We know that it's six.

126
00:07:43,600 --> 00:07:46,860
So let's try seven lower and the number of guesses.

127
00:07:47,200 --> 00:07:50,010
So everything seems to be working as we're expecting.

128
00:07:50,440 --> 00:07:55,360
So coming up next, we'll do a few more game tweaks and just to make sure all the functionality is there,

129
00:07:55,450 --> 00:08:01,000
and then we'll do a final run through of the court and add in some more of the door manipulation, handling

130
00:08:01,000 --> 00:08:07,690
of the game end and also clean up some of that code where we can add the same functionality within the

131
00:08:07,690 --> 00:08:12,190
functions instead of having to write them multiple times within your code.

132
00:08:12,340 --> 00:08:16,810
If you're reusing functionality, use the functions to run the blocks of code.