WEBVTT 1 00:00:01.330 --> 00:00:04.610 Welcome to the last lecture of this project 2 00:00:04.610 --> 00:00:06.490 and of this section. 3 00:00:06.490 --> 00:00:08.330 And in this one, we're gonna implement 4 00:00:08.330 --> 00:00:11.260 the functionality of resetting the game 5 00:00:11.260 --> 00:00:13.123 at any point in time. 6 00:00:14.530 --> 00:00:16.070 So what we're looking for, 7 00:00:16.070 --> 00:00:18.490 when we click on this button here, 8 00:00:18.490 --> 00:00:20.540 is to remove the the winner class 9 00:00:20.540 --> 00:00:23.090 and to set all the scores 10 00:00:23.090 --> 00:00:26.180 of all the players here back to zero. 11 00:00:26.180 --> 00:00:29.510 So all the total scores, this and this, 12 00:00:29.510 --> 00:00:34.430 and all the current scores should also be put back to zero. 13 00:00:34.430 --> 00:00:36.590 So essentially, we need to set back 14 00:00:36.590 --> 00:00:39.690 all the initial conditions of the game. 15 00:00:39.690 --> 00:00:41.890 Now, we already did something similar 16 00:00:41.890 --> 00:00:44.240 to this in our first game, 17 00:00:44.240 --> 00:00:46.630 and so maybe this is a good opportunity 18 00:00:46.630 --> 00:00:49.250 to leave this as a challenge for you. 19 00:00:49.250 --> 00:00:51.590 And this one will be a little bit more difficult 20 00:00:51.590 --> 00:00:54.650 than the one in the Guess My Number project. 21 00:00:54.650 --> 00:00:57.180 But you can still try to do it. 22 00:00:57.180 --> 00:00:59.500 So what I want you to do is when we click 23 00:00:59.500 --> 00:01:02.190 on this button, as I just mentioned, 24 00:01:02.190 --> 00:01:05.890 reset all the initial conditions of the game. 25 00:01:05.890 --> 00:01:07.750 And it doesn't matter if your solution 26 00:01:07.750 --> 00:01:11.350 will be dramatically different from mine, okay? 27 00:01:11.350 --> 00:01:12.840 I just want you to try, 28 00:01:12.840 --> 00:01:15.630 and I want you to write code on your own. 29 00:01:15.630 --> 00:01:18.190 No matter if you'll actually achieve the goal 30 00:01:18.190 --> 00:01:23.030 in the end or not, that is not point right now. 31 00:01:23.030 --> 00:01:24.790 So just pause the video here, please. 32 00:01:24.790 --> 00:01:28.763 And try to do at least part of this on your own. 33 00:01:30.270 --> 00:01:33.980 So hopefully, you had a great time doing that. 34 00:01:33.980 --> 00:01:38.980 And so let's now go back together here and do it ourselves. 35 00:01:39.600 --> 00:01:42.250 So we need this btnNew, 36 00:01:42.250 --> 00:01:46.683 and so once more, we will add an event handler on there. 37 00:01:49.100 --> 00:01:51.617 So that's btnNew.addEventListener 38 00:01:57.610 --> 00:02:01.600 waiting for a click, and then we want to execute 39 00:02:03.730 --> 00:02:06.203 whatever happens here. 40 00:02:07.520 --> 00:02:11.580 So as I said, we need to reset all the scores. 41 00:02:11.580 --> 00:02:13.790 So let's start with that. 42 00:02:13.790 --> 00:02:16.593 And I guess I already selected these up here. 43 00:02:18.380 --> 00:02:21.303 So that is scoreEl0 and score1El, okay? 44 00:02:25.770 --> 00:02:29.170 So these two scores, we want to set them back to zero. 45 00:02:29.170 --> 00:02:31.623 Now actually, we already did that here, 46 00:02:32.790 --> 00:02:35.923 so let's just copy it for now. 47 00:02:38.570 --> 00:02:39.870 Okay. 48 00:02:39.870 --> 00:02:41.270 Then we also need to set 49 00:02:41.270 --> 00:02:43.563 all the current scores back to zero. 50 00:02:44.520 --> 00:02:46.370 So that is current0El and current1El. 51 00:02:52.680 --> 00:02:57.680 So current0El equal zero, 52 00:02:57.900 --> 00:03:01.040 and then current1El also back to zero. 53 00:03:06.760 --> 00:03:10.470 Next up, we need to remove the winner class, 54 00:03:10.470 --> 00:03:14.340 so this dark class that we have here, 55 00:03:14.340 --> 00:03:16.720 and now it's gonna disappear because as I move out 56 00:03:16.720 --> 00:03:20.080 from this window, it will save and then it will reload. 57 00:03:20.080 --> 00:03:21.770 So I'll only go half. 58 00:03:21.770 --> 00:03:25.060 But you see this dark class, the winner class, 59 00:03:25.060 --> 00:03:26.233 needs to disappear. 60 00:03:27.090 --> 00:03:29.360 And so let's do that. 61 00:03:29.360 --> 00:03:32.413 And so that should be player0El.classList.remove 62 00:03:41.910 --> 00:03:45.240 and player winner. 63 00:03:45.240 --> 00:03:49.200 Now of course, we do not know which player won the game. 64 00:03:49.200 --> 00:03:53.393 And so we have to do this on both the player elements, okay? 65 00:03:55.410 --> 00:03:57.720 And that's not problem at all. 66 00:03:57.720 --> 00:04:01.120 So we already know that only one of these two elements 67 00:04:01.120 --> 00:04:05.180 will have this class, but we can still tell JavaScript 68 00:04:05.180 --> 00:04:08.023 to remove a class even if it's not there. 69 00:04:08.910 --> 00:04:11.540 JavaScript will happily do that. 70 00:04:11.540 --> 00:04:13.970 Then, next up, we also need to remove 71 00:04:13.970 --> 00:04:17.250 the active classes on both players, 72 00:04:17.250 --> 00:04:19.950 because again, we do not know at this point 73 00:04:19.950 --> 00:04:22.280 which one is the active player. 74 00:04:22.280 --> 00:04:25.080 So let's just remove them too. 75 00:04:25.080 --> 00:04:26.363 Now, just copy it. 76 00:04:27.760 --> 00:04:32.370 So player winner here is both active. 77 00:04:32.370 --> 00:04:35.650 And then, we also need to set the first player 78 00:04:35.650 --> 00:04:37.650 to be the active player. 79 00:04:37.650 --> 00:04:39.420 So let's do that. 80 00:04:39.420 --> 00:04:42.880 And in fact, let me just change the code here 81 00:04:42.880 --> 00:04:46.210 in this line, because there's no need to remove it 82 00:04:46.210 --> 00:04:49.400 from player zero, because, well, 83 00:04:49.400 --> 00:04:52.980 player zero should be the active player in the beginning. 84 00:04:52.980 --> 00:04:55.090 And so there's no need of removing it 85 00:04:55.090 --> 00:04:56.690 and then adding it back. 86 00:04:56.690 --> 00:05:00.240 So I will simply add it, all right? 87 00:05:00.240 --> 00:05:01.770 And if it was already there, 88 00:05:01.770 --> 00:05:05.690 then JavaScript will not add it again, okay? 89 00:05:05.690 --> 00:05:07.880 So just like with removing. 90 00:05:07.880 --> 00:05:09.410 So if the class is not there, 91 00:05:09.410 --> 00:05:12.580 but we are still telling JavaScript to remove it, 92 00:05:12.580 --> 00:05:14.360 it will not give us an error. 93 00:05:14.360 --> 00:05:15.940 It will simply do nothing. 94 00:05:15.940 --> 00:05:18.970 And if we add a class that's already there, 95 00:05:18.970 --> 00:05:20.800 it will not add a second one. 96 00:05:20.800 --> 00:05:23.070 And so here, it's not a problem. 97 00:05:23.070 --> 00:05:25.640 So even if the class is already there 98 00:05:25.640 --> 00:05:28.440 by saying add a player active, 99 00:05:28.440 --> 00:05:31.123 we will not add another one, okay? 100 00:05:32.150 --> 00:05:35.700 All right, and that's it for the visible part 101 00:05:35.700 --> 00:05:37.470 of the user interface. 102 00:05:37.470 --> 00:05:41.670 So we changed classes here and we manipulated the content. 103 00:05:41.670 --> 00:05:43.530 But of course, we also need to set 104 00:05:43.530 --> 00:05:47.493 our internal state variables back to the initial state. 105 00:05:48.630 --> 00:05:51.770 So basically, what we need to do, 106 00:05:51.770 --> 00:05:55.400 is to add these scores back to zero, 107 00:05:55.400 --> 00:05:57.553 set the current score back to zero, 108 00:05:58.460 --> 00:06:01.200 set the active player back to the first player, 109 00:06:01.200 --> 00:06:04.810 and also basically start the game again 110 00:06:04.810 --> 00:06:07.440 by setting playing back to true. 111 00:06:07.440 --> 00:06:09.690 So what should we do here? 112 00:06:09.690 --> 00:06:12.220 Should I simply take this code 113 00:06:12.220 --> 00:06:14.750 and copy it to the other function? 114 00:06:14.750 --> 00:06:19.320 And you already know the answer to this question, don't you? 115 00:06:19.320 --> 00:06:21.260 So, of course not. 116 00:06:21.260 --> 00:06:23.540 Instead, we will create a function 117 00:06:23.540 --> 00:06:26.720 which contains this code, together with the code 118 00:06:26.720 --> 00:06:30.160 that is already down here, okay? 119 00:06:30.160 --> 00:06:33.730 And then we will create a new function with all of these. 120 00:06:33.730 --> 00:06:36.060 And I'm gonna call this function init, 121 00:06:36.060 --> 00:06:38.530 which stands for initialization. 122 00:06:38.530 --> 00:06:40.883 So let me cut this code here, 123 00:06:41.840 --> 00:06:45.023 and create this function here. 124 00:06:46.930 --> 00:06:51.112 So again, calling init, which stands for initialization. 125 00:06:51.112 --> 00:06:54.370 And this is once again just the function 126 00:06:54.370 --> 00:06:58.160 that serves as a reusable piece of code, 127 00:06:58.160 --> 00:06:59.860 so we need to know arguments here. 128 00:07:01.880 --> 00:07:04.910 Okay, so this is the init function, 129 00:07:04.910 --> 00:07:06.970 which will initialize our game. 130 00:07:06.970 --> 00:07:10.750 And now, we also want this code in there as well. 131 00:07:10.750 --> 00:07:12.880 And in fact, we want all of these code. 132 00:07:12.880 --> 00:07:14.980 So all of the starting conditions 133 00:07:14.980 --> 00:07:19.420 should now be set here in this init function. 134 00:07:19.420 --> 00:07:22.963 So let's grab this and paste it here. 135 00:07:24.000 --> 00:07:27.650 Okay, and now, these two are duplicate. 136 00:07:27.650 --> 00:07:29.960 So they're already down here. 137 00:07:29.960 --> 00:07:31.810 So this is the same as this and this, 138 00:07:32.772 --> 00:07:34.363 so let's remove it from here, 139 00:07:35.500 --> 00:07:38.393 and then let's move this one down a little bit. 140 00:07:41.070 --> 00:07:45.350 Okay, and again I used option or Alt + arrow down 141 00:07:45.350 --> 00:07:46.823 to move the line like that. 142 00:07:47.740 --> 00:07:52.720 Give it some space here, and okay. 143 00:07:52.720 --> 00:07:56.010 So this is our initializing function. 144 00:07:56.010 --> 00:08:00.170 Now, when do we want this function here to be executed? 145 00:08:00.170 --> 00:08:02.670 We want it in two situations. 146 00:08:02.670 --> 00:08:05.940 So whenever we load the page for the very first time 147 00:08:05.940 --> 00:08:08.420 or also when that button is clicked 148 00:08:08.420 --> 00:08:11.260 that we were just working on, right? 149 00:08:11.260 --> 00:08:14.350 So, of course, we need these scores 150 00:08:14.350 --> 00:08:17.550 to be zero at the beginning, together with the current score 151 00:08:17.550 --> 00:08:20.270 and the active player and all of that. 152 00:08:20.270 --> 00:08:24.140 And so we used to have this code outside of any function. 153 00:08:24.140 --> 00:08:28.130 And so it was executed right when the file was loaded. 154 00:08:28.130 --> 00:08:31.350 But now, this code is inside of this function. 155 00:08:31.350 --> 00:08:33.230 And right now, we are not calling 156 00:08:33.230 --> 00:08:35.080 this function here at any point. 157 00:08:35.080 --> 00:08:36.690 And so this code in here 158 00:08:36.690 --> 00:08:40.880 will not get executed as the page loads, okay? 159 00:08:40.880 --> 00:08:43.380 So right now, as we load the page, 160 00:08:43.380 --> 00:08:46.880 you will see that it has this weird starting conditions 161 00:08:46.880 --> 00:08:51.270 that it had initially, showing these random numbers 162 00:08:51.270 --> 00:08:53.050 and showing the dice, 163 00:08:53.050 --> 00:08:57.870 and nothing is gonna work now if I click any of this. 164 00:08:57.870 --> 00:09:00.300 And so that's because our initial variables here 165 00:09:00.300 --> 00:09:05.170 are not set, because this function does not run on its own. 166 00:09:05.170 --> 00:09:07.250 And so as you might guess, 167 00:09:07.250 --> 00:09:09.653 the solution to that is to simply run it. 168 00:09:10.920 --> 00:09:13.670 So as we now load this script, 169 00:09:13.670 --> 00:09:17.860 then JavaScript will find this function definition, 170 00:09:17.860 --> 00:09:20.520 and then it will find this line of code 171 00:09:20.520 --> 00:09:22.490 which runs the function. 172 00:09:22.490 --> 00:09:25.070 And so then, by that time, all of this code here 173 00:09:25.070 --> 00:09:29.770 will be executed and then our game will work just fine. 174 00:09:29.770 --> 00:09:31.120 So let me show that to you. 175 00:09:31.980 --> 00:09:34.550 And so now, we are back to looking normal 176 00:09:34.550 --> 00:09:36.113 and our game should work. 177 00:09:37.240 --> 00:09:39.163 Oh, and actually, nothing is working. 178 00:09:40.420 --> 00:09:43.730 So let's take a look at the console. 179 00:09:43.730 --> 00:09:47.890 But I can already guess what is happening, okay? 180 00:09:47.890 --> 00:09:51.410 And so, yeah, we see here from these errors 181 00:09:51.410 --> 00:09:53.660 that these variables are not defined. 182 00:09:53.660 --> 00:09:56.990 Playing is not defined, and yeah. 183 00:09:56.990 --> 00:09:59.680 But it's not the only variable that is not defined. 184 00:09:59.680 --> 00:10:01.603 And so let me show you the error here. 185 00:10:02.750 --> 00:10:04.610 So this error comes from something 186 00:10:04.610 --> 00:10:08.060 that we already talked about very briefly before, 187 00:10:08.060 --> 00:10:10.230 but I didn't really go into yet. 188 00:10:10.230 --> 00:10:12.020 That's because in the next section, 189 00:10:12.020 --> 00:10:16.820 we will really get deep into something called scoping, okay? 190 00:10:16.820 --> 00:10:19.510 But let me just explain to you right now 191 00:10:19.510 --> 00:10:22.480 that these variables that I defined here, 192 00:10:22.480 --> 00:10:27.210 they're only available inside of this init function, okay? 193 00:10:27.210 --> 00:10:31.140 So again, these scores, this current score, 194 00:10:31.140 --> 00:10:33.840 this active play, and this playing, 195 00:10:33.840 --> 00:10:36.990 all of these variables, I declared them in here, 196 00:10:36.990 --> 00:10:38.570 inside of this function. 197 00:10:38.570 --> 00:10:42.320 And so because of that, they are not accessible 198 00:10:42.320 --> 00:10:44.680 outside of the function. 199 00:10:44.680 --> 00:10:48.400 So we say that they are scoped to this init function, 200 00:10:48.400 --> 00:10:50.820 because this is where I declared them. 201 00:10:50.820 --> 00:10:54.910 And so the solution is to declare these variables 202 00:10:54.910 --> 00:10:58.860 outside of any function but without any value. 203 00:10:58.860 --> 00:11:00.940 And so it's then in the init function 204 00:11:00.940 --> 00:11:05.800 where they will really be declared, okay? 205 00:11:05.800 --> 00:11:08.320 And if that doesn't make 100% sense, 206 00:11:08.320 --> 00:11:10.870 it will make after the next section 207 00:11:10.870 --> 00:11:13.550 where we will really understand deeply 208 00:11:13.550 --> 00:11:16.630 how scoping like this works. 209 00:11:16.630 --> 00:11:21.150 Anyway, let's now declare these four variables here outside. 210 00:11:21.150 --> 00:11:24.210 So I will use let now for all of them. 211 00:11:24.210 --> 00:11:25.480 So scores. 212 00:11:25.480 --> 00:11:27.730 And then remember, as we already did 213 00:11:27.730 --> 00:11:29.290 in the fundamental section, 214 00:11:29.290 --> 00:11:31.970 we can define a bunch of empty variables 215 00:11:31.970 --> 00:11:33.670 by using commas here. 216 00:11:33.670 --> 00:11:36.957 So currentScore, activePlayer, and playing. 217 00:11:41.920 --> 00:11:46.660 So now, these variables, they basically live outside here. 218 00:11:46.660 --> 00:11:47.820 And so what we do here then 219 00:11:47.820 --> 00:11:51.470 is to essentially reassign them a value. 220 00:11:51.470 --> 00:11:54.320 So we need to get rid of these lets here, 221 00:11:54.320 --> 00:11:58.040 because that would then create new variables here. 222 00:11:58.040 --> 00:12:00.240 But again, that's not what we want. 223 00:12:00.240 --> 00:12:04.100 We want the variables, basically, to live out here. 224 00:12:04.100 --> 00:12:05.670 And then, in the init function, 225 00:12:05.670 --> 00:12:08.450 we only reassign their values. 226 00:12:08.450 --> 00:12:09.790 So that's very different. 227 00:12:09.790 --> 00:12:12.610 So declaring a variable is not the same 228 00:12:12.610 --> 00:12:16.140 as assigning them a value, okay? 229 00:12:16.140 --> 00:12:19.760 And so right now here, we only assign them a value, 230 00:12:19.760 --> 00:12:22.040 but they still live outside here, 231 00:12:22.040 --> 00:12:24.250 and that's why they are then accessible 232 00:12:24.250 --> 00:12:27.960 in every function everywhere, all right? 233 00:12:27.960 --> 00:12:30.290 And now, just to finish, we also need to use 234 00:12:30.290 --> 00:12:35.290 this init function, of course, on the reload function. 235 00:12:36.500 --> 00:12:38.660 So on this event handler here. 236 00:12:38.660 --> 00:12:40.500 And so, just like before, 237 00:12:40.500 --> 00:12:45.040 here, we now do not declare this anonymous function, 238 00:12:45.040 --> 00:12:49.350 but instead, we pass in the init function, 239 00:12:49.350 --> 00:12:51.773 which again is really just a value, 240 00:12:52.730 --> 00:12:55.680 and so it's perfectly okay to pass this value 241 00:12:55.680 --> 00:12:58.300 into this other function. 242 00:12:58.300 --> 00:13:00.780 And just keep in mind that we do not call 243 00:13:00.780 --> 00:13:02.220 this function here. 244 00:13:02.220 --> 00:13:05.520 It is JavaScript who will call the init function 245 00:13:05.520 --> 00:13:08.650 as soon as the user clicks on the new button. 246 00:13:08.650 --> 00:13:12.093 And so now, everything will work just fine. 247 00:13:14.700 --> 00:13:17.943 So we get five, we get five down here. 248 00:13:19.420 --> 00:13:20.680 And let's hold it now. 249 00:13:20.680 --> 00:13:22.883 And indeed, we moved to the other side. 250 00:13:24.480 --> 00:13:26.460 And with this, we should win the game now. 251 00:13:26.460 --> 00:13:27.723 So let's see. 252 00:13:29.180 --> 00:13:31.890 Hold and indeed. 253 00:13:31.890 --> 00:13:34.740 And now, here comes the test to see if this button works. 254 00:13:35.930 --> 00:13:39.930 And indeed, it does, and we can restart the game 255 00:13:39.930 --> 00:13:40.933 just like this. 256 00:13:41.930 --> 00:13:45.110 This time, let's player two win the game here 257 00:13:46.200 --> 00:13:48.100 just to see if it works there as well. 258 00:13:50.840 --> 00:13:52.163 So that's enough points. 259 00:13:53.370 --> 00:13:56.310 And indeed, it works. 260 00:13:56.310 --> 00:13:57.920 But what matters is now that 261 00:13:57.920 --> 00:14:00.290 as we click the new game button, 262 00:14:00.290 --> 00:14:02.090 everything is back to normal 263 00:14:02.090 --> 00:14:06.673 and player one is back to being the current player. 264 00:14:07.890 --> 00:14:09.440 All right, great. 265 00:14:09.440 --> 00:14:11.973 And with that, we actually finished the game. 266 00:14:12.930 --> 00:14:14.150 Almost finished. 267 00:14:14.150 --> 00:14:19.150 Let's set the threshold here back to actually 100 points. 268 00:14:19.570 --> 00:14:22.120 So that is the limit here 269 00:14:22.120 --> 00:14:24.860 on which we want this game to finish. 270 00:14:24.860 --> 00:14:26.830 But with that, the game is ready 271 00:14:26.830 --> 00:14:29.310 and feature complete and yeah. 272 00:14:29.310 --> 00:14:31.020 I hope you're happy with it. 273 00:14:31.020 --> 00:14:32.770 So congratulations. 274 00:14:32.770 --> 00:14:37.340 Great job for making it to the end of this section. 275 00:14:37.340 --> 00:14:39.740 That's already a really great achievement 276 00:14:39.740 --> 00:14:41.660 and I hope that you can see 277 00:14:41.660 --> 00:14:45.390 that you already learned a lot of new stuff here. 278 00:14:45.390 --> 00:14:47.790 And now, you can go ahead and play this game 279 00:14:47.790 --> 00:14:50.350 with your friends, and you can tell them 280 00:14:50.350 --> 00:14:53.580 that actually, you coded this by yourself. 281 00:14:53.580 --> 00:14:55.970 So the code you wrote on your computer 282 00:14:55.970 --> 00:14:58.570 is what made this program possible. 283 00:14:58.570 --> 00:15:02.370 It's what makes this really come to life, so to say. 284 00:15:02.370 --> 00:15:04.450 So how cool is that? 285 00:15:04.450 --> 00:15:05.690 And maybe even your friend 286 00:15:05.690 --> 00:15:07.880 will then become interested in programming, 287 00:15:07.880 --> 00:15:10.180 and you can do this journey together. 288 00:15:10.180 --> 00:15:11.640 But anyway, with this, 289 00:15:11.640 --> 00:15:16.060 we now really finished the fundamentals part of this course. 290 00:15:16.060 --> 00:15:18.290 And once again, I really hope 291 00:15:18.290 --> 00:15:20.860 that you can see that you already learned 292 00:15:20.860 --> 00:15:25.460 a lot of new contents here in this last couple of hours. 293 00:15:25.460 --> 00:15:27.610 So congratulations once again 294 00:15:27.610 --> 00:15:29.520 and I'll see you in the next section, 295 00:15:29.520 --> 00:15:32.040 which is really important, because there, 296 00:15:32.040 --> 00:15:33.660 you're gonna learn how JavaScript 297 00:15:33.660 --> 00:15:35.993 actually works behind the scenes.