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.