Original subtitles

1 1

Welcome back to project number three 2

2

of this section, 3

3

and this project is going to be the most exciting one 4

4

because now we will take everything that we learned 5

5

in the first two projects to a whole new level 6

6

and build a really cool and amazing game. 7

7

And this is the game that I was talking about 8

8

and it's called the pick game. 9

9

Now this project here 10

10

is really going to be a practice project. 11

11

So a project where you and me 12

12

will together reinforce all the skills that you have learned 13

13

up until this point, 14

14

because remember from the last section, 15

15

reinforcing knowledge is one of the most important things 16

16

that you can do to learn, right? 17

17

So in this project, 18

18

I will do a little bit less explaining than before, 19

19

at least about the stuff that we already learned, 20

20

because we are really just practicing here. Okay. 21

21

Now, if you're in a hurry and just want to learn the basics, 22

22

please feel free to skip this project. 23

23

But of course, I would still really advise you 24

24

to code along with me here, 25

25

but now let's see how this game actually works. 26

26

And in fact, you can try that along with me 27

27

because this time I hosted this demo, on a live website. 28

28

So you can access that by pickgamev2.netlify.app 29

29

And the link is also in the read me file 30

30

of the repository for this course on github.com. 31

31

But anyway, this is more of a real game now 32

32

because we actually have two players. 33

33

So you can play this with a friend or something 34

34

or just against yourself. 35

35

So the idea is that we roll a dice. 36

36

And so now I'm playing number one. 37

37

So this one is now the active player. 38

38

So I roll a dice, 39

39

And so you see that I rolled a two. 40

40

And so this number gets added to my current score down here. 41

41

Okay. So this is my current score for the current round. 42

42

And this year is my total score. 43

43

And so let's see how that's going to work 44

44

so I can roll the dice again now if I want to, 45

45

and now I rolled a four 46

46

and that four got added to the two that it had previously. 47

47

So now that's six and now I can choose to hold this score. 48

48

So if I click this button, 49

49

this score of the current round 50

50

will get added to my total score, 51

51

which right now is zero. 52

52

And so when I hold a den, my score will be zero now. 53

53

And we switched to player number two, 54

54

and now I can click roll dice again. 55

55

So we rolled a two and I can hold again. 56

56

And so now play it two as two points. 57

57

Now, the thing here is that whenever we roll a one, 58

58

we lose all our current score 59

59

and it's then the next players turn. 60

60

And so that's why sometimes we need to hold or points. 61

61

So let me show that to you. 62

62

And indeed, I rolled a one right away. 63

63

And so now it's player two again. 64

64

So let's keep rolling the dice. 65

65

And I will now again, wait for one 66

66

so that you can see that all my current score will be lost. 67

67

So that's a lot of points already there. 68

68

And now I rolled a one and a player lost all the points. 69

69

Okay. So I could have hold the points 70

70

and then I would have added all these points 71

71

here to my score. 72

72

So let's do that here 73

73

and again, a one. 74

74

And so yeah, now here I hold 75

75

and I edit them to these points. 76

76

And I think by now you get how the game works, right? 77

77

So the first player to reach 100 points then wins the game. 78

78

But I will now not demonstrate that 79

79

because that's going to take too long. 80

80

So we have these two buttons here, 81

81

and then we also have just like in the previous game, 82

82

a way of resetting the game. 83

83

So when I click here, as you might expect, 84

84

this dice will disappear 85

85

and all the scores are set back to zero. 86

86

And to understand this game a little bit better 87

87

for this application, 88

88

I designed something called a flow chart. 89

89

So let's take a look at that. 90

90

And this is what a flow chart looks like. 91

91

So basically it's a representation 92

92

of everything that can happen in the application. 93

93

So on the left side, we have in yellow, 94

94

the possible actions that the user can take. 95

95

And then from there we see what happens in the application. 96

96

As one of these options is basically chosen. 97

97

So as one of the actions is executed. 98

98

So whenever the user rolls to dice, 99

99

so clicks that roll dice button, 100

100

then we need to generate a random dice roll. 101

101

Then we displayed at dice roll, 102

102

and then we check whether it is a one. 103

103

If it's not one, 104

104

then add the dice roll to the current score. 105

105

And of course this play it, right? 106

106

So that is exactly the behavior that we saw 107

107

when we tested out the game earlier. Right? 108

108

Now, if the dice roll is actually a one, 109

109

then simply switch the player. 110

110

And so in this case, the dice roll will not get added 111

111

to the current score. 112

112

Next, the other option is that 113

113

the user wants to hold his score. 114

114

And then we add the current score to the total score. 115

115

Once that is done, 116

116

we must check if the score is above or equal 100, 117

117

because as I said, the player wins whenever the score 118

118

is at least 100 points, right? 119

119

And if it's not, then we just switch the player 120

120

and the game keeps on running. 121

121

Finally, when the user chooses to reset the game , 122

122

we simply set all scores to zero 123

123

and set the player number one, 124

124

back to being the starting player. 125

125

All right. So this is a very nice way again, 126

126

to visualize what happens in the application. 127

127

And it's also a very good guide for us 128

128

to actually implement the application in coat. 129

129

So usually whenever I built a project like this one, 130

130

I like to draw a flow chart like this, 131

131

and it doesn't need to have all this precision 132

132

right from the start. 133

133

So we can just start out with a rough sketch 134

134

without the complete plan of what we're going to build. 135

135

But anyway, this is very helpful 136

136

before we actually start writing code 137

137

to have a good idea of what we will have to do. 138

138

And if you want to build your own flow charts 139

139

that look like this, 140

140

you can do so on diagrams.net. 141

141

So that's where I designed this flow chart, 142

142

and it's a very nice online drawing application 143

143

that is completely free and really easy and fast to use. 144

144

Now. Okay. And so now as always let's open up 145

145

or project folder. So I have to start a files here already, 146

146

and now I need a new vs code window. 147

147

And then I just opened a Pitt game. 148

148

And this time, since the application needs this whole space, 149

149

let's actually put it here on a separate desktop. 150

150

And then as we attest out, 151

151

I will just move here from one desktop to the other. 152

152

So let's make this bigger this time. 153

153

And so like always, we already have all our files here, 154

154

so let's take a look at them and JavaScript. 155

155

So here as always just the use strict, 156

156

then here we have all the styles 157

157

that we need for the application. 158

158

And we will take a look at them as we go 159

159

through the project. 160

160

And then finally the HTML file. 161

161

Okay, and they also actually included 162

162

the image of this flow chart here for you, 163

163

so that you can maybe take a look at it yourself 164

164

to make sure that you really understand how it works. 165

165

Okay. So take a minute or two to maybe test the app again 166

166

and check out this flow chart before we actually start. 167

167

Alright. Also, I wanted to show you that I have one image 168

168

here for each of the dices. 169

169

So dice one looks like this, 170

170

like two, it looks like this 171

171

and so on and so forth. 172

172

So we have one image for each of the possible six numbers. 173

173

So that's going to be important later, 174

174

but now let's just start to, 175

175

write a little bit of code here. 176

176

Let's get ourselves a new terminal here 177

177

so that we can take a look at the application 178

178

as it looks right now. 179

179

Interior. I like to minimize it a little bit life server. 180

180

Okay. And so this is our life version of the pic game. 181

181

So again, we are here at this local host at port 8080. 182

182

And if you are seeing some other ports, 183

183

that's no problem at all, as long as it works. 184

184

So maybe you still have something running on this port, 185

185

maybe from the previous project. 186

186

And then this project will run on another port. 187

187

That doesn't really matter. 188

188

So right now in the starting point, 189

189

this is what our application looks like. 190

190

But of course in the demo, 191

191

we don't see the dice in the beginning 192

192

and we don't see any scores here. 193

193

Okay. And so the first thing that we're going to do 194

194

is to basically put these scores to zero 195

195

and make this dice disappear. 196

196

And so that's going to be basically 197

197

the starting condition here. 198

198

So let's go back here to the coat. 199

199

And let me just tell you where 200

200

these initial values come from. 201

201

So this is the 43 score that we just saw, 202

202

and this is the 24. 203

203

And so let's take a moment to inspect the code 204

204

because as you already know, 205

205

we need the class names. 206

206

And in this case also the IDs to then identify 207

207

and select the elements. 208

208

So basically here we have one of these sections here 209

209

for each of the players 210

210

and you see that the first one is player zero. 211

211

And the second one is player one. 212

212

And I will explain you why 213

213

the players are called zero and one 214

214

instead of one and two, 215

215

probably in the next lecture. 216

216

So it will make sense by then. 217

217

okay. But now about the scores, 218

218

they are stored in this element 219

219

and in this one here. 220

220

And so you'll see both of them have to score class, 221

221

but then each of them has a different ID. 222

222

And so this time we need to select these two elements 223

223

using their unique ID instead of a class name. 224

224

So that's the idea of score dash dash zero 225

225

and score dash dash one. 226

226

So let's do that. 227

227

So const score one and then document query selector. 228

228

So this is the way that we learned it before. 229

229

And now here, we actually need the hash symbol. 230

230

So score zero. So actually I'm interested in zero here. 231

231

Okay. And so again, now we used the, 232

232

this hash because that is the selector for the ID 233

233

and a dot that we used to use is only four classes. Okay. 234

234

Now, when we're selecting using an ID. 235

235

Then there's actually another way of selecting an element. 236

236

And right now that's exactly what we're doing. 237

237

So we're interested in IDs, not in classes. 238

238

And so let me show you that other way of selecting elements 239

239

that only works by ID. 240

240

So let's call this one, score one, 241

241

and then again, we use document, 242

242

but then we're not calling query selector. 243

243

Instead we call get element by ID. 244

244

And then here, we just pass in the name of the ID. 245

245

So just score one. 246

246

So without the hash here, 247

247

because now we're not writing a selector, 248

248

we are only passing in the name of the ID 249

249

that we're looking for. Okay? 250

250

So this works exactly the same as this, 251

251

but the get element by ID 252

252

is supposed to be a little bit faster than query selector, 253

253

but I guess that's only relevant 254

254

if you're selecting like thousands of elements at once. 255

255

So usually I like to always use query selector, 256

256

but I still wanted to show you that there also exists 257

257

get element by ID. Alright? 258

258

And actually let's call these two here, score zero L, 259

259

which stands for element 260

260

because you might then confuse maybe this variable 261

261

here for simply the score value of players zero. Right? 262

262

And so in this case, 263

263

we are making it really clear that this is a dumb element. 264

264

So score is zero L all right. Okay. 265

265

So we're selecting these here 266

266

and now we can use the variables to do something on them. 267

267

And again, we do that 268

268

because probably we will need to do something with 269

269

these selected elements multiple times 270

270

throughout the application. 271

271

And so we just defined them once at the 272

272

top of our file instead of having to select 273

273

the same elements over and over again. 274

274

So let's just add a comment here. 275

275

And comments are also a good way of structuring the code 276

276

and also of planning how we will build some features. 277

277

So selecting elements. 278

278

And so in this project, 279

279

we will try to get a little bit more used 280

280

to actually write in comments. Alright? 281

281

Anyway, let's now set these initial conditions 282

282

of score zero element. 283

283

And then as you know, we use text content 284

284

and then we set it to zero. Alright? 285

285

And now the same four score one score, 286

286

one element.textcontent to zero. 287

287

And here we are specifying numbers, not strings, 288

288

but JavaScript will then automatically convert them 289

289

to strings to actually display them on the page. 290

290

So if we go now to the application 291

291

that should already be in effect, 292

292

and indeed you see that now the scores are actually at zero. 293

293

Great. Now all we have to do is to hide this dice here. 294

294

And so let's do that using the technique 295

295

that we learned in the previous project, 296

296

which is basically creating a hidden class 297

297

and then add that hidden class here at the beginning. Okay. 298

298

So let's go to our style. 299

299

And right now I don't have that class yet. 300

300

So that's just created 301

301

and I can close the terminal here. 302

302

Let's just do that at the very end. 303

303

So we create a class like this 304

304

and then we just set the display to none. 305

305

So that's exactly the class that we had in the 306

306

previous project as well. Okay. 307

307

And so now we can just add that class 308

308

to the dice at the beginning of the game. 309

309

So that's easy enough, 310

310

but first we need to select it. 311

311

So let's call it dice L for the dice element. 312

312

Let's check out what the ID or the class of it is. 313

313

And here we see that it's actually just this dice class. 314

314

So this image with his class of a dice, 315

315

so document not query selector dice. 316

316

And so here we have to start in conditions 317

317

and now let's simply do dice element.classlist.add. 318

318

And now simply this string, 319

319

which contains the name of the class 320

320

and that's the hidden class, give it a safe, 321

321

let's check it out. 322

322

And indeed, now the dice has gone 323

323

and let's see the HTML here, actually, 324

324

you now indeed we have the hidden class here, 325

325

besides the dice class. Great. 326

326

And then as we implement the roll dice functionality, 327

327

of course, we will want the dyes to be visible. 328

328

And then we can simply remove that class 329

329

again from the dice. Okay. 330

330

And actually that's exactly what we're going to do 331

331

in the next video.