Original subtitles

1 1

All right.So let's now implement 2

2

the last missing functionality in our game, 3

3

which is the high scores. 4

4

And to really understand how the high score 5

5

should work in this game, 6

6

let's take a look at the demo again. 7

7

So let's reload the game. 8

8

And let's start here. 9

9

And so you see that the score starts at 19. 10

10

So let's try a couple of times to a low score. 11

11

Okay, so correct number two score is 10. 12

12

And the high score is now also set to 10. 13

13

Because this was my first game, 14

14

and so now this is also my new high score. 15

15

But now as I play again, 16

16

my score is of course, resetted to 20. 17

17

But now, if I do a better score, than this 10 here, 18

18

then that will become my new high score. 19

19

Okay, and that is going to happen as soon as I win the game. 20

20

So let's play again. 21

21

And to wish for a quick result. 22

22

And great, so now my score is 17. 23

23

And since that is more than the 10, that I had before, 24

24

that is now also my highest score. 25

25

Okay. Again because the current score is larger 26

26

than the previous high score. 27

27

And so that is now the new high score. 28

28

Okay. Now, right. And so basically, 29

29

what we just store here is now what we need to implement. 30

30

First off, we're gonna to need a 31

31

variable for the high score. 32

32

Right. So just like for the regular score, 33

33

we also need to store the high score in a variable. 34

34

So let, high score 35

35

and let's start this one at zero. 36

36

This way, the first score is always gonna be 37

37

the highest score, 38

38

because it's always going to be greater than zero. 39

39

Okay.So where do you think we should check 40

40

for the high score?. 41

41

So basically, if the current score 42

42

is greater than the high score?. 43

43

Well, remember that here the high score was set 44

44

as soon as the player won the game. 45

45

And so where is that in our code? 46

46

Well, it's here in this if block. 47

47

Okay, and so this is where we will check. 48

48

And to check that we will do, 49

49

as I explained previously, 50

50

is to ask whether the score is greater 51

51

than the current high score. 52

52

Right. And if it is, 53

53

so if our score of the current game is greater 54

54

than the highest score that we already had, 55

55

well, then the highest score will become 56

56

this new current score. 57

57

Right. So high score,equal score. 58

58

And that's it. 59

59

Now all we have to do is to display 60

60

that new high score here, in this element. 61

61

And actually, of course in our version of the game. 62

62

So right here. 63

63

So let's check the class name. 64

64

And it is called the highest score here. 65

65

So just this span, 66

66

So, document dot query selector. 67

67

And do remember, you should always write all of this here 68

68

by hand, to really put it into your brain. 69

69

So document dot query selector and dot high score. 70

70

And I have a problem writing score, apparently. 71

71

So text content, and this will be set to high score. 72

72

Okay, that's it. 73

73

This is the translation of the logic 74

74

that I just explained earlier. 75

75

So we need to have a high score variable, 76

76

so that we can keep track of it. 77

77

And then whenever our game finishes, 78

78

we check if the current score is 79

79

greater than the high score. 80

80

And if it is, that will become the new high score. 81

81

And so we set or high score variable 82

82

to the current score here. 83

83

Okay. 84

84

That's just to make sure we load it here. 85

85

And then let's play too high,Correct. 86

86

Oh now we have a very high score, 87

87

because we did it in our second guess. 88

88

Let me actually reload this page here. 89

89

So I want a really low, high score. 90

90

So let's try it again. 91

91

So I click a couple of times to decrease the current score. 92

92

Oh, and now we have a score of 14. 93

93

And you see the new high score is now 14. 94

94

Because it used to be zero, 95

95

but of course, 14 is greater. 96

96

And so 14 becomes our new high score. 97

97

Okay, and now as I click again, 98

98

everything will reset, except for the high score. 99

99

So that was the goal of having this button here. 100

100

So that we can play the game again, 101

101

but keeping the high score. 102

102

Because of course, if we reload the whole page, 103

103

then everything will be lost. 104

104

So the whole code will then run again, 105

105

and everything will reset. 106

106

But here, we now keep our high score, right. 107

107

So let's play again, and try to get a, 108

108

a better score here. 109

109

So that's too low, 110

110

17, maybe, and, yeah, now we get an even better score, 111

111

because of course, 18 is even greater than 17. 112

112

One last time now with a lower score, 113

113

just to see that it will then not become the new high score. 114

114

So we always need to test for all the scenarios 115

115

that we implemented in the code. 116

116

Just to make sure that everything works. 117

117

All 15 again, and so you see that the score was now 12. 118

118

But the highest score, of course, remained at 18. 119

119

Because this part here is now not true. Right? 120

120

Okay, so we implemented that as well. 121

121

And now our game is actually functional, it works just fine. 122

122

And you can show this now to a friend 123

123

and tell them that you built this on your own 124

124

with the power of JavaScript. 125

125

So how great is that? 126

126

So again, congratulations for making it to this point, 127

127

and for building really your first game using code. 128

128

Now, it's not really a sophisticated game, 129

129

but I still think it's a great achievement. 130

130

Now in the next video, 131

131

we will finish up and clean this code a little bit. 132

132

For example, this code here that we have in this scenario, 133

133

where the guess is too high, 134

134

is almost the same as we have here. 135

135

And so we can change that a little bit 136

136

to eliminate some of this duplicate codes. 137

137

There's also some other duplicate code 138

138

that we can get rid of. 139

139

And so yeah, let's do that in the next lecture, 140

140

because it's also important to really finish up 141

141

all applications and not just make them work.