Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,510 --> 00:00:03,950 Let's no continue a building our game 2 2 00:00:03,950 --> 00:00:07,333 and actually implement the game logic itself. 3 3 00:00:09,300 --> 00:00:12,750 And with game logic I basically mean implementing 4 4 00:00:12,750 --> 00:00:15,100 the way how the game works. 5 5 00:00:15,100 --> 00:00:17,110 So we need to implement what happens 6 6 00:00:17,110 --> 00:00:19,210 when the guess is correct. 7 7 00:00:19,210 --> 00:00:21,910 So when it's equal to the secret number, 8 8 00:00:21,910 --> 00:00:23,210 we also need to implement 9 9 00:00:23,210 --> 00:00:25,700 what happens when the guess is too low 10 10 00:00:25,700 --> 00:00:27,330 or when it's too high. 11 11 00:00:27,330 --> 00:00:30,710 So basically we have these three scenarios. 12 12 00:00:30,710 --> 00:00:34,530 And to start we actually need to define that secret number. 13 13 00:00:34,530 --> 00:00:37,650 Otherwise, there is nothing which we can compare 14 14 00:00:37,650 --> 00:00:39,974 the guess to, all right? 15 15 00:00:39,974 --> 00:00:44,560 Now, where do you think we should define that secret number? 16 16 00:00:44,560 --> 00:00:47,750 Should we do it inside of this button handler 17 17 00:00:47,750 --> 00:00:49,263 or should we do it outside? 18 18 00:00:50,270 --> 00:00:53,900 Well, the answer is that we should do it outside 19 19 00:00:53,900 --> 00:00:56,540 because we only want that secret number 20 20 00:00:56,540 --> 00:01:01,190 to be defined once, so only when we start the application. 21 21 00:01:01,190 --> 00:01:04,830 And so that's out here outside of the handler function. 22 22 00:01:04,830 --> 00:01:08,760 If we define the secret number inside this handler function 23 23 00:01:08,760 --> 00:01:12,580 then on each click, we would get a new secret number. 24 24 00:01:12,580 --> 00:01:16,770 And so then the game would make no sense at all, all right? 25 25 00:01:16,770 --> 00:01:19,860 We just need one number, which we can then compare 26 26 00:01:19,860 --> 00:01:23,033 to each of the guesses this year on each click. 27 27 00:01:24,860 --> 00:01:28,060 So let's define the number, 28 28 00:01:28,060 --> 00:01:30,380 so I'm just gonna call it number here. 29 29 00:01:30,380 --> 00:01:34,490 And now we need a random number between one and 20. 30 30 00:01:34,490 --> 00:01:37,260 And this is actually pretty similar to the dice roll 31 31 00:01:37,260 --> 00:01:40,223 that we did earlier in a fundamental section. 32 32 00:01:41,120 --> 00:01:44,733 So we use math.random, 33 33 00:01:45,770 --> 00:01:50,680 and so math is basically an object that JavaScript gives us, 34 34 00:01:50,680 --> 00:01:53,380 and on there, we have a lot of different methods, 35 35 00:01:53,380 --> 00:01:55,900 and random is one of them. 36 36 00:01:55,900 --> 00:01:59,683 And it gives us a number between zero and one. 37 37 00:02:00,670 --> 00:02:02,020 So let me show that to you. 38 38 00:02:02,860 --> 00:02:06,230 So whenever I run this, it will give me a new number. 39 39 00:02:06,230 --> 00:02:09,120 And it's always different from the one before. 40 40 00:02:09,120 --> 00:02:12,670 Now if I want a number between one and 20, 41 41 00:02:12,670 --> 00:02:15,830 I will start by multiplying this by 20. 42 42 00:02:15,830 --> 00:02:18,560 And so now we have this decimal number here, 43 43 00:02:18,560 --> 00:02:22,720 basically ranging between zero and 20. 44 44 00:02:22,720 --> 00:02:25,970 But all this decimal here is just noise, 45 45 00:02:25,970 --> 00:02:27,800 so let's removed that. 46 46 00:02:27,800 --> 00:02:31,363 And for that, we use math.trunk. 47 47 00:02:32,220 --> 00:02:34,560 And I'm doing all of this here in the console. 48 48 00:02:34,560 --> 00:02:38,920 So you can see how this is building up, okay? 49 49 00:02:38,920 --> 00:02:43,370 And so now I have a number which goes from zero to 19. 50 50 00:02:43,370 --> 00:02:46,980 Because the result of this here will never really include 51 51 00:02:46,980 --> 00:02:48,560 the number 20. 52 52 00:02:48,560 --> 00:02:52,520 It might only include like 19.999999, 53 53 00:02:52,520 --> 00:02:55,730 but now we're cutting off that decimal part. 54 54 00:02:55,730 --> 00:03:00,140 And so we are now left with a number between zero and 19. 55 55 00:03:00,140 --> 00:03:03,210 And so to elevate it to between one and 20, 56 56 00:03:03,210 --> 00:03:06,440 all you have to do is to add one here. 57 57 00:03:06,440 --> 00:03:08,240 And with this, we make sure that the number 58 58 00:03:08,240 --> 00:03:11,450 is always between these two boundaries. 59 59 00:03:11,450 --> 00:03:13,690 So let's grabbed is now, 60 60 00:03:13,690 --> 00:03:16,510 so now that it works and put it here 61 61 00:03:17,810 --> 00:03:21,220 and with is we have our secret number. 62 62 00:03:21,220 --> 00:03:23,010 Now in the real game 63 63 00:03:23,010 --> 00:03:25,490 the number will obviously be hidden. 64 64 00:03:25,490 --> 00:03:28,190 So behind this question mark, 65 65 00:03:28,190 --> 00:03:30,650 but now since we are still in development, 66 66 00:03:30,650 --> 00:03:32,600 let's actually display the number here 67 67 00:03:32,600 --> 00:03:36,803 so that we can then test our game logic as we develop it. 68 68 00:03:37,720 --> 00:03:39,690 So let's select that number 69 69 00:03:39,690 --> 00:03:42,680 and I think again we already did it before, 70 70 00:03:42,680 --> 00:03:44,653 but let's do it here anyway again. 71 71 00:03:46,767 --> 00:03:49,684 Adjust, so the class name is number 72 72 00:03:52,050 --> 00:03:55,470 and then remember we use text content 73 73 00:03:55,470 --> 00:03:58,930 and to set it, we simply use the equal sign. 74 74 00:03:58,930 --> 00:04:00,573 And now what do we put here? 75 75 00:04:01,750 --> 00:04:05,730 Well, just the number that we just calculated. 76 76 00:04:05,730 --> 00:04:09,390 And now as I save it, watch what happens, 77 77 00:04:09,390 --> 00:04:12,100 here we now have our random number. 78 78 00:04:12,100 --> 00:04:13,620 And as I reload the page 79 79 00:04:13,620 --> 00:04:16,410 you will see different random numbers appearing. 80 80 00:04:16,410 --> 00:04:20,730 And again, for you of course, it will be different numbers. 81 81 00:04:20,730 --> 00:04:23,470 And you see here 20, which is actually the maximum. 82 82 00:04:23,470 --> 00:04:26,600 So this means that 20 is indeed included 83 83 00:04:26,600 --> 00:04:28,763 in our range here. 84 84 00:04:30,520 --> 00:04:33,370 Just to check if it's all right, 85 85 00:04:33,370 --> 00:04:35,730 so if we don't see any weird numbers 86 86 00:04:35,730 --> 00:04:38,090 but it all looks okay to me. 87 87 00:04:38,090 --> 00:04:41,340 And so let's now move on and actually compare 88 88 00:04:41,340 --> 00:04:44,313 the secret number to the users guess. 89 89 00:04:45,980 --> 00:04:48,270 So here we already have the condition, 90 90 00:04:48,270 --> 00:04:50,700 if there is no guess then just print 91 91 00:04:50,700 --> 00:04:53,660 to the message element that there is no number. 92 92 00:04:53,660 --> 00:04:55,590 So that's again, check that, 93 93 00:04:55,590 --> 00:04:57,650 and indeed it works. 94 94 00:04:57,650 --> 00:05:00,650 But now what if there actually is a guess? 95 95 00:05:00,650 --> 00:05:02,493 So let's say Else-if, 96 96 00:05:03,360 --> 00:05:08,360 and now we will actually check if the guess is the same 97 97 00:05:08,690 --> 00:05:11,690 as the secret number. 98 98 00:05:11,690 --> 00:05:13,820 And since I'm always saying secret number, 99 99 00:05:13,820 --> 00:05:16,473 let's actually change the variable name. 100 100 00:05:17,320 --> 00:05:19,470 So double click to select it, 101 101 00:05:19,470 --> 00:05:22,890 and then I can double click on all of the instances 102 102 00:05:22,890 --> 00:05:25,760 so that's this one and this one, 103 103 00:05:25,760 --> 00:05:28,230 so that's a nice vs code trick. 104 104 00:05:28,230 --> 00:05:31,180 And so now I have these three cursors. 105 105 00:05:31,180 --> 00:05:35,107 So let's delete all of that secret number. 106 106 00:05:37,880 --> 00:05:39,600 So the code works the same now 107 107 00:05:39,600 --> 00:05:42,593 but the variable name makes a little bit more sense. 108 108 00:05:43,740 --> 00:05:45,710 So let's create a code block here 109 109 00:05:45,710 --> 00:05:47,660 and now we need to specify what happens 110 110 00:05:47,660 --> 00:05:50,410 when the guess is correct. 111 111 00:05:50,410 --> 00:05:54,620 So again, when the guess is the same as the secret number 112 112 00:05:54,620 --> 00:05:59,053 that's essentially what the guess being means, all right? 113 113 00:06:00,060 --> 00:06:01,320 So what should happen 114 114 00:06:01,320 --> 00:06:05,453 then is that the correct number message should be displayed? 115 115 00:06:06,380 --> 00:06:09,890 So let's copy that and put that here 116 116 00:06:13,530 --> 00:06:15,723 and for now that's actually it. 117 117 00:06:16,890 --> 00:06:18,490 So I'll just give it a safe now, 118 118 00:06:20,180 --> 00:06:22,053 and so let's actually test this. 119 119 00:06:23,230 --> 00:06:26,850 So five, which of course is different, 120 120 00:06:26,850 --> 00:06:30,490 and then in the future we will want a message here saying 121 121 00:06:30,490 --> 00:06:32,620 that the number is too high. 122 122 00:06:32,620 --> 00:06:34,460 So we're gonna do that in a second. 123 123 00:06:34,460 --> 00:06:38,390 But now let's just put the correct number here and indeed 124 124 00:06:38,390 --> 00:06:40,710 we now get correct number. 125 125 00:06:40,710 --> 00:06:43,850 So that's exactly what we defined here 126 126 00:06:43,850 --> 00:06:48,020 in this Else-if block, all right? 127 127 00:06:48,020 --> 00:06:50,530 So I hope all of that makes sense. 128 128 00:06:50,530 --> 00:06:53,560 And now let's work on that scenario that I just mentioned 129 129 00:06:53,560 --> 00:06:56,353 which is when the guess is greater than the number. 130 130 00:06:57,950 --> 00:07:00,160 So you see that here in this big, 131 131 00:07:00,160 --> 00:07:02,570 if else if her statement, 132 132 00:07:02,570 --> 00:07:05,060 we are covering all the different scenarios 133 133 00:07:05,060 --> 00:07:08,570 that might happen here to this number. 134 134 00:07:08,570 --> 00:07:10,640 So the first one was the that there is no number 135 135 00:07:10,640 --> 00:07:12,310 at all, right? 136 136 00:07:12,310 --> 00:07:15,250 Then we checked if it's equal to the secret number, 137 137 00:07:15,250 --> 00:07:17,480 and now we will check if it's greater. 138 138 00:07:17,480 --> 00:07:21,883 So if the guess is greater than the secret number. 139 139 00:07:22,900 --> 00:07:24,283 And then what would happen? 140 140 00:07:25,270 --> 00:07:29,983 Well, let's again select the message .textcontent 141 141 00:07:36,830 --> 00:07:40,340 and then let's say too high. 142 142 00:07:40,340 --> 00:07:42,360 So the guess is too high now 143 143 00:07:42,360 --> 00:07:44,680 and again adding an emoji here. 144 144 00:07:44,680 --> 00:07:46,703 So I want this graph here, okay? 145 145 00:07:53,710 --> 00:07:58,450 And now also, since we are working on this let's account 146 146 00:07:58,450 --> 00:08:02,540 for the last situation or the last scenario as well 147 147 00:08:02,540 --> 00:08:05,723 which is that the guess is lower than a secret number. 148 148 00:08:08,147 --> 00:08:11,200 So guess below secret number, 149 149 00:08:11,200 --> 00:08:14,590 and with this, we covered all the scenarios. 150 150 00:08:14,590 --> 00:08:17,143 Let's just copy this one now, too low, 151 151 00:08:24,940 --> 00:08:28,343 and now we're using the editor graph here, 152 152 00:08:29,550 --> 00:08:31,723 give it a safe and let's test it. 153 153 00:08:32,780 --> 00:08:35,223 So right now we know that it's at three, 154 154 00:08:37,620 --> 00:08:39,200 so let's try at 12. 155 155 00:08:39,200 --> 00:08:44,200 And so now we should see two high, and yes it works. 156 156 00:08:45,270 --> 00:08:49,930 Now let's test one, which is too low and it works again. 157 157 00:08:49,930 --> 00:08:54,300 And now let's test three, which is correct. 158 158 00:08:54,300 --> 00:08:57,170 And indeed it's correct. 159 159 00:08:57,170 --> 00:08:58,850 So that's working already. 160 160 00:08:58,850 --> 00:09:01,090 Now let's move on to the next step 161 161 00:09:01,090 --> 00:09:03,380 which is to work with a score here. 162 162 00:09:03,380 --> 00:09:05,800 So remember that each time that we guess 163 163 00:09:05,800 --> 00:09:09,520 a wrong number our score showed to decrease. 164 164 00:09:09,520 --> 00:09:11,543 So let me show that to you again. 165 165 00:09:13,160 --> 00:09:16,450 So let's say five and see how it starts at 20, 166 166 00:09:16,450 --> 00:09:19,770 just like in our code, but now as I check wrong 167 167 00:09:20,720 --> 00:09:23,883 so it's too high and now the score decreased to 19. 168 168 00:09:24,800 --> 00:09:26,910 So let me check another one. 169 169 00:09:26,910 --> 00:09:29,880 And so now you see that my number goes down each time 170 170 00:09:29,880 --> 00:09:32,470 that I do a wrong guess. 171 171 00:09:32,470 --> 00:09:35,663 And so let's implement that in our code here as well. 172 172 00:09:37,030 --> 00:09:41,360 So as you see here, we start with a score of 20. 173 173 00:09:41,360 --> 00:09:46,270 And now in these two scenarios where the guess is wrong, 174 174 00:09:46,270 --> 00:09:49,470 so here where it's above and here where it's below. 175 175 00:09:49,470 --> 00:09:53,430 We want to decrease that score by a one, all right? 176 176 00:09:53,430 --> 00:09:56,430 Because again, each time that there is a wrong guess 177 177 00:09:56,430 --> 00:09:58,950 the score should decrease by one. 178 178 00:09:58,950 --> 00:10:01,210 So how should we do that? 179 179 00:10:01,210 --> 00:10:04,580 And I can think of two ways of doing that. 180 180 00:10:04,580 --> 00:10:08,190 The first way is to read the score from here, 181 181 00:10:08,190 --> 00:10:11,830 then decrease it by one and then print it here again. 182 182 00:10:11,830 --> 00:10:14,280 So that would be the first way of doing it, 183 183 00:10:14,280 --> 00:10:16,030 but there is a better way. 184 184 00:10:16,030 --> 00:10:18,870 And the better way is to actually create a variable 185 185 00:10:18,870 --> 00:10:22,930 for the score in the code and then update that variable 186 186 00:10:22,930 --> 00:10:25,460 so basically to decrease that variable 187 187 00:10:25,460 --> 00:10:27,140 and then display the value 188 188 00:10:27,140 --> 00:10:31,000 of that variable here in this score label. 189 189 00:10:31,000 --> 00:10:34,400 And by doing that, we have our data also in the code 190 190 00:10:34,400 --> 00:10:36,700 and not just on the DOM. 191 191 00:10:36,700 --> 00:10:39,163 And so that's always a very good thing to do. 192 192 00:10:40,420 --> 00:10:42,430 So let me do that now and then I will explain 193 193 00:10:42,430 --> 00:10:43,580 it a little bit better. 194 194 00:10:45,360 --> 00:10:49,220 So I'm gonna do that right here after the secret number, 195 195 00:10:49,220 --> 00:10:54,220 so const score, and as you already know we start with 20. 196 196 00:10:56,750 --> 00:10:58,830 And so that's our initial score. 197 197 00:10:58,830 --> 00:11:01,920 So the value that we set to this variable. 198 198 00:11:01,920 --> 00:11:03,620 And actually this should be a let, 199 199 00:11:04,510 --> 00:11:07,810 because we will then decrease that value, remember. 200 200 00:11:07,810 --> 00:11:10,060 And so it cannot be a const 201 201 00:11:10,060 --> 00:11:12,510 because a constant is immutable. 202 202 00:11:12,510 --> 00:11:13,650 Now, okay? 203 203 00:11:13,650 --> 00:11:15,580 And now here let's go back 204 204 00:11:15,580 --> 00:11:18,010 to the wrong guess scenario. 205 205 00:11:18,010 --> 00:11:21,350 Our scenario was, because it's this one and this one 206 206 00:11:21,350 --> 00:11:24,223 and then all we do is to decrease the score. 207 207 00:11:25,170 --> 00:11:30,170 So score equal score minus one. 208 208 00:11:30,900 --> 00:11:34,510 And maybe you already know, or hopefully you do, 209 209 00:11:34,510 --> 00:11:36,400 that this is the same as writing, 210 210 00:11:36,400 --> 00:11:40,970 score minus minus, all right? 211 211 00:11:40,970 --> 00:11:42,890 So we decreased the score 212 212 00:11:42,890 --> 00:11:45,170 and then all we have to do is to display 213 213 00:11:45,170 --> 00:11:47,863 that score here in this element. 214 214 00:11:48,751 --> 00:11:51,570 So once again, we already did that. 215 215 00:11:51,570 --> 00:11:53,423 So no need to repeat. 216 216 00:11:54,590 --> 00:11:56,103 So it's this one here. 217 217 00:12:00,070 --> 00:12:03,430 So we select the element with the class of score 218 218 00:12:03,430 --> 00:12:08,430 and then at the text content we give the score, all right? 219 219 00:12:09,890 --> 00:12:11,150 And that's it. 220 220 00:12:11,150 --> 00:12:13,280 Now we just need the same code 221 221 00:12:13,280 --> 00:12:16,180 also in the other wrong scenario. 222 222 00:12:16,180 --> 00:12:18,890 So where the guess is below the secret number. 223 223 00:12:18,890 --> 00:12:22,973 So I'm just copying this code and putting it here, 224 224 00:12:24,210 --> 00:12:27,400 give it a safe and a before testing it 225 225 00:12:27,400 --> 00:12:30,410 let me again, explain what we just did here. 226 226 00:12:30,410 --> 00:12:32,980 So as I said, we could have also stored 227 227 00:12:32,980 --> 00:12:35,760 this score basically in the DOM. 228 228 00:12:35,760 --> 00:12:38,150 And to do that we would always just read 229 229 00:12:38,150 --> 00:12:39,740 this value from here. 230 230 00:12:39,740 --> 00:12:43,760 So right from the DOM , then we could decrease that value 231 231 00:12:43,760 --> 00:12:46,330 and then write it back here to the DOM 232 232 00:12:46,330 --> 00:12:49,880 but then we would not have that value in our code. 233 233 00:12:49,880 --> 00:12:52,540 So essentially our application would have no way 234 234 00:12:52,540 --> 00:12:55,400 of knowing that score at all points. 235 235 00:12:55,400 --> 00:12:59,260 And so it's always good to keep a variable 236 236 00:12:59,260 --> 00:13:02,370 which actually holds the data in our code 237 237 00:13:02,370 --> 00:13:06,620 and not just rely on the DOM to hold our data, all right? 238 238 00:13:06,620 --> 00:13:10,680 And this variable here can also be called a state variable. 239 239 00:13:10,680 --> 00:13:12,930 Because this score is part 240 240 00:13:12,930 --> 00:13:15,770 of the so-called application state 241 241 00:13:15,770 --> 00:13:18,940 which is basically all the data that is relevant 242 242 00:13:18,940 --> 00:13:20,450 to the application. 243 243 00:13:20,450 --> 00:13:22,170 And we could say that 17, 244 244 00:13:22,170 --> 00:13:24,870 so the secret number is also part 245 245 00:13:24,870 --> 00:13:28,850 of the state of our application, all right? 246 246 00:13:28,850 --> 00:13:32,300 And so we want all the data always to be available 247 247 00:13:32,300 --> 00:13:36,727 somewhere in our code and not just in the DOM , okay? 248 248 00:13:36,727 --> 00:13:38,980 But always keep that in mind, 249 249 00:13:38,980 --> 00:13:42,700 and so that is why we implemented a solution like this. 250 250 00:13:42,700 --> 00:13:44,530 So whenever there's a wrong guess, 251 251 00:13:44,530 --> 00:13:47,960 we just take the score that we already have in our code, 252 252 00:13:47,960 --> 00:13:49,810 then we decrease it by one 253 253 00:13:49,810 --> 00:13:52,943 and then we display that new score right here. 254 254 00:13:54,780 --> 00:13:59,400 So let's reload, let's say 17. 255 255 00:13:59,400 --> 00:14:01,573 And watch what happens to our score now. 256 256 00:14:03,470 --> 00:14:08,010 And indeed it decreased to 19 and our number is too high. 257 257 00:14:08,010 --> 00:14:09,930 And when I click again now, 258 258 00:14:09,930 --> 00:14:11,823 you see it decreasing even more. 259 259 00:14:12,770 --> 00:14:15,343 Now let's try with a lower number. 260 260 00:14:16,360 --> 00:14:20,180 So too low and our score decreased again. 261 261 00:14:20,180 --> 00:14:22,370 And actually let's keep going, 262 262 00:14:22,370 --> 00:14:26,880 so let's keep clicking here and watch what happens. 263 263 00:14:26,880 --> 00:14:30,260 So I'm clicking over and over on the same button here 264 264 00:14:30,260 --> 00:14:35,260 and the score keeps going down and eventually we reach zero. 265 265 00:14:35,763 --> 00:14:37,190 And at this point 266 266 00:14:37,190 --> 00:14:40,370 we should basically lose the game, all right? 267 267 00:14:40,370 --> 00:14:43,060 But as you see here, nothing of course happens. 268 268 00:14:43,060 --> 00:14:46,480 And we can keep clicking here and go until affinity 269 269 00:14:46,480 --> 00:14:49,060 and our program we'll of course not care. 270 270 00:14:49,060 --> 00:14:52,740 Because our program obviously has no idea of losing 271 271 00:14:52,740 --> 00:14:55,237 or of winning the game, all right? 272 272 00:14:55,237 --> 00:14:59,600 It is completely on us to write all that logic. 273 273 00:14:59,600 --> 00:15:01,560 So basically what this means 274 274 00:15:01,560 --> 00:15:03,830 is that all of this checking here, 275 275 00:15:03,830 --> 00:15:07,560 so doing all this here should only happen whenever the score 276 276 00:15:07,560 --> 00:15:09,580 is still above zero. 277 277 00:15:09,580 --> 00:15:12,250 And then when the score is actually zero, 278 278 00:15:12,250 --> 00:15:15,351 then we should get some kind of message here saying 279 279 00:15:15,351 --> 00:15:17,830 that we lost the game. 280 280 00:15:17,830 --> 00:15:21,543 So let's quickly do that here, inside of this scenario. 281 281 00:15:23,200 --> 00:15:26,860 So basically we need another if statement here inside 282 282 00:15:26,860 --> 00:15:30,190 this already Else-if block. 283 283 00:15:30,190 --> 00:15:32,260 And that's of course not a problem at all. 284 284 00:15:32,260 --> 00:15:36,230 We can perfectly have one if inside of the other. 285 285 00:15:36,230 --> 00:15:39,840 So what I was just saying is that this here, 286 286 00:15:39,840 --> 00:15:42,940 all of this should basically only happen 287 287 00:15:42,940 --> 00:15:46,110 while the score is still above zero. 288 288 00:15:46,110 --> 00:15:48,140 So let's do that. 289 289 00:15:48,140 --> 00:15:51,810 So if score is above zero 290 290 00:15:54,320 --> 00:15:58,030 only then do all of this, all right. 291 291 00:16:00,870 --> 00:16:05,870 And now Else, so basically if it is zero, 292 292 00:16:06,930 --> 00:16:09,383 then we want to display another message. 293 293 00:16:11,560 --> 00:16:16,560 So we want to say you lost the game with some losing emoji. 294 294 00:16:24,870 --> 00:16:26,990 So I'm gonna use this one here, 295 295 00:16:26,990 --> 00:16:28,813 so that's an explosion I believe. 296 296 00:16:33,130 --> 00:16:35,490 So let's test that now. 297 297 00:16:35,490 --> 00:16:39,280 And we only implement this for when the guess 298 298 00:16:39,280 --> 00:16:41,283 is above the secret number. 299 299 00:16:42,250 --> 00:16:45,670 So let's now use 12, it's too high 300 300 00:16:45,670 --> 00:16:48,473 and now let's keep going to test what happens. 301 301 00:16:49,860 --> 00:16:51,580 So we are approaching it now 302 302 00:16:53,230 --> 00:16:54,960 and now we lost the game. 303 303 00:16:54,960 --> 00:16:57,120 But actually I could click twice 304 304 00:16:57,120 --> 00:16:59,660 as my score was already zero. 305 305 00:16:59,660 --> 00:17:03,070 So try this for yourself, I will just reload here, 306 306 00:17:03,070 --> 00:17:05,873 and again put a number that is above. 307 307 00:17:12,847 --> 00:17:14,850 So now the score is one and as I click, 308 308 00:17:14,850 --> 00:17:17,770 we should get a message you lost the game. 309 309 00:17:17,770 --> 00:17:21,410 So let's try and it didn't happen yet. 310 310 00:17:21,410 --> 00:17:23,840 And it did not happen because the score 311 311 00:17:23,840 --> 00:17:27,970 was indeed still a greater than zero here, all right? 312 312 00:17:27,970 --> 00:17:32,163 So we need to change that to greater than one, okay? 313 313 00:17:38,040 --> 00:17:39,953 So again, a larger number. 314 314 00:17:43,680 --> 00:17:48,680 Now I get one and if I click now you lost the game. 315 315 00:17:49,310 --> 00:17:52,993 And all we need to do is to update the score to zero here. 316 316 00:17:55,310 --> 00:18:00,310 So let's just copy this, write zero, 317 317 00:18:01,730 --> 00:18:04,670 and then before we test it we can actually copy 318 318 00:18:04,670 --> 00:18:08,310 the same code to this other scenario. 319 319 00:18:08,310 --> 00:18:11,850 Now, as you can see, we are creating a lot of duplicate code 320 320 00:18:11,850 --> 00:18:14,583 and we will fix that by the end of this project. 321 321 00:18:15,420 --> 00:18:18,003 But for now, let's just keep working on this. 322 322 00:18:20,400 --> 00:18:23,793 And the only thing that really changes here is this message. 323 323 00:18:26,860 --> 00:18:29,600 So you'll see that here is some potential 324 324 00:18:29,600 --> 00:18:31,493 to eliminate duplicate code. 325 325 00:18:32,600 --> 00:18:35,180 But again we will take care of later off that, 326 326 00:18:35,180 --> 00:18:39,410 for now let's just make it work, okay? 327 327 00:18:39,410 --> 00:18:41,740 And with this I think we're actually finished. 328 328 00:18:41,740 --> 00:18:43,113 Let's just test it. 329 329 00:18:44,560 --> 00:18:47,513 So five is too low, 330 330 00:18:49,260 --> 00:18:54,260 so let's keep going down and you lost a game, great. 331 331 00:18:55,740 --> 00:18:59,750 Now let's test a larger number 332 332 00:18:59,750 --> 00:19:04,750 and I keep clicking here and now we lost the game too. 333 333 00:19:06,940 --> 00:19:10,640 Great, so our game logic is already working 334 334 00:19:10,640 --> 00:19:12,250 and actually the game itself 335 335 00:19:12,250 --> 00:19:14,760 is also kind of working already. 336 336 00:19:14,760 --> 00:19:17,330 There's just two things that are missing here 337 337 00:19:17,330 --> 00:19:21,530 which is the high score and this play again button. 338 338 00:19:21,530 --> 00:19:24,060 But before implementing that functionality, 339 339 00:19:24,060 --> 00:19:25,640 in the next video we're gonna talk 340 340 00:19:25,640 --> 00:19:27,980 a little bit about CSS 341 341 00:19:27,980 --> 00:19:31,313 and how we can manipulate styles using JavaScript. 29977