Original subtitles

1 1

In this video, 2

2

we will actually start implementing our games functionality, 3

3

and we will start with the most important functionality, 4

4

which is rolling the dice. 5

5

And let's start with another look at our flowchart here. 6

6

So that's why I included it in the starter files. 7

7

So when the user roles a dice, 8

8

we want to first generate a random dice roll, 9

9

then display it and then check whether it is a one or not. 10

10

And if it's not, we add that dice roll to the current score, 11

11

and if it is a one we go to the next player. 12

12

And maybe you're noticing 13

13

that having or building a flow chart like this 14

14

is pretty similar to actually dividing the big problem down 15

15

into smaller sub problems. 16

16

So essentially, all these squares that we have here 17

17

on the flow chart are like 18

18

the sub problems that we now need to go 19

19

ahead and implement. 20

20

So again, for a bigger application like this one, 21

21

it's a very good idea to draw a flow chart like this, 22

22

along with the process of solving problems that I taught you 23

23

in the previous section. 24

24

So use all of these methods that I showed you together 25

25

whenever you need to solve a problem, 26

26

because in the end, building a project like this is also 27

27

simply solving a problem. 28

28

So you know how the project is supposed to work, 29

29

but then the problem is 30

30

to essentially implement it yourself. 31

31

And so you need to divide that big problem 32

32

that can seem very scary 33

33

into smaller problems that will then 34

34

be easy to implement. 35

35

And as we move through this project, 36

36

you will see that it's not so scary after all. 37

37

And with that being said, 38

38

let's now also see this part of the flowchart in action 39

39

in the real application. 40

40

So this is a little bit less abstract. 41

41

So we roll the dice and now we rolled a one. 42

42

So let's just do it again. 43

43

Let me reload the game as if it was a new game. 44

44

So we roll the dice, we roll a number. 45

45

So we generate a random number 46

46

and then display the dice accordingly, 47

47

and then we add that score down here. 48

48

Again, and now we actually rolled a one. 49

49

And so we moved on to the next player. 50

50

Okay. 51

51

So that's what I just explained before using the flowchart, 52

52

but seeing it in action is a bit easier. 53

53

So we want to react to clicking that roll button. 54

54

So we need to select that button element and then 55

55

add an event listener or an event handler. 56

56

So here we have our three buttons and actually 57

57

let's select all of them. 58

58

So we will need them anyway later. 59

59

So that's button new, button roll and button--hold. 60

60

So const button new 61

61

is document.querySelector.btn, 62

62

and then two dashes new. 63

63

And now I will just duplicate this line here. 64

64

So that's button roll 65

65

and here also roll and then hold. 66

66

So let's just confirm new roll and hold 67

67

and indeed new roll and hold. 68

68

So that's gonna work just fine. 69

69

And now let's implement here 70

70

the rolling dice functionality. 71

71

So for that we take the roll button. 72

72

So that's button roll. 73

73

And then as always, when we want to react to an event, 74

74

which in this case is going to be a click, 75

75

we use the add event listener method. 76

76

Then the name of the event, and then, 77

77

our handler function right here. 78

78

And since we will not reuse this function, 79

79

I can simply write it here directly. 80

80

So let's now write some comments before 81

81

we actually write the code, 82

82

because that is very helpful in knowing what we should do. 83

83

So we already know that we need to start by generating 84

84

a random dice roll. 85

85

Then we display the dice 86

86

and then we check for a roll to one basically, 87

87

and if true, 88

88

switch to next player now. 89

89

So that's exactly what we have in the flowchart as well. 90

90

So let's start here. 91

91

So let's create simply a dice variable. 92

92

And so that's why now we have dice L here for the element 93

93

and then dice for the number itself. 94

94

And this variable here needs to be not a global variable. 95

95

So not a variable outside here, 96

96

because each time that we roll the dice, 97

97

we want to generate a new number. 98

98

And so let's simply define that variable here. 99

99

And now we create this random dice roll just as before. 100

100

So math.random, 101

101

which creates a number between zero and 0.9999. 102

102

So almost one, multiply that by six. 103

103

Then we truncate all of this. 104

104

So we removed the decimal part. 105

105

So that's math.trunc. 106

106

So basically we pass in the results of all of this, 107

107

into this math.trunc function. 108

108

And so this will then give us a number 109

109

between zero and five. 110

110

And so we just add one to elevate that to one to six. 111

111

So that's similar to what we did before 112

112

and now we just need to display this dice. 113

113

Now, the first thing that we need to do 114

114

is to actually remove 115

115

the hidden class. So remember in the starting conditions, 116

116

we hit the dice by adding the hidden class. 117

117

And so now the first thing is to remove that. 118

118

So the diceEl.classList.remove. 119

119

So just like in the last project and now comes 120

120

the interesting part. 121

121

So we know that the dice will be a number 122

122

between one and six. 123

123

And now, according to these numbers, 124

124

we want to display one of these images that we have here. 125

125

So you see that we have dice dash one dash two, three, four, 126

126

five and six. 127

127

And so now we want to use this dice number here, two, 128

128

according to that number display one of the images 129

129

and that's actually not hard to do. 130

130

So let me show you how it looks like in the HTML now. 131

131

So you'll see that right now, 132

132

the source of the image is dice-5.png. 133

133

And if you know some HTML, you know 134

134

that the source attribute here is how we define which image 135

135

should be displayed. 136

136

And we can now actually change. 137

137

We can manipulate this source attribute from our JavaScript. 138

138

And so that's the trick that we will use to display 139

139

the image, according to the rolled dice number. 140

140

So let's again, take the dice element. 141

141

And then here, there is a new thing. 142

142

So now we can use the source property. 143

143

So SRC just like it is called in the HTML, 144

144

and now we can set it to a string and that string will then 145

145

be the name of the image displayed. 146

146

So let's use a template literal, 147

147

and then we write, dice dash 148

148

because that's basically 149

149

the common name in all of these image names. 150

150

And then here we use the dicenumber.png. 151

151

And so with this, 152

152

we can dynamically load one of these six images here, 153

153

depending on the random rolled dice. 154

154

So let's give it a safe and let's give it a try 155

155

because this part should already be working now. 156

156

So let's see. 157

157

And indeed, we get this three. 158

158

Let's actually also look to the console for now, 159

159

this random number, just so 160

160

we see that the dice is actually 161

161

the corresponding one to the number. 162

162

So let's go back 163

163

here to the console, 164

164

make it a bit smaller 165

165

and now let's roll the dice and it works, great. 166

166

So we get a two. 167

167

And so indeed a two is also displayed here. 168

168

Now six and six here. 169

169

And let's just see if we get all the numbers, but yeah, 170

170

we get the one and we already saw the six happening as well. 171

171

So that means that our code is correct. Great. 172

172

And now all that we have to do is to keep adding 173

173

to roll dice to the current score. 174

174

And so that's what we will do here 175

175

in this case where we check for the rolled one. 176

176

So remember that only happens when the number is not a one. 177

177

So again, if it's a one, switch player, if no, 178

178

then add the dice roll to the current score. 179

179

So basically let's test here. 180

180

If the dice 181

181

is not one, 182

182

because this is our main case. 183

183

So the one that we're mostly interested in, 184

184

and then, our else block, 185

185

which will be basically in case that dice is a one. 186

186

So let's just grab that here. 187

187

So here we want to switch to the next player, 188

188

but if it's not one, 189

189

then we want to add 190

190

the dice to the current score. 191

191

So let's do this part here. 192

192

And in order to actually be able to add the current dice 193

193

to the current score, 194

194

we need a way of saving that current score somewhere. 195

195

So remember from the first project that we should not just 196

196

store any data only in the dumb. 197

197

So in this particular case, 198

198

we should not only display this current score 199

199

on the user interface. 200

200

Instead, we also want the variable in our code, 201

201

which always holds the current score of this current round. 202

202

So we need to define a variable for that. 203

203

And where do you think we should do that? 204

204

Well, it is certainly not in this function, 205

205

so not in this handler function, because if we did that, 206

206

then each time that we roll a dice, 207

207

the current score would be reset it. 208

208

So it would be redefined because this function here 209

209

is called over and over again, 210

210

each time that the button is clicked. 211

211

So if we wanted to basically persist that value, 212

212

so if it should keep existing, 213

213

then it needs to be outside here in the main program. 214

214

So let's call this one current score. 215

215

And we started at zero and it needs to be a let 216

216

because we will keep updating it. 217

217

So again, this cannot be inside 218

218

of this function because then it would 219

219

be set to zero each time that we clicked the button. 220

220

And so therefore it needs to be outside. 221

221

Okay. And now we say, 222

222

current score is equal 223

223

to current score plus the dice. 224

224

And once again, there is a shortcut operator, 225

225

for repeating this variable here. So instead of this, 226

226

we can just write, current score plus equal the dice. 227

227

So that's exactly the same, 228

228

but it's a little bit faster to write. 229

229

And now all we need to do is to display the score 230

230

on the current player. 231

231

Now, at this point, 232

232

we will just display it on player one to make it 233

233

a little bit simpler, but in the future, 234

234

we will need to keep track 235

235

of which player is the active player. 236

236

So that we will do in the next lecture. But again, 237

237

for now, let's just display the score on player one. 238

238

So let's select the score 239

239

or the current score for player one. 240

240

So let's check where that is scored, 241

241

and it is right here with this ID, dash dash one 242

242

and dash dash zero. 243

243

So let's actually copy that 244

244

and then I will select both of these elements up here. 245

245

So let's do that below this one. 246

246

And actually I will keep using get element by ID now. 247

247

So current zero, and then again, element, 248

248

get element by ID and then 249

249

just the class name again 250

250

without the hash symbol there. 251

251

And then current 252

252

one element is document.getElement, 253

253

and then current one. 254

254

Okay. And so now let's use this one. 255

255

So let me copy it, 256

256

.textcontent equals of course 257

257

the current score that we just defined previously. 258

258

And let me just add a note here, change later, 259

259

because in the future, 260

260

we will need to display this current score 261

261

at the current player 262

262

and to not always add player number zero 263

263

or player number one. 264

264

But for now, we just want to make this functionality work. 265

265

So let's just test it out for now. 266

266

So roll dice four, 267

267

and you'll see that it added the four to the zero, 268

268

and now three plus four is seven. 269

269

And so it works. 270

270

And now that we rolled a one, nothing happened. 271

271

So in this situation, we want to move to the next player. 272

272

So basically switching the player. 273

273

And so that's gonna be this else branch, but this one, 274

274

I will leave for the next lecture because 275

275

this involves doing a lot of stuff. 276

276

So maybe you can think about what we need to do, 277

277

because that would be a good opportunity for you 278

278

to start thinking by yourself, 279

279

how to implement this kind of functionality. 280

280

So try that out and then let's move on to the next video.