1 00:00:01,100 --> 00:00:03,630 All right.So let's now implement 2 00:00:03,630 --> 00:00:06,620 the last missing functionality in our game, 3 00:00:06,620 --> 00:00:08,463 which is the high scores. 4 00:00:09,880 --> 00:00:12,550 And to really understand how the high score 5 00:00:12,550 --> 00:00:14,280 should work in this game, 6 00:00:14,280 --> 00:00:17,283 let's take a look at the demo again. 7 00:00:18,420 --> 00:00:20,880 So let's reload the game. 8 00:00:20,880 --> 00:00:21,993 And let's start here. 9 00:00:23,770 --> 00:00:26,983 And so you see that the score starts at 19. 10 00:00:29,610 --> 00:00:33,733 So let's try a couple of times to a low score. 11 00:00:37,440 --> 00:00:40,950 Okay, so correct number two score is 10. 12 00:00:40,950 --> 00:00:44,370 And the high score is now also set to 10. 13 00:00:44,370 --> 00:00:46,330 Because this was my first game, 14 00:00:46,330 --> 00:00:49,810 and so now this is also my new high score. 15 00:00:49,810 --> 00:00:51,423 But now as I play again, 16 00:00:52,390 --> 00:00:55,560 my score is of course, resetted to 20. 17 00:00:55,560 --> 00:00:59,400 But now, if I do a better score, than this 10 here, 18 00:00:59,400 --> 00:01:01,813 then that will become my new high score. 19 00:01:02,760 --> 00:01:07,300 Okay, and that is going to happen as soon as I win the game. 20 00:01:07,300 --> 00:01:08,563 So let's play again. 21 00:01:13,350 --> 00:01:15,893 And to wish for a quick result. 22 00:01:18,320 --> 00:01:22,270 And great, so now my score is 17. 23 00:01:22,270 --> 00:01:25,660 And since that is more than the 10, that I had before, 24 00:01:25,660 --> 00:01:28,060 that is now also my highest score. 25 00:01:28,060 --> 00:01:31,690 Okay. Again because the current score is larger 26 00:01:31,690 --> 00:01:33,540 than the previous high score. 27 00:01:33,540 --> 00:01:35,970 And so that is now the new high score. 28 00:01:35,970 --> 00:01:38,670 Okay. Now, right. And so basically, 29 00:01:38,670 --> 00:01:42,653 what we just store here is now what we need to implement. 30 00:01:43,840 --> 00:01:45,580 First off, we're gonna to need a 31 00:01:45,580 --> 00:01:48,440 variable for the high score. 32 00:01:48,440 --> 00:01:51,960 Right. So just like for the regular score, 33 00:01:51,960 --> 00:01:55,223 we also need to store the high score in a variable. 34 00:01:56,600 --> 00:01:59,110 So let, high score 35 00:02:00,150 --> 00:02:03,010 and let's start this one at zero. 36 00:02:03,010 --> 00:02:05,720 This way, the first score is always gonna be 37 00:02:05,720 --> 00:02:06,780 the highest score, 38 00:02:06,780 --> 00:02:09,803 because it's always going to be greater than zero. 39 00:02:11,570 --> 00:02:15,590 Okay.So where do you think we should check 40 00:02:15,590 --> 00:02:17,270 for the high score?. 41 00:02:17,270 --> 00:02:19,560 So basically, if the current score 42 00:02:19,560 --> 00:02:21,940 is greater than the high score?. 43 00:02:21,940 --> 00:02:25,240 Well, remember that here the high score was set 44 00:02:25,240 --> 00:02:27,780 as soon as the player won the game. 45 00:02:27,780 --> 00:02:29,633 And so where is that in our code? 46 00:02:30,640 --> 00:02:33,223 Well, it's here in this if block. 47 00:02:34,420 --> 00:02:37,233 Okay, and so this is where we will check. 48 00:02:38,130 --> 00:02:39,860 And to check that we will do, 49 00:02:39,860 --> 00:02:41,780 as I explained previously, 50 00:02:41,780 --> 00:02:46,777 is to ask whether the score is greater 51 00:02:48,430 --> 00:02:50,203 than the current high score. 52 00:02:51,290 --> 00:02:53,510 Right. And if it is, 53 00:02:53,510 --> 00:02:57,200 so if our score of the current game is greater 54 00:02:57,200 --> 00:02:59,380 than the highest score that we already had, 55 00:02:59,380 --> 00:03:01,670 well, then the highest score will become 56 00:03:01,670 --> 00:03:03,203 this new current score. 57 00:03:04,050 --> 00:03:08,673 Right. So high score,equal score. 58 00:03:10,450 --> 00:03:11,710 And that's it. 59 00:03:11,710 --> 00:03:13,890 Now all we have to do is to display 60 00:03:13,890 --> 00:03:18,460 that new high score here, in this element. 61 00:03:18,460 --> 00:03:21,990 And actually, of course in our version of the game. 62 00:03:21,990 --> 00:03:23,053 So right here. 63 00:03:24,250 --> 00:03:26,873 So let's check the class name. 64 00:03:27,720 --> 00:03:31,810 And it is called the highest score here. 65 00:03:31,810 --> 00:03:33,773 So just this span, 66 00:03:35,290 --> 00:03:40,290 So, document dot query selector. 67 00:03:42,040 --> 00:03:45,100 And do remember, you should always write all of this here 68 00:03:45,100 --> 00:03:48,720 by hand, to really put it into your brain. 69 00:03:48,720 --> 00:03:53,720 So document dot query selector and dot high score. 70 00:03:55,920 --> 00:03:58,283 And I have a problem writing score, apparently. 71 00:03:59,130 --> 00:04:04,130 So text content, and this will be set to high score. 72 00:04:06,164 --> 00:04:08,430 Okay, that's it. 73 00:04:08,430 --> 00:04:10,890 This is the translation of the logic 74 00:04:10,890 --> 00:04:13,130 that I just explained earlier. 75 00:04:13,130 --> 00:04:15,330 So we need to have a high score variable, 76 00:04:15,330 --> 00:04:17,380 so that we can keep track of it. 77 00:04:17,380 --> 00:04:19,600 And then whenever our game finishes, 78 00:04:19,600 --> 00:04:21,840 we check if the current score is 79 00:04:21,840 --> 00:04:23,540 greater than the high score. 80 00:04:23,540 --> 00:04:26,950 And if it is, that will become the new high score. 81 00:04:26,950 --> 00:04:29,130 And so we set or high score variable 82 00:04:29,130 --> 00:04:31,243 to the current score here. 83 00:04:32,790 --> 00:04:33,653 Okay. 84 00:04:35,020 --> 00:04:38,330 That's just to make sure we load it here. 85 00:04:38,330 --> 00:04:42,070 And then let's play too high,Correct. 86 00:04:44,020 --> 00:04:46,180 Oh now we have a very high score, 87 00:04:46,180 --> 00:04:48,680 because we did it in our second guess. 88 00:04:48,680 --> 00:04:51,040 Let me actually reload this page here. 89 00:04:51,040 --> 00:04:54,500 So I want a really low, high score. 90 00:04:54,500 --> 00:04:55,823 So let's try it again. 91 00:04:57,550 --> 00:05:01,203 So I click a couple of times to decrease the current score. 92 00:05:03,780 --> 00:05:06,930 Oh, and now we have a score of 14. 93 00:05:06,930 --> 00:05:09,660 And you see the new high score is now 14. 94 00:05:09,660 --> 00:05:11,340 Because it used to be zero, 95 00:05:11,340 --> 00:05:13,330 but of course, 14 is greater. 96 00:05:13,330 --> 00:05:16,023 And so 14 becomes our new high score. 97 00:05:17,990 --> 00:05:20,450 Okay, and now as I click again, 98 00:05:20,450 --> 00:05:24,520 everything will reset, except for the high score. 99 00:05:24,520 --> 00:05:27,200 So that was the goal of having this button here. 100 00:05:27,200 --> 00:05:29,070 So that we can play the game again, 101 00:05:29,070 --> 00:05:30,750 but keeping the high score. 102 00:05:30,750 --> 00:05:33,500 Because of course, if we reload the whole page, 103 00:05:33,500 --> 00:05:35,310 then everything will be lost. 104 00:05:35,310 --> 00:05:37,540 So the whole code will then run again, 105 00:05:37,540 --> 00:05:40,070 and everything will reset. 106 00:05:40,070 --> 00:05:43,203 But here, we now keep our high score, right. 107 00:05:44,380 --> 00:05:48,690 So let's play again, and try to get a, 108 00:05:48,690 --> 00:05:50,600 a better score here. 109 00:05:50,600 --> 00:05:51,973 So that's too low, 110 00:05:56,900 --> 00:06:01,180 17, maybe, and, yeah, now we get an even better score, 111 00:06:01,180 --> 00:06:05,143 because of course, 18 is even greater than 17. 112 00:06:06,150 --> 00:06:10,460 One last time now with a lower score, 113 00:06:10,460 --> 00:06:14,960 just to see that it will then not become the new high score. 114 00:06:14,960 --> 00:06:17,760 So we always need to test for all the scenarios 115 00:06:17,760 --> 00:06:19,440 that we implemented in the code. 116 00:06:19,440 --> 00:06:21,863 Just to make sure that everything works. 117 00:06:23,170 --> 00:06:27,280 All 15 again, and so you see that the score was now 12. 118 00:06:27,280 --> 00:06:30,990 But the highest score, of course, remained at 18. 119 00:06:30,990 --> 00:06:34,923 Because this part here is now not true. Right? 120 00:06:36,400 --> 00:06:40,080 Okay, so we implemented that as well. 121 00:06:40,080 --> 00:06:43,990 And now our game is actually functional, it works just fine. 122 00:06:43,990 --> 00:06:46,550 And you can show this now to a friend 123 00:06:46,550 --> 00:06:49,690 and tell them that you built this on your own 124 00:06:49,690 --> 00:06:51,910 with the power of JavaScript. 125 00:06:51,910 --> 00:06:54,070 So how great is that? 126 00:06:54,070 --> 00:06:58,200 So again, congratulations for making it to this point, 127 00:06:58,200 --> 00:07:02,400 and for building really your first game using code. 128 00:07:02,400 --> 00:07:05,100 Now, it's not really a sophisticated game, 129 00:07:05,100 --> 00:07:08,510 but I still think it's a great achievement. 130 00:07:08,510 --> 00:07:09,820 Now in the next video, 131 00:07:09,820 --> 00:07:13,583 we will finish up and clean this code a little bit. 132 00:07:14,567 --> 00:07:19,567 For example, this code here that we have in this scenario, 133 00:07:19,690 --> 00:07:21,200 where the guess is too high, 134 00:07:21,200 --> 00:07:25,080 is almost the same as we have here. 135 00:07:25,080 --> 00:07:27,290 And so we can change that a little bit 136 00:07:27,290 --> 00:07:29,680 to eliminate some of this duplicate codes. 137 00:07:29,680 --> 00:07:33,130 There's also some other duplicate code 138 00:07:33,130 --> 00:07:35,090 that we can get rid of. 139 00:07:35,090 --> 00:07:39,000 And so yeah, let's do that in the next lecture, 140 00:07:39,000 --> 00:07:42,020 because it's also important to really finish up 141 00:07:42,020 --> 00:07:45,023 all applications and not just make them work.