Original subtitles

1 1

And now let's implement 2

2

a feature of a player holding the current score. 3

3

And let's again, look at or flow chart here. 4

4

And once again, this flow chart 5

5

basically represents the division of or big problem, 6

6

which is to implement this game into smaller problems, 7

7

which are all of these green, basically sub problems here. 8

8

Now, what we are going to implement is 9

9

the functionality of holding the score. 10

10

And remember that happens 11

11

whenever the user clicks on that button to hold the score. 12

12

So when that happened, 13

13

we want to add the current score to the total score, right? 14

14

So let's see that in the demo version here. 15

15

So I'm reloading here, 16

16

but then as I roll the dice, 17

17

let's roll it again. 18

18

So I have eight current points, 19

19

and as I click hold, you see that these points will 20

20

basically be transferred to my global score. 21

21

So in this case, zero plus eight will then be eight 22

22

and then we change to the next player. 23

23

And so that's exactly what we have here 24

24

in the flow chart, followed by switching the player. 25

25

Now, this switching of player only happens 26

26

when the score is still below 100, 27

27

because when the score is at least 100, 28

28

the current player wins. 29

29

Okay. 30

30

And so now let's implement 31

31

basically this logic that we have here. 32

32

Okay. 33

33

So we want something to happen 34

34

when the user clicks on this hold button. 35

35

So button hold, right? 36

36

So let's take that and add an event handler. 37

37

So buttonhold.addevent listener 38

38

once more on the click, and then once more, 39

39

our function value here, 40

40

the function that will be executed 41

41

as the user clicks the button. 42

42

And so let's again write some comments 43

43

to say what we want to happen here. 44

44

First add current score to the score of the active player. 45

45

So active players score 46

46

and then check score is already at least 100. 47

47

And if so, then basically finish the game 48

48

and if not, then switch to the next player. 49

49

All right. 50

50

So now we want to define the current player score. 51

51

And remember how I told you in the last lecture 52

52

that to store the scores we are using this scores variable, 53

53

and this score is variable is this array, 54

54

which at the same time holds the score 55

55

of player zero and player one. 56

56

So players zero at position zero 57

57

and player one at position one. 58

58

And so now we can use the active player variable 59

59

to get the correct score of the current player. 60

60

So scores at position active player. 61

61

So that's what I just explained, 62

62

will be equal that score plus the current score. 63

63

So we say plus equal the current score. 64

64

So again, when it's player one, 65

65

then this will be scores one, 66

66

but when player is zero, 67

67

then it will be scores zero. 68

68

And then we take that value and add the current score to it 69

69

and assign it again to scores at the current active player. 70

70

So just to make it 100% clear, 71

71

if player is currently one then this would be this 72

72

okay. 73

73

So scores at one is equal to scores 74

74

at one plus the current score. 75

75

So I'm just gonna leave it here as a comment 76

76

so that you really understand what's happening here. 77

77

So we changed that score 78

78

and now we of course need to display it as well. 79

79

And so now we will do it in a similar way 80

80

to, as we did up here 81

81

where we basically selected based on the active player. 82

82

So document.get element by ID. 83

83

And now let's just check out again the name of the element. 84

84

So that's score zero and score one. 85

85

So these are the IDs 86

86

and again, we will replace zero or one here dynamically. 87

87

So again, a template string, 88

88

current and then here the active player. 89

89

So when it's player zero, it will be current zero. 90

90

And so that first score will be selected. 91

91

And when it's player one, 92

92

well, then the other element will get selected. 93

93

And then we can set the text content 94

94

to the score of the active player. 95

95

So scores, active player, give it a safe. 96

96

And so now, or game should almost be finished. 97

97

We will able to play it basically until infinity, 98

98

but it would work, 99

99

but actually it would not yet work 100

100

because we haven't yet switched to the next player here. 101

101

So right now, as we hold the score, we are not switching. 102

102

So we are not checking if the score is greater than 100, 103

103

but we are also not switching. 104

104

And so let's leave that checking if the score is 100. 105

105

So basically checking if the player won the game, 106

106

let's leave that for the end. 107

107

And for now let's just switch to the next player 108

108

because usually that is what needs to happen. 109

109

So switching to the next player is this code. 110

110

So it's going to be the exact same thing. 111

111

We still need to reset the current score to zero here, 112

112

both in or program, and also on the user interface, 113

113

which is what we do here. 114

114

We need to switch the player from zero to one 115

115

or from one to zero, 116

116

and we need to toggle the player active classes 117

117

to show which player is the active one. 118

118

So all of this code here. 119

119

We will need it again down here. 120

120

So should I just go ahead and copy it now? 121

121

And I hope that you already know the answer for that. 122

122

So that would violate the don't repeat yourself principle. 123

123

And so what I'm going to do is to simply take this code 124

124

and put it into a function. 125

125

And then I will call that function in both the places 126

126

where I need this code to execute. 127

127

So I am cutting the code now here, 128

128

and then up here, I will create a function. 129

129

So I'm gonna call this one switch player 130

130

equals a function 131

131

and dysfunction does not need any argument at all, 132

132

or any parameter 133

133

because the code is exactly the same in both situations. 134

134

So usually when we are refactoring something 135

135

like we are essentially doing here, 136

136

then there is many times like a small thing 137

137

that changes in the code. 138

138

And then it's very useful to have a parameter 139

139

so that when we call the function, 140

140

we can specify what changes. 141

141

So that's what we did when we refactored 142

142

some code in the first project, 143

143

but here nothing changes. 144

144

All we want to do is to simply repeat this code. 145

145

And so we don't need any parameters 146

146

and we don't need to return anything. 147

147

This is simply just a reusable piece of code. 148

148

And so let's call that here, 149

149

switch player, call it here and call it here. 150

150

And again, we will then put this in the FL statement later, 151

151

once we check for the score 152

152

to check if the player has won, 153

153

but now we just want to make the game work. 154

154

And so of course, after we hold the score, 155

155

we need to switch to the next player. 156

156

So exactly as it says here in or flow chart, 157

157

except that we're now skipping for now this part. 158

158

So we're going from add current score 159

159

to total score directly to switch player. 160

160

Okay. 161

161

And so now we should be ready to test our own version here. 162

162

So, now I have six let's hold it and okay, 163

163

something went wrong here indeed, 164

164

because our score is still at zero 165

165

and that should not be happening. 166

166

So let's check it out 167

167

and let's start by adding a console.log here, 168

168

just to see if we are actually catching this event. 169

169

So if we are handling it correctly, 170

170

so hold button. 171

171

So as I mentioned in the previous section, 172

172

we really use console.log all the time 173

173

to debug any kind of situation. 174

174

And it could have just erased this part of the video showing 175

175

you just to find a solution. 176

176

But I think it's a good idea to show you 177

177

the debugging process right here in the video as well. 178

178

So let's play and let's hold. 179

179

And so we got the hold button here. 180

180

So something worked 181

181

and actually, yeah, 182

182

also the background color changed sides here 183

183

and the current score was erased. 184

184

So we already knew 185

185

actually that something was indeed happening, 186

186

but let's not actually find out what is going on here. 187

187

And so now I want to log this value. 188

188

Okay. 189

189

So I'm basically now logging the score off the active player 190

190

and let me actually do that after I assigned it. 191

191

So after we changed it, 192

192

I will want to take a look at it in the console. 193

193

Maybe only problem is 194

194

that it's not showing up in the element. 195

195

So as the text content, 196

196

but maybe the score itself is correct. 197

197

And then we can see it in the console. 198

198

So let's play again. 199

199

And we already changed the player 200

200

and now I hold and indeed here we get nine. 201

201

So that's the score that we had before. 202

202

Let me show that to you again and reload. 203

203

So I rolled the dice three now I have eight 204

204

and watch what happens in the console 205

205

as I click hold. 206

206

And so indeed I get to the value of eight, 207

207

which means that the score is actually correctly calculated. 208

208

Now I just need to fix the part 209

209

where it is not displaying here in this element. 210

210

So here I selected current. 211

211

So let me see. 212

212

Oh, and yeah, that is of course the problem 213

213

it needs to be score. 214

214

So it's score zero and score one, 215

215

not current zero and current one. 216

216

So that was the mistake. 217

217

So here is score. 218

218

And now we can get rid of this console.log 219

219

and actually also have the other one that we have 220

220

with the dice roll. 221

221

So just make the code a bit better. 222

222

Now I can close it up, roll the dice, 223

223

and now as I hold, that should appear there, 224

224

the number four and yes, and now it works. 225

225

Great. 226

226

So let's play here a little bit. 227

227

So now we accumulated 13 points, 228

228

so let's hold them and to end up with 17 229

229

and indeed that works. 230

230

Now let's hold these four. 231

231

And so I think this game is really a lot of fun to play, 232

232

especially if you try it with someone else, 233

233

which I actually did a couple of times 234

234

as I was preparing this game, 235

235

and I can tell you that it's really fun, 236

236

but now let's actually get 237

237

to the final part of this lecture, 238

238

which is to check if someone reached 239

239

the final goal of 100 points. 240

240

And so if that happens, the game is over 241

241

and we should not be able 242

242

to click any of the buttons anymore. 243

243

And we also want to assign a special class 244

244

to the winner player to make it really obvious 245

245

that player has won. 246

246

Okay. 247

247

So that's add that check now. 248

248

And so that shouldn't be too hard. 249

249

So if scores add active player, 250

250

so remember that is always here the score 251

251

of the player that is currently active. 252

252

So if that is greater or equal than 100, the player has won. 253

253

So this is where we finish the game. 254

254

So when we finished the game, 255

255

we want to assign a player winner class. 256

256

And let me show that to you here in the CSS. 257

257

So yeah, it's this one, player a winner, 258

258

which has this darker background color. 259

259

So let me copy that, 260

260

paste that here and now let then select actually the player. 261

261

So document.query selector, 262

262

and let's again, take a look at the code here 263

263

just to, we don't make any mistakes. 264

264

And to the player is really a class player dash dash 265

265

and then the number of the active player. 266

266

So that is player dash dash 267

267

and active player. 268

268

And then onto this element, 269

269

we want to take the class list 270

270

and add this class name that we just copied from or CSS. 271

271

And then we also want to remove the active player class. 272

272

Okay. 273

273

So where is that? 274

274

Yeah, so when we switch the player, 275

275

we turn on this player active, right? 276

276

But now we then need to remove that 277

277

because otherwise we will have the active player class 278

278

at the same time as the player winner class. 279

279

So let's fix that, 280

280

but we simply need to select the same element again. 281

281

And then here we remove player active. 282

282

Okay. 283

283

I hope that made sense. 284

284

And now let's test it and to make it a little bit faster, 285

285

let's actually test it just with 20. 286

286

Otherwise it's gonna take forever 287

287

to reach that 100 points. 288

288

All right. 289

289

before we do that, 290

290

let's now actually put this switching the player 291

291

into the else block. 292

292

Okay. 293

293

So when the game finishes, 294

294

we of course do not want to switch the player, 295

295

but if it does not only then we do switch the player 296

296

and remember that 20 points is enough to win. 297

297

So let's roll the dice a couple of times. 298

298

11 so we're almost there. 299

299

That was close with 16. 300

300

And so now we should have enough. 301

301

So if we hold now then 10 plus 11 is 21. 302

302

So that's over 20. 303

303

And so now this should then show us the winner player class. 304

304

Well, that didn't really happen. 305

305

That's weird if I keep clicking here, 306

306

then this number keeps getting added. 307

307

And let me see in the HTML, 308

308

if the class wasn't added, 309

309

but actually it was not. 310

310

So we still have to active player. 311

311

And the winner class is nowhere to be found. 312

312

So let's check that. 313

313

Oh, and here we actually have the problem. 314

314

So I did a mistake that I told you before not to make, 315

315

which is when we use query selector, 316

316

we need an actual selector. 317

317

So here we are selecting a class. 318

318

And so we're missing the dot here and here. 319

319

So only when we get element by ID, 320

320

then we do not specify the selector. 321

321

We only specified the ID name itself, 322

322

but when we use query selector, 323

323

this needs to be a query. 324

324

And so if we are selecting based on a class, 325

325

we need the dot here. 326

326

And so that should be fixed now, 327

327

but this great to show you that mistakes 328

328

like this happen in development all the time. 329

329

So if you do this yourself, 330

330

then really don't beat yourself up 331

331

because that's just completely normal. 332

332

As you're seeing here, 333

333

I didn't plan this mistakes. 334

334

Anyway, now we have 16 plus five is 21. 335

335

So that should be enough to win the game. 336

336

Now we really got this winner class here showing 337

337

that player one won the game. 338

338

So this is now red too and yeah, 339

339

the dark background here too. 340

340

Now the problem is first that we're still showing the dice. 341

341

So we want to get rid of that. 342

342

But even worse is that we can still click on these buttons. 343

343

We can actually still keep playing the game. 344

344

So you'll see that everything works the same. 345

345

And now this player also one, they also have 22 points, 346

346

but we still can keep playing the game. 347

347

So of course that is not good. 348

348

So that is the next thing that we need to solve. 349

349

And let's think how we could solve this. 350

350

And for me, I think the easiest solution is 351

351

to create a variable that hosts the state of the game. 352

352

So if we are still playing or not, 353

353

so this is gonna be a state variable, 354

354

which kind of tells us the condition of a system 355

355

in this case the condition will be is 356

356

the game playing or not? 357

357

And so if the game is playing, 358

358

then we can click these buttons 359

359

and then everything will work as normally. 360

360

But then as soon as the game is finished, 361

361

we will say that the game is no longer playing 362

362

and then we can no longer click on these buttons. 363

363

All right. 364

364

I hope that sounds good to you. 365

365

So let's implement it. 366

366

And so what I will do here is say, 367

367

let playing, and now this will be a Boolean value. 368

368

And so we start with true. 369

369

So in the beginning of the game, 370

370

we are of course playing 371

371

and so playing it's true. 372

372

And then when we finished the game, 373

373

we will set playing to false. 374

374

So that's in this case. 375

375

So finish the game. 376

376

And the first thing that we're gonna do is 377

377

to set playing to false. 378

378

Okay, now this in itself will, 379

379

of course not yet do anything. 380

380

So we only defined whether the game is playing or not, 381

381

but none of our code is reacting to that. 382

382

So remember that we only want to be able to click 383

383

on these buttons once we are playing. 384

384

And so let's define that. 385

385

So let's go to the first button, which is the button role. 386

386

And so basically what we can do now is 387

387

that all of this logic that we have here should 388

388

only be executed if we are playing. 389

389

All right. 390

390

So that's simple enough. 391

391

So let's just say if playing 392

392

then do all of this. 393

393

So let's remove that from here and put it down here. 394

394

And then as we save it prettier will take care of indenting 395

395

all the code and put it nice and beautiful. 396

396

Okay. 397

397

Now playing here is a Boolean variable. 398

398

And so that's why we don't have 399

399

to write any condition like this for example, 400

400

because again, playing itself is already a Boolean 401

401

so we don't need to check if true is equal to true. 402

402

And so now when we click on this button, 403

403

while the game is no longer playing, 404

404

then nothing will happen. 405

405

And so that's the beauty and the goal of having 406

406

this playing variable. 407

407

Now let's simply do the same for this other button. 408

408

Okay. 409

409

So if playing then do all of this, 410

410

again I'm deleting it from here 411

411

and simply writing it down here, give it a safe, 412

412

and then it will be beautiful and back to normal. 413

413

And to now, as soon as one player wins, 414

414

we will finish the game and set playing to false. 415

415

And so the next time we click on any of these buttons, 416

416

then here playing will be false. 417

417

And then none of this code will be executed 418

418

and the same here for this button for rolling the dice. 419

419

So I hope you were able to follow that logic. 420

420

And so maybe you can use this kind of logic 421

421

in your own projects as well. 422

422

And this is actually the reason why it's so cool 423

423

to start building projects as games, 424

424

because in games we need a lot of this type of logic. 425

425

And so it's really fun to demonstrate 426

426

all these different aspects 427

427

that are quite common actually in programming. 428

428

So state variable like this, 429

429

like this playing here is very usual in programming. 430

430

And so you can start to get used 431

431

to sometimes needing a variable like that. 432

432

And now let's try it out again 433

433

and remember that we still can win the game at 20 434

434

and just to make sure let's reload. 435

435

And now as I roll the dice, 436

436

so let's hold here. 437

437

Let's see if we can do it in one run. 438

438

Oh and we can. 439

439

So we are at 20 and now let me hold. 440

440

And now I won the game here 441

441

and now let's see what happens when I click 442

442

and nothing happens the same for hold. 443

443

So these buttons, of course, like you can still click them, 444

444

but nothing happens. 445

445

All right. 446

446

That's awesome. 447

447

There's just one last thing to do, 448

448

which is to get rid of this dice here. 449

449

So let's go back one last time. 450

450

And so that also happens here when we finish the game. 451

451

So remember that we displayed the dice up here 452

452

when we rolled a button. 453

453

And so let's just copy this 454

454

and basically add this hidden class back on. 455

455

So right here, for example. 456

456

And so now instead of removing it, 457

457

we just add it back. 458

458

Okay. 459

459

Give it a safe and let's try to do it fast again. 460

460

And yes, now we should win the game 461

461

and the dice is gone awesome. 462

462

So we are almost done here with this project. 463

463

So our game works really great. 464

464

All there's left to do now is 465

465

to implement this new game button here. 466

466

So we could of course play again by reloading the page, 467

467

but it's always nice to have a button 468

468

to simply reset the game. 469

469

And so let's move on to the next video 470

470

and do that to finish this project.