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.
27018
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.