Original subtitles

1 1

Let's no continue a building our game 2

2

and actually implement the game logic itself. 3

3

And with game logic I basically mean implementing 4

4

the way how the game works. 5

5

So we need to implement what happens 6

6

when the guess is correct. 7

7

So when it's equal to the secret number, 8

8

we also need to implement 9

9

what happens when the guess is too low 10

10

or when it's too high. 11

11

So basically we have these three scenarios. 12

12

And to start we actually need to define that secret number. 13

13

Otherwise, there is nothing which we can compare 14

14

the guess to, all right? 15

15

Now, where do you think we should define that secret number? 16

16

Should we do it inside of this button handler 17

17

or should we do it outside? 18

18

Well, the answer is that we should do it outside 19

19

because we only want that secret number 20

20

to be defined once, so only when we start the application. 21

21

And so that's out here outside of the handler function. 22

22

If we define the secret number inside this handler function 23

23

then on each click, we would get a new secret number. 24

24

And so then the game would make no sense at all, all right? 25

25

We just need one number, which we can then compare 26

26

to each of the guesses this year on each click. 27

27

So let's define the number, 28

28

so I'm just gonna call it number here. 29

29

And now we need a random number between one and 20. 30

30

And this is actually pretty similar to the dice roll 31

31

that we did earlier in a fundamental section. 32

32

So we use math.random, 33

33

and so math is basically an object that JavaScript gives us, 34

34

and on there, we have a lot of different methods, 35

35

and random is one of them. 36

36

And it gives us a number between zero and one. 37

37

So let me show that to you. 38

38

So whenever I run this, it will give me a new number. 39

39

And it's always different from the one before. 40

40

Now if I want a number between one and 20, 41

41

I will start by multiplying this by 20. 42

42

And so now we have this decimal number here, 43

43

basically ranging between zero and 20. 44

44

But all this decimal here is just noise, 45

45

so let's removed that. 46

46

And for that, we use math.trunk. 47

47

And I'm doing all of this here in the console. 48

48

So you can see how this is building up, okay? 49

49

And so now I have a number which goes from zero to 19. 50

50

Because the result of this here will never really include 51

51

the number 20. 52

52

It might only include like 19.999999, 53

53

but now we're cutting off that decimal part. 54

54

And so we are now left with a number between zero and 19. 55

55

And so to elevate it to between one and 20, 56

56

all you have to do is to add one here. 57

57

And with this, we make sure that the number 58

58

is always between these two boundaries. 59

59

So let's grabbed is now, 60

60

so now that it works and put it here 61

61

and with is we have our secret number. 62

62

Now in the real game 63

63

the number will obviously be hidden. 64

64

So behind this question mark, 65

65

but now since we are still in development, 66

66

let's actually display the number here 67

67

so that we can then test our game logic as we develop it. 68

68

So let's select that number 69

69

and I think again we already did it before, 70

70

but let's do it here anyway again. 71

71

Adjust, so the class name is number 72

72

and then remember we use text content 73

73

and to set it, we simply use the equal sign. 74

74

And now what do we put here? 75

75

Well, just the number that we just calculated. 76

76

And now as I save it, watch what happens, 77

77

here we now have our random number. 78

78

And as I reload the page 79

79

you will see different random numbers appearing. 80

80

And again, for you of course, it will be different numbers. 81

81

And you see here 20, which is actually the maximum. 82

82

So this means that 20 is indeed included 83

83

in our range here. 84

84

Just to check if it's all right, 85

85

so if we don't see any weird numbers 86

86

but it all looks okay to me. 87

87

And so let's now move on and actually compare 88

88

the secret number to the users guess. 89

89

So here we already have the condition, 90

90

if there is no guess then just print 91

91

to the message element that there is no number. 92

92

So that's again, check that, 93

93

and indeed it works. 94

94

But now what if there actually is a guess? 95

95

So let's say Else-if, 96

96

and now we will actually check if the guess is the same 97

97

as the secret number. 98

98

And since I'm always saying secret number, 99

99

let's actually change the variable name. 100

100

So double click to select it, 101

101

and then I can double click on all of the instances 102

102

so that's this one and this one, 103

103

so that's a nice vs code trick. 104

104

And so now I have these three cursors. 105

105

So let's delete all of that secret number. 106

106

So the code works the same now 107

107

but the variable name makes a little bit more sense. 108

108

So let's create a code block here 109

109

and now we need to specify what happens 110

110

when the guess is correct. 111

111

So again, when the guess is the same as the secret number 112

112

that's essentially what the guess being means, all right? 113

113

So what should happen 114

114

then is that the correct number message should be displayed? 115

115

So let's copy that and put that here 116

116

and for now that's actually it. 117

117

So I'll just give it a safe now, 118

118

and so let's actually test this. 119

119

So five, which of course is different, 120

120

and then in the future we will want a message here saying 121

121

that the number is too high. 122

122

So we're gonna do that in a second. 123

123

But now let's just put the correct number here and indeed 124

124

we now get correct number. 125

125

So that's exactly what we defined here 126

126

in this Else-if block, all right? 127

127

So I hope all of that makes sense. 128

128

And now let's work on that scenario that I just mentioned 129

129

which is when the guess is greater than the number. 130

130

So you see that here in this big, 131

131

if else if her statement, 132

132

we are covering all the different scenarios 133

133

that might happen here to this number. 134

134

So the first one was the that there is no number 135

135

at all, right? 136

136

Then we checked if it's equal to the secret number, 137

137

and now we will check if it's greater. 138

138

So if the guess is greater than the secret number. 139

139

And then what would happen? 140

140

Well, let's again select the message .textcontent 141

141

and then let's say too high. 142

142

So the guess is too high now 143

143

and again adding an emoji here. 144

144

So I want this graph here, okay? 145

145

And now also, since we are working on this let's account 146

146

for the last situation or the last scenario as well 147

147

which is that the guess is lower than a secret number. 148

148

So guess below secret number, 149

149

and with this, we covered all the scenarios. 150

150

Let's just copy this one now, too low, 151

151

and now we're using the editor graph here, 152

152

give it a safe and let's test it. 153

153

So right now we know that it's at three, 154

154

so let's try at 12. 155

155

And so now we should see two high, and yes it works. 156

156

Now let's test one, which is too low and it works again. 157

157

And now let's test three, which is correct. 158

158

And indeed it's correct. 159

159

So that's working already. 160

160

Now let's move on to the next step 161

161

which is to work with a score here. 162

162

So remember that each time that we guess 163

163

a wrong number our score showed to decrease. 164

164

So let me show that to you again. 165

165

So let's say five and see how it starts at 20, 166

166

just like in our code, but now as I check wrong 167

167

so it's too high and now the score decreased to 19. 168

168

So let me check another one. 169

169

And so now you see that my number goes down each time 170

170

that I do a wrong guess. 171

171

And so let's implement that in our code here as well. 172

172

So as you see here, we start with a score of 20. 173

173

And now in these two scenarios where the guess is wrong, 174

174

so here where it's above and here where it's below. 175

175

We want to decrease that score by a one, all right? 176

176

Because again, each time that there is a wrong guess 177

177

the score should decrease by one. 178

178

So how should we do that? 179

179

And I can think of two ways of doing that. 180

180

The first way is to read the score from here, 181

181

then decrease it by one and then print it here again. 182

182

So that would be the first way of doing it, 183

183

but there is a better way. 184

184

And the better way is to actually create a variable 185

185

for the score in the code and then update that variable 186

186

so basically to decrease that variable 187

187

and then display the value 188

188

of that variable here in this score label. 189

189

And by doing that, we have our data also in the code 190

190

and not just on the DOM. 191

191

And so that's always a very good thing to do. 192

192

So let me do that now and then I will explain 193

193

it a little bit better. 194

194

So I'm gonna do that right here after the secret number, 195

195

so const score, and as you already know we start with 20. 196

196

And so that's our initial score. 197

197

So the value that we set to this variable. 198

198

And actually this should be a let, 199

199

because we will then decrease that value, remember. 200

200

And so it cannot be a const 201

201

because a constant is immutable. 202

202

Now, okay? 203

203

And now here let's go back 204

204

to the wrong guess scenario. 205

205

Our scenario was, because it's this one and this one 206

206

and then all we do is to decrease the score. 207

207

So score equal score minus one. 208

208

And maybe you already know, or hopefully you do, 209

209

that this is the same as writing, 210

210

score minus minus, all right? 211

211

So we decreased the score 212

212

and then all we have to do is to display 213

213

that score here in this element. 214

214

So once again, we already did that. 215

215

So no need to repeat. 216

216

So it's this one here. 217

217

So we select the element with the class of score 218

218

and then at the text content we give the score, all right? 219

219

And that's it. 220

220

Now we just need the same code 221

221

also in the other wrong scenario. 222

222

So where the guess is below the secret number. 223

223

So I'm just copying this code and putting it here, 224

224

give it a safe and a before testing it 225

225

let me again, explain what we just did here. 226

226

So as I said, we could have also stored 227

227

this score basically in the DOM. 228

228

And to do that we would always just read 229

229

this value from here. 230

230

So right from the DOM , then we could decrease that value 231

231

and then write it back here to the DOM 232

232

but then we would not have that value in our code. 233

233

So essentially our application would have no way 234

234

of knowing that score at all points. 235

235

And so it's always good to keep a variable 236

236

which actually holds the data in our code 237

237

and not just rely on the DOM to hold our data, all right? 238

238

And this variable here can also be called a state variable. 239

239

Because this score is part 240

240

of the so-called application state 241

241

which is basically all the data that is relevant 242

242

to the application. 243

243

And we could say that 17, 244

244

so the secret number is also part 245

245

of the state of our application, all right? 246

246

And so we want all the data always to be available 247

247

somewhere in our code and not just in the DOM , okay? 248

248

But always keep that in mind, 249

249

and so that is why we implemented a solution like this. 250

250

So whenever there's a wrong guess, 251

251

we just take the score that we already have in our code, 252

252

then we decrease it by one 253

253

and then we display that new score right here. 254

254

So let's reload, let's say 17. 255

255

And watch what happens to our score now. 256

256

And indeed it decreased to 19 and our number is too high. 257

257

And when I click again now, 258

258

you see it decreasing even more. 259

259

Now let's try with a lower number. 260

260

So too low and our score decreased again. 261

261

And actually let's keep going, 262

262

so let's keep clicking here and watch what happens. 263

263

So I'm clicking over and over on the same button here 264

264

and the score keeps going down and eventually we reach zero. 265

265

And at this point 266

266

we should basically lose the game, all right? 267

267

But as you see here, nothing of course happens. 268

268

And we can keep clicking here and go until affinity 269

269

and our program we'll of course not care. 270

270

Because our program obviously has no idea of losing 271

271

or of winning the game, all right? 272

272

It is completely on us to write all that logic. 273

273

So basically what this means 274

274

is that all of this checking here, 275

275

so doing all this here should only happen whenever the score 276

276

is still above zero. 277

277

And then when the score is actually zero, 278

278

then we should get some kind of message here saying 279

279

that we lost the game. 280

280

So let's quickly do that here, inside of this scenario. 281

281

So basically we need another if statement here inside 282

282

this already Else-if block. 283

283

And that's of course not a problem at all. 284

284

We can perfectly have one if inside of the other. 285

285

So what I was just saying is that this here, 286

286

all of this should basically only happen 287

287

while the score is still above zero. 288

288

So let's do that. 289

289

So if score is above zero 290

290

only then do all of this, all right. 291

291

And now Else, so basically if it is zero, 292

292

then we want to display another message. 293

293

So we want to say you lost the game with some losing emoji. 294

294

So I'm gonna use this one here, 295

295

so that's an explosion I believe. 296

296

So let's test that now. 297

297

And we only implement this for when the guess 298

298

is above the secret number. 299

299

So let's now use 12, it's too high 300

300

and now let's keep going to test what happens. 301

301

So we are approaching it now 302

302

and now we lost the game. 303

303

But actually I could click twice 304

304

as my score was already zero. 305

305

So try this for yourself, I will just reload here, 306

306

and again put a number that is above. 307

307

So now the score is one and as I click, 308

308

we should get a message you lost the game. 309

309

So let's try and it didn't happen yet. 310

310

And it did not happen because the score 311

311

was indeed still a greater than zero here, all right? 312

312

So we need to change that to greater than one, okay? 313

313

So again, a larger number. 314

314

Now I get one and if I click now you lost the game. 315

315

And all we need to do is to update the score to zero here. 316

316

So let's just copy this, write zero, 317

317

and then before we test it we can actually copy 318

318

the same code to this other scenario. 319

319

Now, as you can see, we are creating a lot of duplicate code 320

320

and we will fix that by the end of this project. 321

321

But for now, let's just keep working on this. 322

322

And the only thing that really changes here is this message. 323

323

So you'll see that here is some potential 324

324

to eliminate duplicate code. 325

325

But again we will take care of later off that, 326

326

for now let's just make it work, okay? 327

327

And with this I think we're actually finished. 328

328

Let's just test it. 329

329

So five is too low, 330

330

so let's keep going down and you lost a game, great. 331

331

Now let's test a larger number 332

332

and I keep clicking here and now we lost the game too. 333

333

Great, so our game logic is already working 334

334

and actually the game itself 335

335

is also kind of working already. 336

336

There's just two things that are missing here 337

337

which is the high score and this play again button. 338

338

But before implementing that functionality, 339

339

in the next video we're gonna talk 340

340

a little bit about CSS 341

341

and how we can manipulate styles using JavaScript.