All language subtitles for 074 Implementing the Game Logic.en_US1

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian Download
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,510 --> 00:00:03,950 Let's no continue a building our game 2 00:00:03,950 --> 00:00:07,333 and actually implement the game logic itself. 3 00:00:09,300 --> 00:00:12,750 And with game logic I basically mean implementing 4 00:00:12,750 --> 00:00:15,100 the way how the game works. 5 00:00:15,100 --> 00:00:17,110 So we need to implement what happens 6 00:00:17,110 --> 00:00:19,210 when the guess is correct. 7 00:00:19,210 --> 00:00:21,910 So when it's equal to the secret number, 8 00:00:21,910 --> 00:00:23,210 we also need to implement 9 00:00:23,210 --> 00:00:25,700 what happens when the guess is too low 10 00:00:25,700 --> 00:00:27,330 or when it's too high. 11 00:00:27,330 --> 00:00:30,710 So basically we have these three scenarios. 12 00:00:30,710 --> 00:00:34,530 And to start we actually need to define that secret number. 13 00:00:34,530 --> 00:00:37,650 Otherwise, there is nothing which we can compare 14 00:00:37,650 --> 00:00:39,974 the guess to, all right? 15 00:00:39,974 --> 00:00:44,560 Now, where do you think we should define that secret number? 16 00:00:44,560 --> 00:00:47,750 Should we do it inside of this button handler 17 00:00:47,750 --> 00:00:49,263 or should we do it outside? 18 00:00:50,270 --> 00:00:53,900 Well, the answer is that we should do it outside 19 00:00:53,900 --> 00:00:56,540 because we only want that secret number 20 00:00:56,540 --> 00:01:01,190 to be defined once, so only when we start the application. 21 00:01:01,190 --> 00:01:04,830 And so that's out here outside of the handler function. 22 00:01:04,830 --> 00:01:08,760 If we define the secret number inside this handler function 23 00:01:08,760 --> 00:01:12,580 then on each click, we would get a new secret number. 24 00:01:12,580 --> 00:01:16,770 And so then the game would make no sense at all, all right? 25 00:01:16,770 --> 00:01:19,860 We just need one number, which we can then compare 26 00:01:19,860 --> 00:01:23,033 to each of the guesses this year on each click. 27 00:01:24,860 --> 00:01:28,060 So let's define the number, 28 00:01:28,060 --> 00:01:30,380 so I'm just gonna call it number here. 29 00:01:30,380 --> 00:01:34,490 And now we need a random number between one and 20. 30 00:01:34,490 --> 00:01:37,260 And this is actually pretty similar to the dice roll 31 00:01:37,260 --> 00:01:40,223 that we did earlier in a fundamental section. 32 00:01:41,120 --> 00:01:44,733 So we use math.random, 33 00:01:45,770 --> 00:01:50,680 and so math is basically an object that JavaScript gives us, 34 00:01:50,680 --> 00:01:53,380 and on there, we have a lot of different methods, 35 00:01:53,380 --> 00:01:55,900 and random is one of them. 36 00:01:55,900 --> 00:01:59,683 And it gives us a number between zero and one. 37 00:02:00,670 --> 00:02:02,020 So let me show that to you. 38 00:02:02,860 --> 00:02:06,230 So whenever I run this, it will give me a new number. 39 00:02:06,230 --> 00:02:09,120 And it's always different from the one before. 40 00:02:09,120 --> 00:02:12,670 Now if I want a number between one and 20, 41 00:02:12,670 --> 00:02:15,830 I will start by multiplying this by 20. 42 00:02:15,830 --> 00:02:18,560 And so now we have this decimal number here, 43 00:02:18,560 --> 00:02:22,720 basically ranging between zero and 20. 44 00:02:22,720 --> 00:02:25,970 But all this decimal here is just noise, 45 00:02:25,970 --> 00:02:27,800 so let's removed that. 46 00:02:27,800 --> 00:02:31,363 And for that, we use math.trunk. 47 00:02:32,220 --> 00:02:34,560 And I'm doing all of this here in the console. 48 00:02:34,560 --> 00:02:38,920 So you can see how this is building up, okay? 49 00:02:38,920 --> 00:02:43,370 And so now I have a number which goes from zero to 19. 50 00:02:43,370 --> 00:02:46,980 Because the result of this here will never really include 51 00:02:46,980 --> 00:02:48,560 the number 20. 52 00:02:48,560 --> 00:02:52,520 It might only include like 19.999999, 53 00:02:52,520 --> 00:02:55,730 but now we're cutting off that decimal part. 54 00:02:55,730 --> 00:03:00,140 And so we are now left with a number between zero and 19. 55 00:03:00,140 --> 00:03:03,210 And so to elevate it to between one and 20, 56 00:03:03,210 --> 00:03:06,440 all you have to do is to add one here. 57 00:03:06,440 --> 00:03:08,240 And with this, we make sure that the number 58 00:03:08,240 --> 00:03:11,450 is always between these two boundaries. 59 00:03:11,450 --> 00:03:13,690 So let's grabbed is now, 60 00:03:13,690 --> 00:03:16,510 so now that it works and put it here 61 00:03:17,810 --> 00:03:21,220 and with is we have our secret number. 62 00:03:21,220 --> 00:03:23,010 Now in the real game 63 00:03:23,010 --> 00:03:25,490 the number will obviously be hidden. 64 00:03:25,490 --> 00:03:28,190 So behind this question mark, 65 00:03:28,190 --> 00:03:30,650 but now since we are still in development, 66 00:03:30,650 --> 00:03:32,600 let's actually display the number here 67 00:03:32,600 --> 00:03:36,803 so that we can then test our game logic as we develop it. 68 00:03:37,720 --> 00:03:39,690 So let's select that number 69 00:03:39,690 --> 00:03:42,680 and I think again we already did it before, 70 00:03:42,680 --> 00:03:44,653 but let's do it here anyway again. 71 00:03:46,767 --> 00:03:49,684 Adjust, so the class name is number 72 00:03:52,050 --> 00:03:55,470 and then remember we use text content 73 00:03:55,470 --> 00:03:58,930 and to set it, we simply use the equal sign. 74 00:03:58,930 --> 00:04:00,573 And now what do we put here? 75 00:04:01,750 --> 00:04:05,730 Well, just the number that we just calculated. 76 00:04:05,730 --> 00:04:09,390 And now as I save it, watch what happens, 77 00:04:09,390 --> 00:04:12,100 here we now have our random number. 78 00:04:12,100 --> 00:04:13,620 And as I reload the page 79 00:04:13,620 --> 00:04:16,410 you will see different random numbers appearing. 80 00:04:16,410 --> 00:04:20,730 And again, for you of course, it will be different numbers. 81 00:04:20,730 --> 00:04:23,470 And you see here 20, which is actually the maximum. 82 00:04:23,470 --> 00:04:26,600 So this means that 20 is indeed included 83 00:04:26,600 --> 00:04:28,763 in our range here. 84 00:04:30,520 --> 00:04:33,370 Just to check if it's all right, 85 00:04:33,370 --> 00:04:35,730 so if we don't see any weird numbers 86 00:04:35,730 --> 00:04:38,090 but it all looks okay to me. 87 00:04:38,090 --> 00:04:41,340 And so let's now move on and actually compare 88 00:04:41,340 --> 00:04:44,313 the secret number to the users guess. 89 00:04:45,980 --> 00:04:48,270 So here we already have the condition, 90 00:04:48,270 --> 00:04:50,700 if there is no guess then just print 91 00:04:50,700 --> 00:04:53,660 to the message element that there is no number. 92 00:04:53,660 --> 00:04:55,590 So that's again, check that, 93 00:04:55,590 --> 00:04:57,650 and indeed it works. 94 00:04:57,650 --> 00:05:00,650 But now what if there actually is a guess? 95 00:05:00,650 --> 00:05:02,493 So let's say Else-if, 96 00:05:03,360 --> 00:05:08,360 and now we will actually check if the guess is the same 97 00:05:08,690 --> 00:05:11,690 as the secret number. 98 00:05:11,690 --> 00:05:13,820 And since I'm always saying secret number, 99 00:05:13,820 --> 00:05:16,473 let's actually change the variable name. 100 00:05:17,320 --> 00:05:19,470 So double click to select it, 101 00:05:19,470 --> 00:05:22,890 and then I can double click on all of the instances 102 00:05:22,890 --> 00:05:25,760 so that's this one and this one, 103 00:05:25,760 --> 00:05:28,230 so that's a nice vs code trick. 104 00:05:28,230 --> 00:05:31,180 And so now I have these three cursors. 105 00:05:31,180 --> 00:05:35,107 So let's delete all of that secret number. 106 00:05:37,880 --> 00:05:39,600 So the code works the same now 107 00:05:39,600 --> 00:05:42,593 but the variable name makes a little bit more sense. 108 00:05:43,740 --> 00:05:45,710 So let's create a code block here 109 00:05:45,710 --> 00:05:47,660 and now we need to specify what happens 110 00:05:47,660 --> 00:05:50,410 when the guess is correct. 111 00:05:50,410 --> 00:05:54,620 So again, when the guess is the same as the secret number 112 00:05:54,620 --> 00:05:59,053 that's essentially what the guess being means, all right? 113 00:06:00,060 --> 00:06:01,320 So what should happen 114 00:06:01,320 --> 00:06:05,453 then is that the correct number message should be displayed? 115 00:06:06,380 --> 00:06:09,890 So let's copy that and put that here 116 00:06:13,530 --> 00:06:15,723 and for now that's actually it. 117 00:06:16,890 --> 00:06:18,490 So I'll just give it a safe now, 118 00:06:20,180 --> 00:06:22,053 and so let's actually test this. 119 00:06:23,230 --> 00:06:26,850 So five, which of course is different, 120 00:06:26,850 --> 00:06:30,490 and then in the future we will want a message here saying 121 00:06:30,490 --> 00:06:32,620 that the number is too high. 122 00:06:32,620 --> 00:06:34,460 So we're gonna do that in a second. 123 00:06:34,460 --> 00:06:38,390 But now let's just put the correct number here and indeed 124 00:06:38,390 --> 00:06:40,710 we now get correct number. 125 00:06:40,710 --> 00:06:43,850 So that's exactly what we defined here 126 00:06:43,850 --> 00:06:48,020 in this Else-if block, all right? 127 00:06:48,020 --> 00:06:50,530 So I hope all of that makes sense. 128 00:06:50,530 --> 00:06:53,560 And now let's work on that scenario that I just mentioned 129 00:06:53,560 --> 00:06:56,353 which is when the guess is greater than the number. 130 00:06:57,950 --> 00:07:00,160 So you see that here in this big, 131 00:07:00,160 --> 00:07:02,570 if else if her statement, 132 00:07:02,570 --> 00:07:05,060 we are covering all the different scenarios 133 00:07:05,060 --> 00:07:08,570 that might happen here to this number. 134 00:07:08,570 --> 00:07:10,640 So the first one was the that there is no number 135 00:07:10,640 --> 00:07:12,310 at all, right? 136 00:07:12,310 --> 00:07:15,250 Then we checked if it's equal to the secret number, 137 00:07:15,250 --> 00:07:17,480 and now we will check if it's greater. 138 00:07:17,480 --> 00:07:21,883 So if the guess is greater than the secret number. 139 00:07:22,900 --> 00:07:24,283 And then what would happen? 140 00:07:25,270 --> 00:07:29,983 Well, let's again select the message .textcontent 141 00:07:36,830 --> 00:07:40,340 and then let's say too high. 142 00:07:40,340 --> 00:07:42,360 So the guess is too high now 143 00:07:42,360 --> 00:07:44,680 and again adding an emoji here. 144 00:07:44,680 --> 00:07:46,703 So I want this graph here, okay? 145 00:07:53,710 --> 00:07:58,450 And now also, since we are working on this let's account 146 00:07:58,450 --> 00:08:02,540 for the last situation or the last scenario as well 147 00:08:02,540 --> 00:08:05,723 which is that the guess is lower than a secret number. 148 00:08:08,147 --> 00:08:11,200 So guess below secret number, 149 00:08:11,200 --> 00:08:14,590 and with this, we covered all the scenarios. 150 00:08:14,590 --> 00:08:17,143 Let's just copy this one now, too low, 151 00:08:24,940 --> 00:08:28,343 and now we're using the editor graph here, 152 00:08:29,550 --> 00:08:31,723 give it a safe and let's test it. 153 00:08:32,780 --> 00:08:35,223 So right now we know that it's at three, 154 00:08:37,620 --> 00:08:39,200 so let's try at 12. 155 00:08:39,200 --> 00:08:44,200 And so now we should see two high, and yes it works. 156 00:08:45,270 --> 00:08:49,930 Now let's test one, which is too low and it works again. 157 00:08:49,930 --> 00:08:54,300 And now let's test three, which is correct. 158 00:08:54,300 --> 00:08:57,170 And indeed it's correct. 159 00:08:57,170 --> 00:08:58,850 So that's working already. 160 00:08:58,850 --> 00:09:01,090 Now let's move on to the next step 161 00:09:01,090 --> 00:09:03,380 which is to work with a score here. 162 00:09:03,380 --> 00:09:05,800 So remember that each time that we guess 163 00:09:05,800 --> 00:09:09,520 a wrong number our score showed to decrease. 164 00:09:09,520 --> 00:09:11,543 So let me show that to you again. 165 00:09:13,160 --> 00:09:16,450 So let's say five and see how it starts at 20, 166 00:09:16,450 --> 00:09:19,770 just like in our code, but now as I check wrong 167 00:09:20,720 --> 00:09:23,883 so it's too high and now the score decreased to 19. 168 00:09:24,800 --> 00:09:26,910 So let me check another one. 169 00:09:26,910 --> 00:09:29,880 And so now you see that my number goes down each time 170 00:09:29,880 --> 00:09:32,470 that I do a wrong guess. 171 00:09:32,470 --> 00:09:35,663 And so let's implement that in our code here as well. 172 00:09:37,030 --> 00:09:41,360 So as you see here, we start with a score of 20. 173 00:09:41,360 --> 00:09:46,270 And now in these two scenarios where the guess is wrong, 174 00:09:46,270 --> 00:09:49,470 so here where it's above and here where it's below. 175 00:09:49,470 --> 00:09:53,430 We want to decrease that score by a one, all right? 176 00:09:53,430 --> 00:09:56,430 Because again, each time that there is a wrong guess 177 00:09:56,430 --> 00:09:58,950 the score should decrease by one. 178 00:09:58,950 --> 00:10:01,210 So how should we do that? 179 00:10:01,210 --> 00:10:04,580 And I can think of two ways of doing that. 180 00:10:04,580 --> 00:10:08,190 The first way is to read the score from here, 181 00:10:08,190 --> 00:10:11,830 then decrease it by one and then print it here again. 182 00:10:11,830 --> 00:10:14,280 So that would be the first way of doing it, 183 00:10:14,280 --> 00:10:16,030 but there is a better way. 184 00:10:16,030 --> 00:10:18,870 And the better way is to actually create a variable 185 00:10:18,870 --> 00:10:22,930 for the score in the code and then update that variable 186 00:10:22,930 --> 00:10:25,460 so basically to decrease that variable 187 00:10:25,460 --> 00:10:27,140 and then display the value 188 00:10:27,140 --> 00:10:31,000 of that variable here in this score label. 189 00:10:31,000 --> 00:10:34,400 And by doing that, we have our data also in the code 190 00:10:34,400 --> 00:10:36,700 and not just on the DOM. 191 00:10:36,700 --> 00:10:39,163 And so that's always a very good thing to do. 192 00:10:40,420 --> 00:10:42,430 So let me do that now and then I will explain 193 00:10:42,430 --> 00:10:43,580 it a little bit better. 194 00:10:45,360 --> 00:10:49,220 So I'm gonna do that right here after the secret number, 195 00:10:49,220 --> 00:10:54,220 so const score, and as you already know we start with 20. 196 00:10:56,750 --> 00:10:58,830 And so that's our initial score. 197 00:10:58,830 --> 00:11:01,920 So the value that we set to this variable. 198 00:11:01,920 --> 00:11:03,620 And actually this should be a let, 199 00:11:04,510 --> 00:11:07,810 because we will then decrease that value, remember. 200 00:11:07,810 --> 00:11:10,060 And so it cannot be a const 201 00:11:10,060 --> 00:11:12,510 because a constant is immutable. 202 00:11:12,510 --> 00:11:13,650 Now, okay? 203 00:11:13,650 --> 00:11:15,580 And now here let's go back 204 00:11:15,580 --> 00:11:18,010 to the wrong guess scenario. 205 00:11:18,010 --> 00:11:21,350 Our scenario was, because it's this one and this one 206 00:11:21,350 --> 00:11:24,223 and then all we do is to decrease the score. 207 00:11:25,170 --> 00:11:30,170 So score equal score minus one. 208 00:11:30,900 --> 00:11:34,510 And maybe you already know, or hopefully you do, 209 00:11:34,510 --> 00:11:36,400 that this is the same as writing, 210 00:11:36,400 --> 00:11:40,970 score minus minus, all right? 211 00:11:40,970 --> 00:11:42,890 So we decreased the score 212 00:11:42,890 --> 00:11:45,170 and then all we have to do is to display 213 00:11:45,170 --> 00:11:47,863 that score here in this element. 214 00:11:48,751 --> 00:11:51,570 So once again, we already did that. 215 00:11:51,570 --> 00:11:53,423 So no need to repeat. 216 00:11:54,590 --> 00:11:56,103 So it's this one here. 217 00:12:00,070 --> 00:12:03,430 So we select the element with the class of score 218 00:12:03,430 --> 00:12:08,430 and then at the text content we give the score, all right? 219 00:12:09,890 --> 00:12:11,150 And that's it. 220 00:12:11,150 --> 00:12:13,280 Now we just need the same code 221 00:12:13,280 --> 00:12:16,180 also in the other wrong scenario. 222 00:12:16,180 --> 00:12:18,890 So where the guess is below the secret number. 223 00:12:18,890 --> 00:12:22,973 So I'm just copying this code and putting it here, 224 00:12:24,210 --> 00:12:27,400 give it a safe and a before testing it 225 00:12:27,400 --> 00:12:30,410 let me again, explain what we just did here. 226 00:12:30,410 --> 00:12:32,980 So as I said, we could have also stored 227 00:12:32,980 --> 00:12:35,760 this score basically in the DOM. 228 00:12:35,760 --> 00:12:38,150 And to do that we would always just read 229 00:12:38,150 --> 00:12:39,740 this value from here. 230 00:12:39,740 --> 00:12:43,760 So right from the DOM , then we could decrease that value 231 00:12:43,760 --> 00:12:46,330 and then write it back here to the DOM 232 00:12:46,330 --> 00:12:49,880 but then we would not have that value in our code. 233 00:12:49,880 --> 00:12:52,540 So essentially our application would have no way 234 00:12:52,540 --> 00:12:55,400 of knowing that score at all points. 235 00:12:55,400 --> 00:12:59,260 And so it's always good to keep a variable 236 00:12:59,260 --> 00:13:02,370 which actually holds the data in our code 237 00:13:02,370 --> 00:13:06,620 and not just rely on the DOM to hold our data, all right? 238 00:13:06,620 --> 00:13:10,680 And this variable here can also be called a state variable. 239 00:13:10,680 --> 00:13:12,930 Because this score is part 240 00:13:12,930 --> 00:13:15,770 of the so-called application state 241 00:13:15,770 --> 00:13:18,940 which is basically all the data that is relevant 242 00:13:18,940 --> 00:13:20,450 to the application. 243 00:13:20,450 --> 00:13:22,170 And we could say that 17, 244 00:13:22,170 --> 00:13:24,870 so the secret number is also part 245 00:13:24,870 --> 00:13:28,850 of the state of our application, all right? 246 00:13:28,850 --> 00:13:32,300 And so we want all the data always to be available 247 00:13:32,300 --> 00:13:36,727 somewhere in our code and not just in the DOM , okay? 248 00:13:36,727 --> 00:13:38,980 But always keep that in mind, 249 00:13:38,980 --> 00:13:42,700 and so that is why we implemented a solution like this. 250 00:13:42,700 --> 00:13:44,530 So whenever there's a wrong guess, 251 00:13:44,530 --> 00:13:47,960 we just take the score that we already have in our code, 252 00:13:47,960 --> 00:13:49,810 then we decrease it by one 253 00:13:49,810 --> 00:13:52,943 and then we display that new score right here. 254 00:13:54,780 --> 00:13:59,400 So let's reload, let's say 17. 255 00:13:59,400 --> 00:14:01,573 And watch what happens to our score now. 256 00:14:03,470 --> 00:14:08,010 And indeed it decreased to 19 and our number is too high. 257 00:14:08,010 --> 00:14:09,930 And when I click again now, 258 00:14:09,930 --> 00:14:11,823 you see it decreasing even more. 259 00:14:12,770 --> 00:14:15,343 Now let's try with a lower number. 260 00:14:16,360 --> 00:14:20,180 So too low and our score decreased again. 261 00:14:20,180 --> 00:14:22,370 And actually let's keep going, 262 00:14:22,370 --> 00:14:26,880 so let's keep clicking here and watch what happens. 263 00:14:26,880 --> 00:14:30,260 So I'm clicking over and over on the same button here 264 00:14:30,260 --> 00:14:35,260 and the score keeps going down and eventually we reach zero. 265 00:14:35,763 --> 00:14:37,190 And at this point 266 00:14:37,190 --> 00:14:40,370 we should basically lose the game, all right? 267 00:14:40,370 --> 00:14:43,060 But as you see here, nothing of course happens. 268 00:14:43,060 --> 00:14:46,480 And we can keep clicking here and go until affinity 269 00:14:46,480 --> 00:14:49,060 and our program we'll of course not care. 270 00:14:49,060 --> 00:14:52,740 Because our program obviously has no idea of losing 271 00:14:52,740 --> 00:14:55,237 or of winning the game, all right? 272 00:14:55,237 --> 00:14:59,600 It is completely on us to write all that logic. 273 00:14:59,600 --> 00:15:01,560 So basically what this means 274 00:15:01,560 --> 00:15:03,830 is that all of this checking here, 275 00:15:03,830 --> 00:15:07,560 so doing all this here should only happen whenever the score 276 00:15:07,560 --> 00:15:09,580 is still above zero. 277 00:15:09,580 --> 00:15:12,250 And then when the score is actually zero, 278 00:15:12,250 --> 00:15:15,351 then we should get some kind of message here saying 279 00:15:15,351 --> 00:15:17,830 that we lost the game. 280 00:15:17,830 --> 00:15:21,543 So let's quickly do that here, inside of this scenario. 281 00:15:23,200 --> 00:15:26,860 So basically we need another if statement here inside 282 00:15:26,860 --> 00:15:30,190 this already Else-if block. 283 00:15:30,190 --> 00:15:32,260 And that's of course not a problem at all. 284 00:15:32,260 --> 00:15:36,230 We can perfectly have one if inside of the other. 285 00:15:36,230 --> 00:15:39,840 So what I was just saying is that this here, 286 00:15:39,840 --> 00:15:42,940 all of this should basically only happen 287 00:15:42,940 --> 00:15:46,110 while the score is still above zero. 288 00:15:46,110 --> 00:15:48,140 So let's do that. 289 00:15:48,140 --> 00:15:51,810 So if score is above zero 290 00:15:54,320 --> 00:15:58,030 only then do all of this, all right. 291 00:16:00,870 --> 00:16:05,870 And now Else, so basically if it is zero, 292 00:16:06,930 --> 00:16:09,383 then we want to display another message. 293 00:16:11,560 --> 00:16:16,560 So we want to say you lost the game with some losing emoji. 294 00:16:24,870 --> 00:16:26,990 So I'm gonna use this one here, 295 00:16:26,990 --> 00:16:28,813 so that's an explosion I believe. 296 00:16:33,130 --> 00:16:35,490 So let's test that now. 297 00:16:35,490 --> 00:16:39,280 And we only implement this for when the guess 298 00:16:39,280 --> 00:16:41,283 is above the secret number. 299 00:16:42,250 --> 00:16:45,670 So let's now use 12, it's too high 300 00:16:45,670 --> 00:16:48,473 and now let's keep going to test what happens. 301 00:16:49,860 --> 00:16:51,580 So we are approaching it now 302 00:16:53,230 --> 00:16:54,960 and now we lost the game. 303 00:16:54,960 --> 00:16:57,120 But actually I could click twice 304 00:16:57,120 --> 00:16:59,660 as my score was already zero. 305 00:16:59,660 --> 00:17:03,070 So try this for yourself, I will just reload here, 306 00:17:03,070 --> 00:17:05,873 and again put a number that is above. 307 00:17:12,847 --> 00:17:14,850 So now the score is one and as I click, 308 00:17:14,850 --> 00:17:17,770 we should get a message you lost the game. 309 00:17:17,770 --> 00:17:21,410 So let's try and it didn't happen yet. 310 00:17:21,410 --> 00:17:23,840 And it did not happen because the score 311 00:17:23,840 --> 00:17:27,970 was indeed still a greater than zero here, all right? 312 00:17:27,970 --> 00:17:32,163 So we need to change that to greater than one, okay? 313 00:17:38,040 --> 00:17:39,953 So again, a larger number. 314 00:17:43,680 --> 00:17:48,680 Now I get one and if I click now you lost the game. 315 00:17:49,310 --> 00:17:52,993 And all we need to do is to update the score to zero here. 316 00:17:55,310 --> 00:18:00,310 So let's just copy this, write zero, 317 00:18:01,730 --> 00:18:04,670 and then before we test it we can actually copy 318 00:18:04,670 --> 00:18:08,310 the same code to this other scenario. 319 00:18:08,310 --> 00:18:11,850 Now, as you can see, we are creating a lot of duplicate code 320 00:18:11,850 --> 00:18:14,583 and we will fix that by the end of this project. 321 00:18:15,420 --> 00:18:18,003 But for now, let's just keep working on this. 322 00:18:20,400 --> 00:18:23,793 And the only thing that really changes here is this message. 323 00:18:26,860 --> 00:18:29,600 So you'll see that here is some potential 324 00:18:29,600 --> 00:18:31,493 to eliminate duplicate code. 325 00:18:32,600 --> 00:18:35,180 But again we will take care of later off that, 326 00:18:35,180 --> 00:18:39,410 for now let's just make it work, okay? 327 00:18:39,410 --> 00:18:41,740 And with this I think we're actually finished. 328 00:18:41,740 --> 00:18:43,113 Let's just test it. 329 00:18:44,560 --> 00:18:47,513 So five is too low, 330 00:18:49,260 --> 00:18:54,260 so let's keep going down and you lost a game, great. 331 00:18:55,740 --> 00:18:59,750 Now let's test a larger number 332 00:18:59,750 --> 00:19:04,750 and I keep clicking here and now we lost the game too. 333 00:19:06,940 --> 00:19:10,640 Great, so our game logic is already working 334 00:19:10,640 --> 00:19:12,250 and actually the game itself 335 00:19:12,250 --> 00:19:14,760 is also kind of working already. 336 00:19:14,760 --> 00:19:17,330 There's just two things that are missing here 337 00:19:17,330 --> 00:19:21,530 which is the high score and this play again button. 338 00:19:21,530 --> 00:19:24,060 But before implementing that functionality, 339 00:19:24,060 --> 00:19:25,640 in the next video we're gonna talk 340 00:19:25,640 --> 00:19:27,980 a little bit about CSS 341 00:19:27,980 --> 00:19:31,313 and how we can manipulate styles using JavaScript. 25645

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.