Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,310 --> 00:00:02,320
In this video,
2
2
00:00:02,320 --> 00:00:06,820
we will actually start implementing our games functionality,
3
3
00:00:06,820 --> 00:00:09,990
and we will start with the most important functionality,
4
4
00:00:09,990 --> 00:00:11,913
which is rolling the dice.
5
5
00:00:13,500 --> 00:00:18,370
And let's start with another look at our flowchart here.
6
6
00:00:18,370 --> 00:00:22,260
So that's why I included it in the starter files.
7
7
00:00:22,260 --> 00:00:24,530
So when the user roles a dice,
8
8
00:00:24,530 --> 00:00:28,150
we want to first generate a random dice roll,
9
9
00:00:28,150 --> 00:00:32,730
then display it and then check whether it is a one or not.
10
10
00:00:32,730 --> 00:00:36,880
And if it's not, we add that dice roll to the current score,
11
11
00:00:36,880 --> 00:00:40,580
and if it is a one we go to the next player.
12
12
00:00:40,580 --> 00:00:41,900
And maybe you're noticing
13
13
00:00:41,900 --> 00:00:45,830
that having or building a flow chart like this
14
14
00:00:45,830 --> 00:00:50,010
is pretty similar to actually dividing the big problem down
15
15
00:00:50,010 --> 00:00:52,580
into smaller sub problems.
16
16
00:00:52,580 --> 00:00:55,250
So essentially, all these squares that we have here
17
17
00:00:55,250 --> 00:00:57,010
on the flow chart are like
18
18
00:00:57,010 --> 00:00:59,240
the sub problems that we now need to go
19
19
00:00:59,240 --> 00:01:01,180
ahead and implement.
20
20
00:01:01,180 --> 00:01:04,570
So again, for a bigger application like this one,
21
21
00:01:04,570 --> 00:01:08,590
it's a very good idea to draw a flow chart like this,
22
22
00:01:08,590 --> 00:01:12,460
along with the process of solving problems that I taught you
23
23
00:01:12,460 --> 00:01:14,210
in the previous section.
24
24
00:01:14,210 --> 00:01:17,020
So use all of these methods that I showed you together
25
25
00:01:17,020 --> 00:01:19,100
whenever you need to solve a problem,
26
26
00:01:19,100 --> 00:01:23,530
because in the end, building a project like this is also
27
27
00:01:23,530 --> 00:01:25,290
simply solving a problem.
28
28
00:01:25,290 --> 00:01:27,970
So you know how the project is supposed to work,
29
29
00:01:27,970 --> 00:01:29,620
but then the problem is
30
30
00:01:29,620 --> 00:01:32,620
to essentially implement it yourself.
31
31
00:01:32,620 --> 00:01:35,240
And so you need to divide that big problem
32
32
00:01:35,240 --> 00:01:37,100
that can seem very scary
33
33
00:01:37,100 --> 00:01:38,960
into smaller problems that will then
34
34
00:01:38,960 --> 00:01:41,090
be easy to implement.
35
35
00:01:41,090 --> 00:01:43,220
And as we move through this project,
36
36
00:01:43,220 --> 00:01:47,230
you will see that it's not so scary after all.
37
37
00:01:47,230 --> 00:01:48,690
And with that being said,
38
38
00:01:48,690 --> 00:01:52,580
let's now also see this part of the flowchart in action
39
39
00:01:52,580 --> 00:01:54,880
in the real application.
40
40
00:01:54,880 --> 00:01:58,130
So this is a little bit less abstract.
41
41
00:01:58,130 --> 00:02:01,880
So we roll the dice and now we rolled a one.
42
42
00:02:01,880 --> 00:02:03,720
So let's just do it again.
43
43
00:02:03,720 --> 00:02:07,260
Let me reload the game as if it was a new game.
44
44
00:02:07,260 --> 00:02:10,300
So we roll the dice, we roll a number.
45
45
00:02:10,300 --> 00:02:12,290
So we generate a random number
46
46
00:02:12,290 --> 00:02:15,460
and then display the dice accordingly,
47
47
00:02:15,460 --> 00:02:18,193
and then we add that score down here.
48
48
00:02:19,570 --> 00:02:22,460
Again, and now we actually rolled a one.
49
49
00:02:22,460 --> 00:02:25,600
And so we moved on to the next player.
50
50
00:02:25,600 --> 00:02:26,433
Okay.
51
51
00:02:27,450 --> 00:02:31,340
So that's what I just explained before using the flowchart,
52
52
00:02:31,340 --> 00:02:34,610
but seeing it in action is a bit easier.
53
53
00:02:34,610 --> 00:02:38,800
So we want to react to clicking that roll button.
54
54
00:02:38,800 --> 00:02:42,440
So we need to select that button element and then
55
55
00:02:42,440 --> 00:02:45,683
add an event listener or an event handler.
56
56
00:02:48,220 --> 00:02:52,360
So here we have our three buttons and actually
57
57
00:02:52,360 --> 00:02:54,720
let's select all of them.
58
58
00:02:54,720 --> 00:02:57,310
So we will need them anyway later.
59
59
00:02:57,310 --> 00:03:02,310
So that's button new, button roll and button--hold.
60
60
00:03:06,210 --> 00:03:10,020
So const button new
61
61
00:03:11,210 --> 00:03:14,847
is document.querySelector.btn,
62
62
00:03:18,976 --> 00:03:21,163
and then two dashes new.
63
63
00:03:22,680 --> 00:03:24,993
And now I will just duplicate this line here.
64
64
00:03:28,570 --> 00:03:32,060
So that's button roll
65
65
00:03:33,690 --> 00:03:36,493
and here also roll and then hold.
66
66
00:03:42,400 --> 00:03:45,830
So let's just confirm new roll and hold
67
67
00:03:45,830 --> 00:03:48,833
and indeed new roll and hold.
68
68
00:03:50,000 --> 00:03:52,270
So that's gonna work just fine.
69
69
00:03:52,270 --> 00:03:54,398
And now let's implement here
70
70
00:03:54,398 --> 00:03:56,981
the rolling dice functionality.
71
71
00:04:02,547 --> 00:04:05,890
So for that we take the roll button.
72
72
00:04:05,890 --> 00:04:08,110
So that's button roll.
73
73
00:04:08,110 --> 00:04:12,990
And then as always, when we want to react to an event,
74
74
00:04:12,990 --> 00:04:15,210
which in this case is going to be a click,
75
75
00:04:15,210 --> 00:04:17,713
we use the add event listener method.
76
76
00:04:19,130 --> 00:04:21,582
Then the name of the event, and then,
77
77
00:04:21,582 --> 00:04:23,773
our handler function right here.
78
78
00:04:24,640 --> 00:04:27,090
And since we will not reuse this function,
79
79
00:04:27,090 --> 00:04:30,390
I can simply write it here directly.
80
80
00:04:30,390 --> 00:04:32,820
So let's now write some comments before
81
81
00:04:32,820 --> 00:04:34,250
we actually write the code,
82
82
00:04:34,250 --> 00:04:38,090
because that is very helpful in knowing what we should do.
83
83
00:04:38,090 --> 00:04:41,920
So we already know that we need to start by generating
84
84
00:04:41,920 --> 00:04:46,093
a random dice roll.
85
85
00:04:47,380 --> 00:04:50,740
Then we display the dice
86
86
00:04:53,022 --> 00:04:57,623
and then we check for a roll to one basically,
87
87
00:04:58,710 --> 00:04:59,673
and if true,
88
88
00:05:01,740 --> 00:05:06,660
switch to next player now.
89
89
00:05:06,660 --> 00:05:10,943
So that's exactly what we have in the flowchart as well.
90
90
00:05:12,200 --> 00:05:14,210
So let's start here.
91
91
00:05:14,210 --> 00:05:17,440
So let's create simply a dice variable.
92
92
00:05:17,440 --> 00:05:21,530
And so that's why now we have dice L here for the element
93
93
00:05:21,530 --> 00:05:24,320
and then dice for the number itself.
94
94
00:05:24,320 --> 00:05:28,160
And this variable here needs to be not a global variable.
95
95
00:05:28,160 --> 00:05:30,290
So not a variable outside here,
96
96
00:05:30,290 --> 00:05:33,010
because each time that we roll the dice,
97
97
00:05:33,010 --> 00:05:35,300
we want to generate a new number.
98
98
00:05:35,300 --> 00:05:37,803
And so let's simply define that variable here.
99
99
00:05:39,150 --> 00:05:43,170
And now we create this random dice roll just as before.
100
100
00:05:43,170 --> 00:05:46,570
So math.random,
101
101
00:05:46,570 --> 00:05:50,990
which creates a number between zero and 0.9999.
102
102
00:05:52,050 --> 00:05:55,423
So almost one, multiply that by six.
103
103
00:05:56,900 --> 00:05:58,870
Then we truncate all of this.
104
104
00:05:58,870 --> 00:06:01,560
So we removed the decimal part.
105
105
00:06:01,560 --> 00:06:03,993
So that's math.trunc.
106
106
00:06:06,030 --> 00:06:09,960
So basically we pass in the results of all of this,
107
107
00:06:09,960 --> 00:06:12,390
into this math.trunc function.
108
108
00:06:12,390 --> 00:06:13,800
And so this will then give us a number
109
109
00:06:13,800 --> 00:06:15,780
between zero and five.
110
110
00:06:15,780 --> 00:06:20,650
And so we just add one to elevate that to one to six.
111
111
00:06:20,650 --> 00:06:23,440
So that's similar to what we did before
112
112
00:06:23,440 --> 00:06:26,323
and now we just need to display this dice.
113
113
00:06:27,200 --> 00:06:29,080
Now, the first thing that we need to do
114
114
00:06:29,080 --> 00:06:30,900
is to actually remove
115
115
00:06:30,900 --> 00:06:34,280
the hidden class. So remember in the starting conditions,
116
116
00:06:34,280 --> 00:06:38,220
we hit the dice by adding the hidden class.
117
117
00:06:38,220 --> 00:06:41,230
And so now the first thing is to remove that.
118
118
00:06:41,230 --> 00:06:46,230
So the diceEl.classList.remove.
119
119
00:06:49,660 --> 00:06:53,340
So just like in the last project and now comes
120
120
00:06:53,340 --> 00:06:55,330
the interesting part.
121
121
00:06:55,330 --> 00:06:58,120
So we know that the dice will be a number
122
122
00:06:58,120 --> 00:07:00,363
between one and six.
123
123
00:07:01,380 --> 00:07:03,220
And now, according to these numbers,
124
124
00:07:03,220 --> 00:07:07,060
we want to display one of these images that we have here.
125
125
00:07:07,060 --> 00:07:10,530
So you see that we have dice dash one dash two, three, four,
126
126
00:07:10,530 --> 00:07:12,230
five and six.
127
127
00:07:12,230 --> 00:07:15,920
And so now we want to use this dice number here, two,
128
128
00:07:15,920 --> 00:07:18,830
according to that number display one of the images
129
129
00:07:19,680 --> 00:07:22,540
and that's actually not hard to do.
130
130
00:07:22,540 --> 00:07:26,193
So let me show you how it looks like in the HTML now.
131
131
00:07:27,656 --> 00:07:30,950
So you'll see that right now,
132
132
00:07:30,950 --> 00:07:35,570
the source of the image is dice-5.png.
133
133
00:07:35,570 --> 00:07:37,450
And if you know some HTML, you know
134
134
00:07:37,450 --> 00:07:41,930
that the source attribute here is how we define which image
135
135
00:07:41,930 --> 00:07:43,730
should be displayed.
136
136
00:07:43,730 --> 00:07:45,520
And we can now actually change.
137
137
00:07:45,520 --> 00:07:50,150
We can manipulate this source attribute from our JavaScript.
138
138
00:07:50,150 --> 00:07:52,670
And so that's the trick that we will use to display
139
139
00:07:52,670 --> 00:07:56,233
the image, according to the rolled dice number.
140
140
00:07:57,750 --> 00:08:01,490
So let's again, take the dice element.
141
141
00:08:01,490 --> 00:08:03,700
And then here, there is a new thing.
142
142
00:08:03,700 --> 00:08:06,400
So now we can use the source property.
143
143
00:08:06,400 --> 00:08:11,060
So SRC just like it is called in the HTML,
144
144
00:08:11,060 --> 00:08:14,430
and now we can set it to a string and that string will then
145
145
00:08:14,430 --> 00:08:16,860
be the name of the image displayed.
146
146
00:08:16,860 --> 00:08:19,070
So let's use a template literal,
147
147
00:08:19,070 --> 00:08:23,130
and then we write, dice dash
148
148
00:08:23,130 --> 00:08:24,390
because that's basically
149
149
00:08:24,390 --> 00:08:28,610
the common name in all of these image names.
150
150
00:08:28,610 --> 00:08:33,610
And then here we use the dicenumber.png.
151
151
00:08:35,950 --> 00:08:36,970
And so with this,
152
152
00:08:36,970 --> 00:08:40,610
we can dynamically load one of these six images here,
153
153
00:08:40,610 --> 00:08:43,590
depending on the random rolled dice.
154
154
00:08:43,590 --> 00:08:46,660
So let's give it a safe and let's give it a try
155
155
00:08:46,660 --> 00:08:49,233
because this part should already be working now.
156
156
00:08:50,710 --> 00:08:51,733
So let's see.
157
157
00:08:53,520 --> 00:08:55,770
And indeed, we get this three.
158
158
00:08:55,770 --> 00:08:58,930
Let's actually also look to the console for now,
159
159
00:08:58,930 --> 00:09:00,560
this random number, just so
160
160
00:09:00,560 --> 00:09:02,880
we see that the dice is actually
161
161
00:09:02,880 --> 00:09:05,543
the corresponding one to the number.
162
162
00:09:08,120 --> 00:09:09,090
So let's go back
163
163
00:09:12,680 --> 00:09:14,240
here to the console,
164
164
00:09:14,240 --> 00:09:15,310
make it a bit smaller
165
165
00:09:18,120 --> 00:09:22,720
and now let's roll the dice and it works, great.
166
166
00:09:22,720 --> 00:09:24,370
So we get a two.
167
167
00:09:24,370 --> 00:09:27,680
And so indeed a two is also displayed here.
168
168
00:09:27,680 --> 00:09:29,940
Now six and six here.
169
169
00:09:31,010 --> 00:09:34,170
And let's just see if we get all the numbers, but yeah,
170
170
00:09:34,170 --> 00:09:37,923
we get the one and we already saw the six happening as well.
171
171
00:09:39,110 --> 00:09:43,450
So that means that our code is correct. Great.
172
172
00:09:43,450 --> 00:09:44,283
And now all that we have to do is to keep adding
173
173
00:09:44,283 --> 00:09:49,103
to roll dice to the current score.
174
174
00:09:51,040 --> 00:09:52,910
And so that's what we will do here
175
175
00:09:54,000 --> 00:09:56,703
in this case where we check for the rolled one.
176
176
00:09:58,170 --> 00:10:03,170
So remember that only happens when the number is not a one.
177
177
00:10:03,430 --> 00:10:07,380
So again, if it's a one, switch player, if no,
178
178
00:10:07,380 --> 00:10:10,373
then add the dice roll to the current score.
179
179
00:10:12,370 --> 00:10:14,510
So basically let's test here.
180
180
00:10:14,510 --> 00:10:16,420
If the dice
181
181
00:10:17,470 --> 00:10:19,653
is not one,
182
182
00:10:22,210 --> 00:10:25,500
because this is our main case.
183
183
00:10:25,500 --> 00:10:27,650
So the one that we're mostly interested in,
184
184
00:10:29,320 --> 00:10:30,690
and then, our else block,
185
185
00:10:30,690 --> 00:10:34,520
which will be basically in case that dice is a one.
186
186
00:10:34,520 --> 00:10:37,853
So let's just grab that here.
187
187
00:10:43,270 --> 00:10:45,520
So here we want to switch to the next player,
188
188
00:10:46,720 --> 00:10:47,950
but if it's not one,
189
189
00:10:47,950 --> 00:10:49,570
then we want to add
190
190
00:10:51,306 --> 00:10:55,043
the dice to the current score.
191
191
00:10:57,090 --> 00:10:59,450
So let's do this part here.
192
192
00:10:59,450 --> 00:11:03,230
And in order to actually be able to add the current dice
193
193
00:11:03,230 --> 00:11:04,570
to the current score,
194
194
00:11:04,570 --> 00:11:08,083
we need a way of saving that current score somewhere.
195
195
00:11:09,280 --> 00:11:12,470
So remember from the first project that we should not just
196
196
00:11:12,470 --> 00:11:15,113
store any data only in the dumb.
197
197
00:11:16,090 --> 00:11:17,820
So in this particular case,
198
198
00:11:17,820 --> 00:11:20,880
we should not only display this current score
199
199
00:11:20,880 --> 00:11:22,700
on the user interface.
200
200
00:11:22,700 --> 00:11:25,350
Instead, we also want the variable in our code,
201
201
00:11:25,350 --> 00:11:29,203
which always holds the current score of this current round.
202
202
00:11:30,447 --> 00:11:33,980
So we need to define a variable for that.
203
203
00:11:33,980 --> 00:11:36,850
And where do you think we should do that?
204
204
00:11:36,850 --> 00:11:40,300
Well, it is certainly not in this function,
205
205
00:11:40,300 --> 00:11:43,700
so not in this handler function, because if we did that,
206
206
00:11:43,700 --> 00:11:46,690
then each time that we roll a dice,
207
207
00:11:46,690 --> 00:11:48,620
the current score would be reset it.
208
208
00:11:48,620 --> 00:11:51,320
So it would be redefined because this function here
209
209
00:11:51,320 --> 00:11:53,480
is called over and over again,
210
210
00:11:53,480 --> 00:11:56,110
each time that the button is clicked.
211
211
00:11:56,110 --> 00:12:01,110
So if we wanted to basically persist that value,
212
212
00:12:01,120 --> 00:12:03,060
so if it should keep existing,
213
213
00:12:03,060 --> 00:12:06,850
then it needs to be outside here in the main program.
214
214
00:12:06,850 --> 00:12:08,713
So let's call this one current score.
215
215
00:12:11,150 --> 00:12:15,090
And we started at zero and it needs to be a let
216
216
00:12:15,090 --> 00:12:17,403
because we will keep updating it.
217
217
00:12:18,480 --> 00:12:21,670
So again, this cannot be inside
218
218
00:12:21,670 --> 00:12:24,060
of this function because then it would
219
219
00:12:24,060 --> 00:12:27,760
be set to zero each time that we clicked the button.
220
220
00:12:27,760 --> 00:12:30,163
And so therefore it needs to be outside.
221
221
00:12:32,000 --> 00:12:34,600
Okay. And now we say,
222
222
00:12:34,600 --> 00:12:37,360
current score is equal
223
223
00:12:37,360 --> 00:12:42,360
to current score plus the dice.
224
224
00:12:42,550 --> 00:12:46,284
And once again, there is a shortcut operator,
225
225
00:12:46,284 --> 00:12:49,880
for repeating this variable here. So instead of this,
226
226
00:12:49,880 --> 00:12:54,603
we can just write, current score plus equal the dice.
227
227
00:12:55,710 --> 00:12:57,390
So that's exactly the same,
228
228
00:12:57,390 --> 00:13:00,420
but it's a little bit faster to write.
229
229
00:13:00,420 --> 00:13:03,440
And now all we need to do is to display the score
230
230
00:13:03,440 --> 00:13:05,490
on the current player.
231
231
00:13:05,490 --> 00:13:06,470
Now, at this point,
232
232
00:13:06,470 --> 00:13:09,140
we will just display it on player one to make it
233
233
00:13:09,140 --> 00:13:11,180
a little bit simpler, but in the future,
234
234
00:13:11,180 --> 00:13:12,810
we will need to keep track
235
235
00:13:12,810 --> 00:13:15,510
of which player is the active player.
236
236
00:13:15,510 --> 00:13:18,460
So that we will do in the next lecture. But again,
237
237
00:13:18,460 --> 00:13:22,163
for now, let's just display the score on player one.
238
238
00:13:23,190 --> 00:13:25,980
So let's select the score
239
239
00:13:25,980 --> 00:13:27,933
or the current score for player one.
240
240
00:13:28,810 --> 00:13:31,420
So let's check where that is scored,
241
241
00:13:31,420 --> 00:13:36,420
and it is right here with this ID, dash dash one
242
242
00:13:36,510 --> 00:13:37,963
and dash dash zero.
243
243
00:13:39,000 --> 00:13:41,020
So let's actually copy that
244
244
00:13:41,020 --> 00:13:45,490
and then I will select both of these elements up here.
245
245
00:13:48,810 --> 00:13:51,270
So let's do that below this one.
246
246
00:13:51,270 --> 00:13:54,403
And actually I will keep using get element by ID now.
247
247
00:13:55,980 --> 00:14:00,463
So current zero, and then again, element,
248
248
00:14:03,530 --> 00:14:06,790
get element by ID and then
249
249
00:14:06,790 --> 00:14:10,500
just the class name again
250
250
00:14:10,500 --> 00:14:13,480
without the hash symbol there.
251
251
00:14:13,480 --> 00:14:15,120
And then current
252
252
00:14:17,070 --> 00:14:21,580
one element is document.getElement,
253
253
00:14:23,730 --> 00:14:26,523
and then current one.
254
254
00:14:27,910 --> 00:14:31,080
Okay. And so now let's use this one.
255
255
00:14:31,080 --> 00:14:33,105
So let me copy it,
256
256
00:14:33,105 --> 00:14:38,105
.textcontent equals of course
257
257
00:14:40,030 --> 00:14:43,163
the current score that we just defined previously.
258
258
00:14:45,000 --> 00:14:49,510
And let me just add a note here, change later,
259
259
00:14:49,510 --> 00:14:50,840
because in the future,
260
260
00:14:50,840 --> 00:14:53,930
we will need to display this current score
261
261
00:14:53,930 --> 00:14:55,400
at the current player
262
262
00:14:55,400 --> 00:14:58,500
and to not always add player number zero
263
263
00:14:58,500 --> 00:14:59,733
or player number one.
264
264
00:15:00,750 --> 00:15:04,480
But for now, we just want to make this functionality work.
265
265
00:15:04,480 --> 00:15:07,180
So let's just test it out for now.
266
266
00:15:07,180 --> 00:15:08,900
So roll dice four,
267
267
00:15:08,900 --> 00:15:12,650
and you'll see that it added the four to the zero,
268
268
00:15:12,650 --> 00:15:15,410
and now three plus four is seven.
269
269
00:15:15,410 --> 00:15:16,863
And so it works.
270
270
00:15:23,800 --> 00:15:26,950
And now that we rolled a one, nothing happened.
271
271
00:15:26,950 --> 00:15:30,580
So in this situation, we want to move to the next player.
272
272
00:15:30,580 --> 00:15:32,860
So basically switching the player.
273
273
00:15:32,860 --> 00:15:36,590
And so that's gonna be this else branch, but this one,
274
274
00:15:36,590 --> 00:15:39,230
I will leave for the next lecture because
275
275
00:15:39,230 --> 00:15:41,540
this involves doing a lot of stuff.
276
276
00:15:41,540 --> 00:15:43,980
So maybe you can think about what we need to do,
277
277
00:15:43,980 --> 00:15:46,610
because that would be a good opportunity for you
278
278
00:15:46,610 --> 00:15:48,850
to start thinking by yourself,
279
279
00:15:48,850 --> 00:15:52,090
how to implement this kind of functionality.
280
280
00:15:52,090 --> 00:15:55,893
So try that out and then let's move on to the next video.
24063
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.