WEBVTT 1 00:00:01.310 --> 00:00:02.320 In this video, 2 00:00:02.320 --> 00:00:06.820 we will actually start implementing our games functionality, 3 00:00:06.820 --> 00:00:09.990 and we will start with the most important functionality, 4 00:00:09.990 --> 00:00:11.913 which is rolling the dice. 5 00:00:13.500 --> 00:00:18.370 And let's start with another look at our flowchart here. 6 00:00:18.370 --> 00:00:22.260 So that's why I included it in the starter files. 7 00:00:22.260 --> 00:00:24.530 So when the user roles a dice, 8 00:00:24.530 --> 00:00:28.150 we want to first generate a random dice roll, 9 00:00:28.150 --> 00:00:32.730 then display it and then check whether it is a one or not. 10 00:00:32.730 --> 00:00:36.880 And if it's not, we add that dice roll to the current score, 11 00:00:36.880 --> 00:00:40.580 and if it is a one we go to the next player. 12 00:00:40.580 --> 00:00:41.900 And maybe you're noticing 13 00:00:41.900 --> 00:00:45.830 that having or building a flow chart like this 14 00:00:45.830 --> 00:00:50.010 is pretty similar to actually dividing the big problem down 15 00:00:50.010 --> 00:00:52.580 into smaller sub problems. 16 00:00:52.580 --> 00:00:55.250 So essentially, all these squares that we have here 17 00:00:55.250 --> 00:00:57.010 on the flow chart are like 18 00:00:57.010 --> 00:00:59.240 the sub problems that we now need to go 19 00:00:59.240 --> 00:01:01.180 ahead and implement. 20 00:01:01.180 --> 00:01:04.570 So again, for a bigger application like this one, 21 00:01:04.570 --> 00:01:08.590 it's a very good idea to draw a flow chart like this, 22 00:01:08.590 --> 00:01:12.460 along with the process of solving problems that I taught you 23 00:01:12.460 --> 00:01:14.210 in the previous section. 24 00:01:14.210 --> 00:01:17.020 So use all of these methods that I showed you together 25 00:01:17.020 --> 00:01:19.100 whenever you need to solve a problem, 26 00:01:19.100 --> 00:01:23.530 because in the end, building a project like this is also 27 00:01:23.530 --> 00:01:25.290 simply solving a problem. 28 00:01:25.290 --> 00:01:27.970 So you know how the project is supposed to work, 29 00:01:27.970 --> 00:01:29.620 but then the problem is 30 00:01:29.620 --> 00:01:32.620 to essentially implement it yourself. 31 00:01:32.620 --> 00:01:35.240 And so you need to divide that big problem 32 00:01:35.240 --> 00:01:37.100 that can seem very scary 33 00:01:37.100 --> 00:01:38.960 into smaller problems that will then 34 00:01:38.960 --> 00:01:41.090 be easy to implement. 35 00:01:41.090 --> 00:01:43.220 And as we move through this project, 36 00:01:43.220 --> 00:01:47.230 you will see that it's not so scary after all. 37 00:01:47.230 --> 00:01:48.690 And with that being said, 38 00:01:48.690 --> 00:01:52.580 let's now also see this part of the flowchart in action 39 00:01:52.580 --> 00:01:54.880 in the real application. 40 00:01:54.880 --> 00:01:58.130 So this is a little bit less abstract. 41 00:01:58.130 --> 00:02:01.880 So we roll the dice and now we rolled a one. 42 00:02:01.880 --> 00:02:03.720 So let's just do it again. 43 00:02:03.720 --> 00:02:07.260 Let me reload the game as if it was a new game. 44 00:02:07.260 --> 00:02:10.300 So we roll the dice, we roll a number. 45 00:02:10.300 --> 00:02:12.290 So we generate a random number 46 00:02:12.290 --> 00:02:15.460 and then display the dice accordingly, 47 00:02:15.460 --> 00:02:18.193 and then we add that score down here. 48 00:02:19.570 --> 00:02:22.460 Again, and now we actually rolled a one. 49 00:02:22.460 --> 00:02:25.600 And so we moved on to the next player. 50 00:02:25.600 --> 00:02:26.433 Okay. 51 00:02:27.450 --> 00:02:31.340 So that's what I just explained before using the flowchart, 52 00:02:31.340 --> 00:02:34.610 but seeing it in action is a bit easier. 53 00:02:34.610 --> 00:02:38.800 So we want to react to clicking that roll button. 54 00:02:38.800 --> 00:02:42.440 So we need to select that button element and then 55 00:02:42.440 --> 00:02:45.683 add an event listener or an event handler. 56 00:02:48.220 --> 00:02:52.360 So here we have our three buttons and actually 57 00:02:52.360 --> 00:02:54.720 let's select all of them. 58 00:02:54.720 --> 00:02:57.310 So we will need them anyway later. 59 00:02:57.310 --> 00:03:02.310 So that's button new, button roll and button--hold. 60 00:03:06.210 --> 00:03:10.020 So const button new 61 00:03:11.210 --> 00:03:14.847 is document.querySelector.btn, 62 00:03:18.976 --> 00:03:21.163 and then two dashes new. 63 00:03:22.680 --> 00:03:24.993 And now I will just duplicate this line here. 64 00:03:28.570 --> 00:03:32.060 So that's button roll 65 00:03:33.690 --> 00:03:36.493 and here also roll and then hold. 66 00:03:42.400 --> 00:03:45.830 So let's just confirm new roll and hold 67 00:03:45.830 --> 00:03:48.833 and indeed new roll and hold. 68 00:03:50.000 --> 00:03:52.270 So that's gonna work just fine. 69 00:03:52.270 --> 00:03:54.398 And now let's implement here 70 00:03:54.398 --> 00:03:56.981 the rolling dice functionality. 71 00:04:02.547 --> 00:04:05.890 So for that we take the roll button. 72 00:04:05.890 --> 00:04:08.110 So that's button roll. 73 00:04:08.110 --> 00:04:12.990 And then as always, when we want to react to an event, 74 00:04:12.990 --> 00:04:15.210 which in this case is going to be a click, 75 00:04:15.210 --> 00:04:17.713 we use the add event listener method. 76 00:04:19.130 --> 00:04:21.582 Then the name of the event, and then, 77 00:04:21.582 --> 00:04:23.773 our handler function right here. 78 00:04:24.640 --> 00:04:27.090 And since we will not reuse this function, 79 00:04:27.090 --> 00:04:30.390 I can simply write it here directly. 80 00:04:30.390 --> 00:04:32.820 So let's now write some comments before 81 00:04:32.820 --> 00:04:34.250 we actually write the code, 82 00:04:34.250 --> 00:04:38.090 because that is very helpful in knowing what we should do. 83 00:04:38.090 --> 00:04:41.920 So we already know that we need to start by generating 84 00:04:41.920 --> 00:04:46.093 a random dice roll. 85 00:04:47.380 --> 00:04:50.740 Then we display the dice 86 00:04:53.022 --> 00:04:57.623 and then we check for a roll to one basically, 87 00:04:58.710 --> 00:04:59.673 and if true, 88 00:05:01.740 --> 00:05:06.660 switch to next player now. 89 00:05:06.660 --> 00:05:10.943 So that's exactly what we have in the flowchart as well. 90 00:05:12.200 --> 00:05:14.210 So let's start here. 91 00:05:14.210 --> 00:05:17.440 So let's create simply a dice variable. 92 00:05:17.440 --> 00:05:21.530 And so that's why now we have dice L here for the element 93 00:05:21.530 --> 00:05:24.320 and then dice for the number itself. 94 00:05:24.320 --> 00:05:28.160 And this variable here needs to be not a global variable. 95 00:05:28.160 --> 00:05:30.290 So not a variable outside here, 96 00:05:30.290 --> 00:05:33.010 because each time that we roll the dice, 97 00:05:33.010 --> 00:05:35.300 we want to generate a new number. 98 00:05:35.300 --> 00:05:37.803 And so let's simply define that variable here. 99 00:05:39.150 --> 00:05:43.170 And now we create this random dice roll just as before. 100 00:05:43.170 --> 00:05:46.570 So math.random, 101 00:05:46.570 --> 00:05:50.990 which creates a number between zero and 0.9999. 102 00:05:52.050 --> 00:05:55.423 So almost one, multiply that by six. 103 00:05:56.900 --> 00:05:58.870 Then we truncate all of this. 104 00:05:58.870 --> 00:06:01.560 So we removed the decimal part. 105 00:06:01.560 --> 00:06:03.993 So that's math.trunc. 106 00:06:06.030 --> 00:06:09.960 So basically we pass in the results of all of this, 107 00:06:09.960 --> 00:06:12.390 into this math.trunc function. 108 00:06:12.390 --> 00:06:13.800 And so this will then give us a number 109 00:06:13.800 --> 00:06:15.780 between zero and five. 110 00:06:15.780 --> 00:06:20.650 And so we just add one to elevate that to one to six. 111 00:06:20.650 --> 00:06:23.440 So that's similar to what we did before 112 00:06:23.440 --> 00:06:26.323 and now we just need to display this dice. 113 00:06:27.200 --> 00:06:29.080 Now, the first thing that we need to do 114 00:06:29.080 --> 00:06:30.900 is to actually remove 115 00:06:30.900 --> 00:06:34.280 the hidden class. So remember in the starting conditions, 116 00:06:34.280 --> 00:06:38.220 we hit the dice by adding the hidden class. 117 00:06:38.220 --> 00:06:41.230 And so now the first thing is to remove that. 118 00:06:41.230 --> 00:06:46.230 So the diceEl.classList.remove. 119 00:06:49.660 --> 00:06:53.340 So just like in the last project and now comes 120 00:06:53.340 --> 00:06:55.330 the interesting part. 121 00:06:55.330 --> 00:06:58.120 So we know that the dice will be a number 122 00:06:58.120 --> 00:07:00.363 between one and six. 123 00:07:01.380 --> 00:07:03.220 And now, according to these numbers, 124 00:07:03.220 --> 00:07:07.060 we want to display one of these images that we have here. 125 00:07:07.060 --> 00:07:10.530 So you see that we have dice dash one dash two, three, four, 126 00:07:10.530 --> 00:07:12.230 five and six. 127 00:07:12.230 --> 00:07:15.920 And so now we want to use this dice number here, two, 128 00:07:15.920 --> 00:07:18.830 according to that number display one of the images 129 00:07:19.680 --> 00:07:22.540 and that's actually not hard to do. 130 00:07:22.540 --> 00:07:26.193 So let me show you how it looks like in the HTML now. 131 00:07:27.656 --> 00:07:30.950 So you'll see that right now, 132 00:07:30.950 --> 00:07:35.570 the source of the image is dice-5.png. 133 00:07:35.570 --> 00:07:37.450 And if you know some HTML, you know 134 00:07:37.450 --> 00:07:41.930 that the source attribute here is how we define which image 135 00:07:41.930 --> 00:07:43.730 should be displayed. 136 00:07:43.730 --> 00:07:45.520 And we can now actually change. 137 00:07:45.520 --> 00:07:50.150 We can manipulate this source attribute from our JavaScript. 138 00:07:50.150 --> 00:07:52.670 And so that's the trick that we will use to display 139 00:07:52.670 --> 00:07:56.233 the image, according to the rolled dice number. 140 00:07:57.750 --> 00:08:01.490 So let's again, take the dice element. 141 00:08:01.490 --> 00:08:03.700 And then here, there is a new thing. 142 00:08:03.700 --> 00:08:06.400 So now we can use the source property. 143 00:08:06.400 --> 00:08:11.060 So SRC just like it is called in the HTML, 144 00:08:11.060 --> 00:08:14.430 and now we can set it to a string and that string will then 145 00:08:14.430 --> 00:08:16.860 be the name of the image displayed. 146 00:08:16.860 --> 00:08:19.070 So let's use a template literal, 147 00:08:19.070 --> 00:08:23.130 and then we write, dice dash 148 00:08:23.130 --> 00:08:24.390 because that's basically 149 00:08:24.390 --> 00:08:28.610 the common name in all of these image names. 150 00:08:28.610 --> 00:08:33.610 And then here we use the dicenumber.png. 151 00:08:35.950 --> 00:08:36.970 And so with this, 152 00:08:36.970 --> 00:08:40.610 we can dynamically load one of these six images here, 153 00:08:40.610 --> 00:08:43.590 depending on the random rolled dice. 154 00:08:43.590 --> 00:08:46.660 So let's give it a safe and let's give it a try 155 00:08:46.660 --> 00:08:49.233 because this part should already be working now. 156 00:08:50.710 --> 00:08:51.733 So let's see. 157 00:08:53.520 --> 00:08:55.770 And indeed, we get this three. 158 00:08:55.770 --> 00:08:58.930 Let's actually also look to the console for now, 159 00:08:58.930 --> 00:09:00.560 this random number, just so 160 00:09:00.560 --> 00:09:02.880 we see that the dice is actually 161 00:09:02.880 --> 00:09:05.543 the corresponding one to the number. 162 00:09:08.120 --> 00:09:09.090 So let's go back 163 00:09:12.680 --> 00:09:14.240 here to the console, 164 00:09:14.240 --> 00:09:15.310 make it a bit smaller 165 00:09:18.120 --> 00:09:22.720 and now let's roll the dice and it works, great. 166 00:09:22.720 --> 00:09:24.370 So we get a two. 167 00:09:24.370 --> 00:09:27.680 And so indeed a two is also displayed here. 168 00:09:27.680 --> 00:09:29.940 Now six and six here. 169 00:09:31.010 --> 00:09:34.170 And let's just see if we get all the numbers, but yeah, 170 00:09:34.170 --> 00:09:37.923 we get the one and we already saw the six happening as well. 171 00:09:39.110 --> 00:09:43.450 So that means that our code is correct. Great. 172 00:09:43.450 --> 00:09:44.283 And now all that we have to do is to keep adding 173 00:09:44.283 --> 00:09:49.103 to roll dice to the current score. 174 00:09:51.040 --> 00:09:52.910 And so that's what we will do here 175 00:09:54.000 --> 00:09:56.703 in this case where we check for the rolled one. 176 00:09:58.170 --> 00:10:03.170 So remember that only happens when the number is not a one. 177 00:10:03.430 --> 00:10:07.380 So again, if it's a one, switch player, if no, 178 00:10:07.380 --> 00:10:10.373 then add the dice roll to the current score. 179 00:10:12.370 --> 00:10:14.510 So basically let's test here. 180 00:10:14.510 --> 00:10:16.420 If the dice 181 00:10:17.470 --> 00:10:19.653 is not one, 182 00:10:22.210 --> 00:10:25.500 because this is our main case. 183 00:10:25.500 --> 00:10:27.650 So the one that we're mostly interested in, 184 00:10:29.320 --> 00:10:30.690 and then, our else block, 185 00:10:30.690 --> 00:10:34.520 which will be basically in case that dice is a one. 186 00:10:34.520 --> 00:10:37.853 So let's just grab that here. 187 00:10:43.270 --> 00:10:45.520 So here we want to switch to the next player, 188 00:10:46.720 --> 00:10:47.950 but if it's not one, 189 00:10:47.950 --> 00:10:49.570 then we want to add 190 00:10:51.306 --> 00:10:55.043 the dice to the current score. 191 00:10:57.090 --> 00:10:59.450 So let's do this part here. 192 00:10:59.450 --> 00:11:03.230 And in order to actually be able to add the current dice 193 00:11:03.230 --> 00:11:04.570 to the current score, 194 00:11:04.570 --> 00:11:08.083 we need a way of saving that current score somewhere. 195 00:11:09.280 --> 00:11:12.470 So remember from the first project that we should not just 196 00:11:12.470 --> 00:11:15.113 store any data only in the dumb. 197 00:11:16.090 --> 00:11:17.820 So in this particular case, 198 00:11:17.820 --> 00:11:20.880 we should not only display this current score 199 00:11:20.880 --> 00:11:22.700 on the user interface. 200 00:11:22.700 --> 00:11:25.350 Instead, we also want the variable in our code, 201 00:11:25.350 --> 00:11:29.203 which always holds the current score of this current round. 202 00:11:30.447 --> 00:11:33.980 So we need to define a variable for that. 203 00:11:33.980 --> 00:11:36.850 And where do you think we should do that? 204 00:11:36.850 --> 00:11:40.300 Well, it is certainly not in this function, 205 00:11:40.300 --> 00:11:43.700 so not in this handler function, because if we did that, 206 00:11:43.700 --> 00:11:46.690 then each time that we roll a dice, 207 00:11:46.690 --> 00:11:48.620 the current score would be reset it. 208 00:11:48.620 --> 00:11:51.320 So it would be redefined because this function here 209 00:11:51.320 --> 00:11:53.480 is called over and over again, 210 00:11:53.480 --> 00:11:56.110 each time that the button is clicked. 211 00:11:56.110 --> 00:12:01.110 So if we wanted to basically persist that value, 212 00:12:01.120 --> 00:12:03.060 so if it should keep existing, 213 00:12:03.060 --> 00:12:06.850 then it needs to be outside here in the main program. 214 00:12:06.850 --> 00:12:08.713 So let's call this one current score. 215 00:12:11.150 --> 00:12:15.090 And we started at zero and it needs to be a let 216 00:12:15.090 --> 00:12:17.403 because we will keep updating it. 217 00:12:18.480 --> 00:12:21.670 So again, this cannot be inside 218 00:12:21.670 --> 00:12:24.060 of this function because then it would 219 00:12:24.060 --> 00:12:27.760 be set to zero each time that we clicked the button. 220 00:12:27.760 --> 00:12:30.163 And so therefore it needs to be outside. 221 00:12:32.000 --> 00:12:34.600 Okay. And now we say, 222 00:12:34.600 --> 00:12:37.360 current score is equal 223 00:12:37.360 --> 00:12:42.360 to current score plus the dice. 224 00:12:42.550 --> 00:12:46.284 And once again, there is a shortcut operator, 225 00:12:46.284 --> 00:12:49.880 for repeating this variable here. So instead of this, 226 00:12:49.880 --> 00:12:54.603 we can just write, current score plus equal the dice. 227 00:12:55.710 --> 00:12:57.390 So that's exactly the same, 228 00:12:57.390 --> 00:13:00.420 but it's a little bit faster to write. 229 00:13:00.420 --> 00:13:03.440 And now all we need to do is to display the score 230 00:13:03.440 --> 00:13:05.490 on the current player. 231 00:13:05.490 --> 00:13:06.470 Now, at this point, 232 00:13:06.470 --> 00:13:09.140 we will just display it on player one to make it 233 00:13:09.140 --> 00:13:11.180 a little bit simpler, but in the future, 234 00:13:11.180 --> 00:13:12.810 we will need to keep track 235 00:13:12.810 --> 00:13:15.510 of which player is the active player. 236 00:13:15.510 --> 00:13:18.460 So that we will do in the next lecture. But again, 237 00:13:18.460 --> 00:13:22.163 for now, let's just display the score on player one. 238 00:13:23.190 --> 00:13:25.980 So let's select the score 239 00:13:25.980 --> 00:13:27.933 or the current score for player one. 240 00:13:28.810 --> 00:13:31.420 So let's check where that is scored, 241 00:13:31.420 --> 00:13:36.420 and it is right here with this ID, dash dash one 242 00:13:36.510 --> 00:13:37.963 and dash dash zero. 243 00:13:39.000 --> 00:13:41.020 So let's actually copy that 244 00:13:41.020 --> 00:13:45.490 and then I will select both of these elements up here. 245 00:13:48.810 --> 00:13:51.270 So let's do that below this one. 246 00:13:51.270 --> 00:13:54.403 And actually I will keep using get element by ID now. 247 00:13:55.980 --> 00:14:00.463 So current zero, and then again, element, 248 00:14:03.530 --> 00:14:06.790 get element by ID and then 249 00:14:06.790 --> 00:14:10.500 just the class name again 250 00:14:10.500 --> 00:14:13.480 without the hash symbol there. 251 00:14:13.480 --> 00:14:15.120 And then current 252 00:14:17.070 --> 00:14:21.580 one element is document.getElement, 253 00:14:23.730 --> 00:14:26.523 and then current one. 254 00:14:27.910 --> 00:14:31.080 Okay. And so now let's use this one. 255 00:14:31.080 --> 00:14:33.105 So let me copy it, 256 00:14:33.105 --> 00:14:38.105 .textcontent equals of course 257 00:14:40.030 --> 00:14:43.163 the current score that we just defined previously. 258 00:14:45.000 --> 00:14:49.510 And let me just add a note here, change later, 259 00:14:49.510 --> 00:14:50.840 because in the future, 260 00:14:50.840 --> 00:14:53.930 we will need to display this current score 261 00:14:53.930 --> 00:14:55.400 at the current player 262 00:14:55.400 --> 00:14:58.500 and to not always add player number zero 263 00:14:58.500 --> 00:14:59.733 or player number one. 264 00:15:00.750 --> 00:15:04.480 But for now, we just want to make this functionality work. 265 00:15:04.480 --> 00:15:07.180 So let's just test it out for now. 266 00:15:07.180 --> 00:15:08.900 So roll dice four, 267 00:15:08.900 --> 00:15:12.650 and you'll see that it added the four to the zero, 268 00:15:12.650 --> 00:15:15.410 and now three plus four is seven. 269 00:15:15.410 --> 00:15:16.863 And so it works. 270 00:15:23.800 --> 00:15:26.950 And now that we rolled a one, nothing happened. 271 00:15:26.950 --> 00:15:30.580 So in this situation, we want to move to the next player. 272 00:15:30.580 --> 00:15:32.860 So basically switching the player. 273 00:15:32.860 --> 00:15:36.590 And so that's gonna be this else branch, but this one, 274 00:15:36.590 --> 00:15:39.230 I will leave for the next lecture because 275 00:15:39.230 --> 00:15:41.540 this involves doing a lot of stuff. 276 00:15:41.540 --> 00:15:43.980 So maybe you can think about what we need to do, 277 00:15:43.980 --> 00:15:46.610 because that would be a good opportunity for you 278 00:15:46.610 --> 00:15:48.850 to start thinking by yourself, 279 00:15:48.850 --> 00:15:52.090 how to implement this kind of functionality. 280 00:15:52.090 --> 00:15:55.893 So try that out and then let's move on to the next video.