Original subtitles

1 1

Welcome to the last lecture of this project 2

2

and of this section. 3

3

And in this one, we're gonna implement 4

4

the functionality of resetting the game 5

5

at any point in time. 6

6

So what we're looking for, 7

7

when we click on this button here, 8

8

is to remove the the winner class 9

9

and to set all the scores 10

10

of all the players here back to zero. 11

11

So all the total scores, this and this, 12

12

and all the current scores should also be put back to zero. 13

13

So essentially, we need to set back 14

14

all the initial conditions of the game. 15

15

Now, we already did something similar 16

16

to this in our first game, 17

17

and so maybe this is a good opportunity 18

18

to leave this as a challenge for you. 19

19

And this one will be a little bit more difficult 20

20

than the one in the Guess My Number project. 21

21

But you can still try to do it. 22

22

So what I want you to do is when we click 23

23

on this button, as I just mentioned, 24

24

reset all the initial conditions of the game. 25

25

And it doesn't matter if your solution 26

26

will be dramatically different from mine, okay? 27

27

I just want you to try, 28

28

and I want you to write code on your own. 29

29

No matter if you'll actually achieve the goal 30

30

in the end or not, that is not point right now. 31

31

So just pause the video here, please. 32

32

And try to do at least part of this on your own. 33

33

So hopefully, you had a great time doing that. 34

34

And so let's now go back together here and do it ourselves. 35

35

So we need this btnNew, 36

36

and so once more, we will add an event handler on there. 37

37

So that's btnNew.addEventListener 38

38

waiting for a click, and then we want to execute 39

39

whatever happens here. 40

40

So as I said, we need to reset all the scores. 41

41

So let's start with that. 42

42

And I guess I already selected these up here. 43

43

So that is scoreEl0 and score1El, okay? 44

44

So these two scores, we want to set them back to zero. 45

45

Now actually, we already did that here, 46

46

so let's just copy it for now. 47

47

Okay. 48

48

Then we also need to set 49

49

all the current scores back to zero. 50

50

So that is current0El and current1El. 51

51

So current0El equal zero, 52

52

and then current1El also back to zero. 53

53

Next up, we need to remove the winner class, 54

54

so this dark class that we have here, 55

55

and now it's gonna disappear because as I move out 56

56

from this window, it will save and then it will reload. 57

57

So I'll only go half. 58

58

But you see this dark class, the winner class, 59

59

needs to disappear. 60

60

And so let's do that. 61

61

And so that should be player0El.classList.remove 62

62

and player winner. 63

63

Now of course, we do not know which player won the game. 64

64

And so we have to do this on both the player elements, okay? 65

65

And that's not problem at all. 66

66

So we already know that only one of these two elements 67

67

will have this class, but we can still tell JavaScript 68

68

to remove a class even if it's not there. 69

69

JavaScript will happily do that. 70

70

Then, next up, we also need to remove 71

71

the active classes on both players, 72

72

because again, we do not know at this point 73

73

which one is the active player. 74

74

So let's just remove them too. 75

75

Now, just copy it. 76

76

So player winner here is both active. 77

77

And then, we also need to set the first player 78

78

to be the active player. 79

79

So let's do that. 80

80

And in fact, let me just change the code here 81

81

in this line, because there's no need to remove it 82

82

from player zero, because, well, 83

83

player zero should be the active player in the beginning. 84

84

And so there's no need of removing it 85

85

and then adding it back. 86

86

So I will simply add it, all right? 87

87

And if it was already there, 88

88

then JavaScript will not add it again, okay? 89

89

So just like with removing. 90

90

So if the class is not there, 91

91

but we are still telling JavaScript to remove it, 92

92

it will not give us an error. 93

93

It will simply do nothing. 94

94

And if we add a class that's already there, 95

95

it will not add a second one. 96

96

And so here, it's not a problem. 97

97

So even if the class is already there 98

98

by saying add a player active, 99

99

we will not add another one, okay? 100

100

All right, and that's it for the visible part 101

101

of the user interface. 102

102

So we changed classes here and we manipulated the content. 103

103

But of course, we also need to set 104

104

our internal state variables back to the initial state. 105

105

So basically, what we need to do, 106

106

is to add these scores back to zero, 107

107

set the current score back to zero, 108

108

set the active player back to the first player, 109

109

and also basically start the game again 110

110

by setting playing back to true. 111

111

So what should we do here? 112

112

Should I simply take this code 113

113

and copy it to the other function? 114

114

And you already know the answer to this question, don't you? 115

115

So, of course not. 116

116

Instead, we will create a function 117

117

which contains this code, together with the code 118

118

that is already down here, okay? 119

119

And then we will create a new function with all of these. 120

120

And I'm gonna call this function init, 121

121

which stands for initialization. 122

122

So let me cut this code here, 123

123

and create this function here. 124

124

So again, calling init, which stands for initialization. 125

125

And this is once again just the function 126

126

that serves as a reusable piece of code, 127

127

so we need to know arguments here. 128

128

Okay, so this is the init function, 129

129

which will initialize our game. 130

130

And now, we also want this code in there as well. 131

131

And in fact, we want all of these code. 132

132

So all of the starting conditions 133

133

should now be set here in this init function. 134

134

So let's grab this and paste it here. 135

135

Okay, and now, these two are duplicate. 136

136

So they're already down here. 137

137

So this is the same as this and this, 138

138

so let's remove it from here, 139

139

and then let's move this one down a little bit. 140

140

Okay, and again I used option or Alt + arrow down 141

141

to move the line like that. 142

142

Give it some space here, and okay. 143

143

So this is our initializing function. 144

144

Now, when do we want this function here to be executed? 145

145

We want it in two situations. 146

146

So whenever we load the page for the very first time 147

147

or also when that button is clicked 148

148

that we were just working on, right? 149

149

So, of course, we need these scores 150

150

to be zero at the beginning, together with the current score 151

151

and the active player and all of that. 152

152

And so we used to have this code outside of any function. 153

153

And so it was executed right when the file was loaded. 154

154

But now, this code is inside of this function. 155

155

And right now, we are not calling 156

156

this function here at any point. 157

157

And so this code in here 158

158

will not get executed as the page loads, okay? 159

159

So right now, as we load the page, 160

160

you will see that it has this weird starting conditions 161

161

that it had initially, showing these random numbers 162

162

and showing the dice, 163

163

and nothing is gonna work now if I click any of this. 164

164

And so that's because our initial variables here 165

165

are not set, because this function does not run on its own. 166

166

And so as you might guess, 167

167

the solution to that is to simply run it. 168

168

So as we now load this script, 169

169

then JavaScript will find this function definition, 170

170

and then it will find this line of code 171

171

which runs the function. 172

172

And so then, by that time, all of this code here 173

173

will be executed and then our game will work just fine. 174

174

So let me show that to you. 175

175

And so now, we are back to looking normal 176

176

and our game should work. 177

177

Oh, and actually, nothing is working. 178

178

So let's take a look at the console. 179

179

But I can already guess what is happening, okay? 180

180

And so, yeah, we see here from these errors 181

181

that these variables are not defined. 182

182

Playing is not defined, and yeah. 183

183

But it's not the only variable that is not defined. 184

184

And so let me show you the error here. 185

185

So this error comes from something 186

186

that we already talked about very briefly before, 187

187

but I didn't really go into yet. 188

188

That's because in the next section, 189

189

we will really get deep into something called scoping, okay? 190

190

But let me just explain to you right now 191

191

that these variables that I defined here, 192

192

they're only available inside of this init function, okay? 193

193

So again, these scores, this current score, 194

194

this active play, and this playing, 195

195

all of these variables, I declared them in here, 196

196

inside of this function. 197

197

And so because of that, they are not accessible 198

198

outside of the function. 199

199

So we say that they are scoped to this init function, 200

200

because this is where I declared them. 201

201

And so the solution is to declare these variables 202

202

outside of any function but without any value. 203

203

And so it's then in the init function 204

204

where they will really be declared, okay? 205

205

And if that doesn't make 100% sense, 206

206

it will make after the next section 207

207

where we will really understand deeply 208

208

how scoping like this works. 209

209

Anyway, let's now declare these four variables here outside. 210

210

So I will use let now for all of them. 211

211

So scores. 212

212

And then remember, as we already did 213

213

in the fundamental section, 214

214

we can define a bunch of empty variables 215

215

by using commas here. 216

216

So currentScore, activePlayer, and playing. 217

217

So now, these variables, they basically live outside here. 218

218

And so what we do here then 219

219

is to essentially reassign them a value. 220

220

So we need to get rid of these lets here, 221

221

because that would then create new variables here. 222

222

But again, that's not what we want. 223

223

We want the variables, basically, to live out here. 224

224

And then, in the init function, 225

225

we only reassign their values. 226

226

So that's very different. 227

227

So declaring a variable is not the same 228

228

as assigning them a value, okay? 229

229

And so right now here, we only assign them a value, 230

230

but they still live outside here, 231

231

and that's why they are then accessible 232

232

in every function everywhere, all right? 233

233

And now, just to finish, we also need to use 234

234

this init function, of course, on the reload function. 235

235

So on this event handler here. 236

236

And so, just like before, 237

237

here, we now do not declare this anonymous function, 238

238

but instead, we pass in the init function, 239

239

which again is really just a value, 240

240

and so it's perfectly okay to pass this value 241

241

into this other function. 242

242

And just keep in mind that we do not call 243

243

this function here. 244

244

It is JavaScript who will call the init function 245

245

as soon as the user clicks on the new button. 246

246

And so now, everything will work just fine. 247

247

So we get five, we get five down here. 248

248

And let's hold it now. 249

249

And indeed, we moved to the other side. 250

250

And with this, we should win the game now. 251

251

So let's see. 252

252

Hold and indeed. 253

253

And now, here comes the test to see if this button works. 254

254

And indeed, it does, and we can restart the game 255

255

just like this. 256

256

This time, let's player two win the game here 257

257

just to see if it works there as well. 258

258

So that's enough points. 259

259

And indeed, it works. 260

260

But what matters is now that 261

261

as we click the new game button, 262

262

everything is back to normal 263

263

and player one is back to being the current player. 264

264

All right, great. 265

265

And with that, we actually finished the game. 266

266

Almost finished. 267

267

Let's set the threshold here back to actually 100 points. 268

268

So that is the limit here 269

269

on which we want this game to finish. 270

270

But with that, the game is ready 271

271

and feature complete and yeah. 272

272

I hope you're happy with it. 273

273

So congratulations. 274

274

Great job for making it to the end of this section. 275

275

That's already a really great achievement 276

276

and I hope that you can see 277

277

that you already learned a lot of new stuff here. 278

278

And now, you can go ahead and play this game 279

279

with your friends, and you can tell them 280

280

that actually, you coded this by yourself. 281

281

So the code you wrote on your computer 282

282

is what made this program possible. 283

283

It's what makes this really come to life, so to say. 284

284

So how cool is that? 285

285

And maybe even your friend 286

286

will then become interested in programming, 287

287

and you can do this journey together. 288

288

But anyway, with this, 289

289

we now really finished the fundamentals part of this course. 290

290

And once again, I really hope 291

291

that you can see that you already learned 292

292

a lot of new contents here in this last couple of hours. 293

293

So congratulations once again 294

294

and I'll see you in the next section, 295

295

which is really important, because there, 296

296

you're gonna learn how JavaScript 297

297

actually works behind the scenes.