WEBVTT

1
00:00:00.160 --> 00:00:02.720
<v Speaker 1>Welcome to the Deep Dive. We're the show engineered to

2
00:00:02.720 --> 00:00:05.639
<v Speaker 1>give you that well, the ultimate shortcut to being truly

3
00:00:05.679 --> 00:00:08.599
<v Speaker 1>well informed fast. We know your time is valuable, so

4
00:00:08.679 --> 00:00:12.480
<v Speaker 1>our mission cut through the noise, deliver those surprising facts

5
00:00:12.480 --> 00:00:16.800
<v Speaker 1>and the aha moments that make complex stuff just click.

6
00:00:17.160 --> 00:00:20.160
<v Speaker 1>Today we are plunging right into the bedrock of the

7
00:00:20.199 --> 00:00:25.120
<v Speaker 1>interactive web. We're talking HTML five, CSS and JavaScript, but

8
00:00:25.519 --> 00:00:27.879
<v Speaker 1>we're doing it with a really fantastic twist. Instead of

9
00:00:28.239 --> 00:00:30.960
<v Speaker 1>dry textbooks, we're exploring how these things spring to life

10
00:00:31.000 --> 00:00:33.600
<v Speaker 1>through the world of games, creating games.

11
00:00:33.679 --> 00:00:35.679
<v Speaker 2>That's exactly right. I mean, in this age of just

12
00:00:35.759 --> 00:00:39.000
<v Speaker 2>constant information, understanding how the web actually works isn't just

13
00:00:39.000 --> 00:00:41.799
<v Speaker 2>for developers anymore, is it. It's really about demystifying the

14
00:00:41.840 --> 00:00:45.119
<v Speaker 2>tools that shape our well our daily digital lives, everything

15
00:00:45.200 --> 00:00:48.560
<v Speaker 2>from simple web pages to really complex apps. And honestly,

16
00:00:48.560 --> 00:00:50.799
<v Speaker 2>what better way to see these concepts in action than

17
00:00:50.880 --> 00:00:54.520
<v Speaker 2>through you know, the fun and very real examples you

18
00:00:54.560 --> 00:00:55.240
<v Speaker 2>find in games.

19
00:00:55.359 --> 00:00:58.159
<v Speaker 1>Yeah. Absolutely, and our deep dive today comes straight from

20
00:00:58.159 --> 00:01:02.200
<v Speaker 1>the Essential Guide to HTML five Using Games to Learn

21
00:01:02.320 --> 00:01:05.280
<v Speaker 1>HT and all five and JavaScript by Genie Meyer. It's

22
00:01:05.280 --> 00:01:08.480
<v Speaker 1>a really great resource. It shows how programming can actually

23
00:01:08.519 --> 00:01:13.120
<v Speaker 1>be well an art form, but one that's surprisingly accessible.

24
00:01:13.239 --> 00:01:16.120
<v Speaker 1>M hmm. The author makes this brilliant point. If you

25
00:01:16.159 --> 00:01:19.480
<v Speaker 1>can put words into sentences and sentences into paragraphs, and

26
00:01:19.519 --> 00:01:22.519
<v Speaker 1>you've got some logic, then you basically have the skills

27
00:01:22.560 --> 00:01:23.239
<v Speaker 1>to program.

28
00:01:23.319 --> 00:01:26.239
<v Speaker 2>It really is about breaking ideas down. It's logical thinking.

29
00:01:26.319 --> 00:01:29.439
<v Speaker 1>Okay. So let's start with those fundamentals, the building blocks

30
00:01:29.560 --> 00:01:32.760
<v Speaker 1>powering almost everything you see online. At the core, it's

31
00:01:32.799 --> 00:01:36.680
<v Speaker 1>these three pillars, right, HTMO five, CSS.

32
00:01:36.200 --> 00:01:40.040
<v Speaker 2>And JavaScript team, A perfectly coordinated team. Yeah, each one

33
00:01:40.040 --> 00:01:41.400
<v Speaker 2>has a very specific job.

34
00:01:41.480 --> 00:01:44.959
<v Speaker 1>So HTML five that's the structure, like the skeleton exactly.

35
00:01:44.959 --> 00:01:47.400
<v Speaker 2>It lays out the content, defines the structure of the page.

36
00:01:47.439 --> 00:01:50.879
<v Speaker 2>Think of it as the architect, okay, andss CSS is

37
00:01:50.879 --> 00:01:53.159
<v Speaker 2>the designer. It adds all the style, the visual appeal,

38
00:01:53.200 --> 00:01:54.640
<v Speaker 2>the colors, fonts, layout.

39
00:01:54.519 --> 00:01:55.519
<v Speaker 1>Makes it look good, right.

40
00:01:55.599 --> 00:01:59.200
<v Speaker 2>And then JavaScript that's the engineer, MA can things happen precisely?

41
00:01:59.359 --> 00:02:03.319
<v Speaker 2>That's the dynam engineer breathing life into the page, interactivity,

42
00:02:03.439 --> 00:02:07.079
<v Speaker 2>dynamic behavior, making things respond. And what's kind of amazing

43
00:02:07.200 --> 00:02:10.599
<v Speaker 2>is how simple HTML five is underneath it all. It's

44
00:02:10.639 --> 00:02:14.599
<v Speaker 2>fundamentally just a plain text document. You write it in

45
00:02:14.639 --> 00:02:18.080
<v Speaker 2>any text editor. It's made of elements surrounded by tags

46
00:02:18.319 --> 00:02:22.759
<v Speaker 2>like an image tagged MNG SRC, home, dot gift.

47
00:02:22.439 --> 00:02:25.599
<v Speaker 1>Okay, MG src And you said that's a singleton tag. Yeah.

48
00:02:25.639 --> 00:02:27.719
<v Speaker 2>See how there's no closing MLG. It just stands alone

49
00:02:27.719 --> 00:02:29.840
<v Speaker 2>because it doesn't really wrap around other content. It just

50
00:02:29.919 --> 00:02:30.960
<v Speaker 2>is the image placeholder.

51
00:02:31.080 --> 00:02:31.719
<v Speaker 1>Ah okay.

52
00:02:31.719 --> 00:02:35.159
<v Speaker 2>And every standard HTML page has this basic structure, right.

53
00:02:35.159 --> 00:02:37.960
<v Speaker 2>You've got the main HTML tag inside that, a head

54
00:02:38.000 --> 00:02:40.360
<v Speaker 2>section for stuff like the page title that's what shows

55
00:02:40.439 --> 00:02:42.319
<v Speaker 2>up in the browser tag, right, and then the body

56
00:02:42.680 --> 00:02:44.919
<v Speaker 2>that holds everything you actually see on the page. And

57
00:02:44.960 --> 00:02:47.039
<v Speaker 2>nesting these elements it just makes it all clear. Title

58
00:02:47.080 --> 00:02:50.800
<v Speaker 2>inside head, head and body inside HTML makes sense. Oh

59
00:02:50.840 --> 00:02:54.280
<v Speaker 2>and an important quirk, HTML ignores extra spaces. If you

60
00:02:54.280 --> 00:02:55.919
<v Speaker 2>want a line break, you have to use a specific

61
00:02:55.919 --> 00:02:56.439
<v Speaker 2>tag brewer.

62
00:02:56.800 --> 00:03:00.319
<v Speaker 1>So HTML for the bones the content, but CS as

63
00:03:00.360 --> 00:03:03.080
<v Speaker 1>the style. How does that work? You mentioned cascating.

64
00:03:03.280 --> 00:03:06.000
<v Speaker 2>Yeah, cascating it's a really powerful idea. It means styles

65
00:03:06.080 --> 00:03:09.039
<v Speaker 2>kind of trickled down. Styles applied to a parent element

66
00:03:09.080 --> 00:03:11.319
<v Speaker 2>will generally apply to its children unless you give the

67
00:03:11.400 --> 00:03:12.560
<v Speaker 2>child a more specific rule.

68
00:03:12.639 --> 00:03:14.240
<v Speaker 1>So you can set a font for the whole body,

69
00:03:14.360 --> 00:03:16.960
<v Speaker 1>but make one paragraph different exactly.

70
00:03:17.360 --> 00:03:20.199
<v Speaker 2>You can put CSS rules right inside an HTML tag

71
00:03:20.240 --> 00:03:24.080
<v Speaker 2>that's called inline style, but it gets messi fast. More

72
00:03:24.080 --> 00:03:25.840
<v Speaker 2>often you put it in a style block in the

73
00:03:25.879 --> 00:03:29.560
<v Speaker 2>head or ideally in separate dot CSS files, especially for

74
00:03:29.599 --> 00:03:30.639
<v Speaker 2>bicker sites, and it.

75
00:03:30.560 --> 00:03:33.599
<v Speaker 1>Controls things like color, font size with oh yeah.

76
00:03:33.560 --> 00:03:38.400
<v Speaker 2>Text aligne margin, padding, background color, tons of control over

77
00:03:38.439 --> 00:03:41.800
<v Speaker 2>the look. And the best practice, like the book emphasizes,

78
00:03:41.919 --> 00:03:46.120
<v Speaker 2>is the separation HTMIL for content, CSS for looks, JavaScript

79
00:03:46.199 --> 00:03:48.159
<v Speaker 2>for action keeps everything way.

80
00:03:48.120 --> 00:03:51.080
<v Speaker 1>Cleaner, makes maintaining it easier, I think. Okay, Now for

81
00:03:51.120 --> 00:03:54.919
<v Speaker 1>the action part JavaScript, the engine right JavaScript.

82
00:03:55.000 --> 00:03:58.759
<v Speaker 2>It's made of statements basically individual instructions usually end with

83
00:03:58.800 --> 00:04:02.879
<v Speaker 2>a semicolon, uses variables to hold data like a player

84
00:04:02.960 --> 00:04:06.680
<v Speaker 2>score or name, and functions to group chunks of code

85
00:04:06.759 --> 00:04:07.400
<v Speaker 2>you want to reuse.

86
00:04:07.479 --> 00:04:09.000
<v Speaker 1>Can you give a quick example.

87
00:04:08.759 --> 00:04:12.039
<v Speaker 2>Sure, A really simple one is document dot rit document

88
00:04:12.120 --> 00:04:14.719
<v Speaker 2>dot right. That line just writes the current date and

89
00:04:14.759 --> 00:04:18.360
<v Speaker 2>time right onto the web page. Here. Document is an object,

90
00:04:18.360 --> 00:04:21.480
<v Speaker 2>it represents the whole page. Right is a method an

91
00:04:21.519 --> 00:04:25.120
<v Speaker 2>action that object can do, and date is a built

92
00:04:25.120 --> 00:04:26.720
<v Speaker 2>in function that gives you the date.

93
00:04:26.920 --> 00:04:29.040
<v Speaker 1>So objects have methods that do things.

94
00:04:29.199 --> 00:04:32.879
<v Speaker 2>Got it exactly, and you declare variables, often with var

95
00:04:33.160 --> 00:04:36.560
<v Speaker 2>like var score eual zero. That single equal sign is

96
00:04:36.600 --> 00:04:40.000
<v Speaker 2>for assignment, putting the value zero into the variable score,

97
00:04:40.160 --> 00:04:43.519
<v Speaker 2>not for comparing things, right, that's different. For comparison, like

98
00:04:43.600 --> 00:04:45.759
<v Speaker 2>checking if the score is zero, you'd use two equal

99
00:04:45.839 --> 00:04:48.319
<v Speaker 2>signs score equal zero crucial difference.

100
00:04:48.399 --> 00:04:49.399
<v Speaker 1>Okay, good distinction.

101
00:04:49.680 --> 00:04:52.120
<v Speaker 2>And programmers write their own functions all the time. That's

102
00:04:52.199 --> 00:04:55.560
<v Speaker 2>key for reusing code, keeping things organized. Don't repeat yourself.

103
00:04:55.680 --> 00:04:58.879
<v Speaker 2>Dry is a big principle, makes sense. And one little

104
00:04:58.920 --> 00:05:01.399
<v Speaker 2>style thing you'll see everyone where camel.

105
00:05:01.120 --> 00:05:02.399
<v Speaker 1>Case camel case.

106
00:05:02.519 --> 00:05:05.519
<v Speaker 2>Yeah, for variable names like number of turns. See how

107
00:05:05.519 --> 00:05:07.879
<v Speaker 2>the O and T a capitalize like humps on a

108
00:05:07.920 --> 00:05:11.839
<v Speaker 2>camel just makes multi word names easier to read without spaces.

109
00:05:12.279 --> 00:05:16.160
<v Speaker 1>Ah, number turns, I see it. Okay, so that's the theory.

110
00:05:16.399 --> 00:05:21.560
<v Speaker 1>HTML structure, CSS style, JS action. But how does building

111
00:05:21.600 --> 00:05:25.720
<v Speaker 1>a game actually help cement these ideas. Let's unpack that right.

112
00:05:25.800 --> 00:05:28.680
<v Speaker 2>This is where it gets really practical and frankly fun.

113
00:05:28.720 --> 00:05:31.959
<v Speaker 2>How do you even draw things dynamically? HTML five gave

114
00:05:32.040 --> 00:05:33.319
<v Speaker 2>us the canvas element.

115
00:05:33.439 --> 00:05:36.120
<v Speaker 1>The canvas like a painter's canvas exactly.

116
00:05:36.279 --> 00:05:39.120
<v Speaker 2>It's your digital drawing board. It lets you draw lines

117
00:05:39.240 --> 00:05:42.120
<v Speaker 2>shapes images directly onto a part of the screen, a

118
00:05:42.240 --> 00:05:45.279
<v Speaker 2>huge step up from old HTML's boxy feel.

119
00:05:45.160 --> 00:05:48.319
<v Speaker 1>So you're not stuck with just text and static images.

120
00:05:48.079 --> 00:05:50.600
<v Speaker 2>Not at all. But the coordinate system is a bit quirky.

121
00:05:50.800 --> 00:05:54.319
<v Speaker 2>Quirky how the starting point coordinates zero zero isn't the

122
00:05:54.360 --> 00:05:56.759
<v Speaker 2>bottom left like in math class. It's the upper left

123
00:05:56.759 --> 00:05:59.160
<v Speaker 2>corner of the canvas nupper left okay, and the wy

124
00:05:59.199 --> 00:06:02.199
<v Speaker 2>valu's incre as you go down x increases to the

125
00:06:02.279 --> 00:06:04.720
<v Speaker 2>right like normal. But why is flipped from what you

126
00:06:04.800 --> 00:06:05.920
<v Speaker 2>might expect. Huh.

127
00:06:06.079 --> 00:06:07.560
<v Speaker 1>Takes getting used to, I guess it does.

128
00:06:07.639 --> 00:06:09.720
<v Speaker 2>But once you have that, you can draw use methods

129
00:06:09.759 --> 00:06:12.519
<v Speaker 2>like movetoe to position your virtual pen and then line

130
00:06:12.560 --> 00:06:14.959
<v Speaker 2>toe to draw a line to another point, like connecting

131
00:06:15.000 --> 00:06:17.600
<v Speaker 2>the dots sort of. Yeah, And you see this perfectly

132
00:06:17.639 --> 00:06:20.240
<v Speaker 2>in the slingshot game from the book, drawing the slingshot

133
00:06:20.279 --> 00:06:20.839
<v Speaker 2>string as.

134
00:06:20.720 --> 00:06:23.519
<v Speaker 1>You pull it back right okay, and circles arcs.

135
00:06:23.920 --> 00:06:26.600
<v Speaker 2>There's an arc method for that. But here's another fun detail.

136
00:06:27.279 --> 00:06:31.680
<v Speaker 2>Angles in most programming, including JavaScript for canvas, are in radians,

137
00:06:31.879 --> 00:06:33.399
<v Speaker 2>not degrees radiance.

138
00:06:33.639 --> 00:06:35.879
<v Speaker 1>Oh boy, I remember those from math, dot pi.

139
00:06:35.800 --> 00:06:38.439
<v Speaker 2>And all that exactly. So three hundred and sixty degrees

140
00:06:38.560 --> 00:06:41.720
<v Speaker 2>is two math dot pi. Radians one hundred and eighty

141
00:06:41.720 --> 00:06:45.000
<v Speaker 2>degrees is math dot pi. It's essential for getting circles

142
00:06:45.000 --> 00:06:45.879
<v Speaker 2>and rotations right.

143
00:06:46.000 --> 00:06:48.480
<v Speaker 1>Okay, note to self brush up on radiance.

144
00:06:48.639 --> 00:06:51.360
<v Speaker 2>Huh yeah. Beyond lines and arcs, you can use draw

145
00:06:51.399 --> 00:06:55.199
<v Speaker 2>image to slap images onto the canvas or create smooth

146
00:06:55.240 --> 00:06:59.959
<v Speaker 2>color transitions with create linear gradient the bouncing ballgame. Use

147
00:07:00.160 --> 00:07:03.000
<v Speaker 2>is this for cool looking walls. Nice And for text

148
00:07:03.120 --> 00:07:06.079
<v Speaker 2>like scores or messages, use fill text. You see that

149
00:07:06.120 --> 00:07:07.759
<v Speaker 2>in the memory game or Hangman.

150
00:07:07.519 --> 00:07:09.639
<v Speaker 1>So you can write text right onto this drawing surface.

151
00:07:09.720 --> 00:07:15.079
<v Speaker 2>Yep, and super important for games. Transformations things like save, translate, rotate,

152
00:07:15.160 --> 00:07:15.680
<v Speaker 2>and restore.

153
00:07:15.759 --> 00:07:16.319
<v Speaker 1>What do those do?

154
00:07:16.639 --> 00:07:23.160
<v Speaker 2>Save remembers the current state like position rotation. Translate moves

155
00:07:23.199 --> 00:07:27.680
<v Speaker 2>the origin point zero zero somewhere else. Rotate spins the

156
00:07:27.720 --> 00:07:32.319
<v Speaker 2>coordinate system, and restore puts everything back to how it

157
00:07:32.480 --> 00:07:33.319
<v Speaker 2>was when you saved.

158
00:07:33.439 --> 00:07:34.240
<v Speaker 1>Why would you do that?

159
00:07:34.360 --> 00:07:36.839
<v Speaker 2>Think about the cannon ball game. You want to rotate

160
00:07:36.879 --> 00:07:39.519
<v Speaker 2>the cannon around its base. Right, you translate to the

161
00:07:39.519 --> 00:07:43.279
<v Speaker 2>cannon's base, rotate it, draw the cannon, then restore so

162
00:07:43.360 --> 00:07:45.079
<v Speaker 2>the rest of your drawing isn't rotated.

163
00:07:45.319 --> 00:07:48.240
<v Speaker 1>Ah, clever, So you isolate the rotation just to the.

164
00:07:48.199 --> 00:07:50.360
<v Speaker 2>Cannon precisely keeps things manageable.

165
00:07:50.560 --> 00:07:53.680
<v Speaker 1>Okay, so that's getting things drawn, but making them move

166
00:07:53.759 --> 00:07:56.720
<v Speaker 1>and react to me the player. That sounds like JavaScript.

167
00:07:56.759 --> 00:07:59.839
<v Speaker 2>Again absolutely, This is where event handling comes in. The

168
00:08:00.079 --> 00:08:02.639
<v Speaker 2>page needs to listen for and react to things the

169
00:08:02.759 --> 00:08:07.000
<v Speaker 2>user does events clicking the mouse exactly. Mouse events are huge.

170
00:08:07.000 --> 00:08:09.879
<v Speaker 2>The Slingshot game is perfect here. Mouse doown fires when

171
00:08:09.879 --> 00:08:12.279
<v Speaker 2>you press the mass button that starts the poll. Mass

172
00:08:12.319 --> 00:08:14.120
<v Speaker 2>move fires as you move the mouse while the button

173
00:08:14.160 --> 00:08:17.079
<v Speaker 2>is down that stretches the string, and mouse up fires

174
00:08:17.120 --> 00:08:19.240
<v Speaker 2>when you release the button that launches the projectile.

175
00:08:19.480 --> 00:08:23.000
<v Speaker 1>Okay, mouse down, mouse move, mouse up makes sense. And

176
00:08:23.040 --> 00:08:25.600
<v Speaker 1>you connect code to these events.

177
00:08:25.279 --> 00:08:29.199
<v Speaker 2>Yep, using something called ad event listener. You tell the browser, hey,

178
00:08:29.240 --> 00:08:31.639
<v Speaker 2>listen for a click on this button, and when it happens,

179
00:08:31.720 --> 00:08:32.440
<v Speaker 2>run this function.

180
00:08:33.120 --> 00:08:35.799
<v Speaker 1>Got it? What about? How do you make it happen repeatedly?

181
00:08:35.960 --> 00:08:38.039
<v Speaker 2>Usually with set interval. You give it a function to

182
00:08:38.120 --> 00:08:40.600
<v Speaker 2>run and a time interval in milliseconds. Say run this

183
00:08:40.679 --> 00:08:44.639
<v Speaker 2>update function every thirty milliseconds. That creates the continuous motion

184
00:08:44.720 --> 00:08:47.240
<v Speaker 2>for the bouncing ball or those fly in effects in

185
00:08:47.360 --> 00:08:49.559
<v Speaker 2>Rock Paper Scissors, and you can stop it yep, with

186
00:08:49.600 --> 00:08:52.080
<v Speaker 2>clear interval. You need that when the game ends or

187
00:08:52.120 --> 00:08:55.240
<v Speaker 2>the animation sequence is over. There's also set time out,

188
00:08:55.399 --> 00:08:59.279
<v Speaker 2>which runs a function once after a specified delay, useful

189
00:08:59.320 --> 00:09:02.879
<v Speaker 2>for pauses like in the Memory game before mismatched cards.

190
00:09:02.600 --> 00:09:05.480
<v Speaker 1>Split back over right, set interval for loops, set time

191
00:09:05.519 --> 00:09:06.360
<v Speaker 1>out for delays.

192
00:09:06.480 --> 00:09:09.840
<v Speaker 2>Okay, Now games need more than just movement. They need

193
00:09:09.919 --> 00:09:15.200
<v Speaker 2>some intelligence, right rules, randomness keeping track of things.

194
00:09:15.320 --> 00:09:17.879
<v Speaker 1>Yeah, like how does the computer opponent in Rock paper

195
00:09:17.879 --> 00:09:21.360
<v Speaker 1>scissors decide it's move? Or how does the dice game work?

196
00:09:21.600 --> 00:09:25.720
<v Speaker 2>Good questions For randomness, JavaScript gives us math dot random.

197
00:09:25.759 --> 00:09:29.440
<v Speaker 2>It generates a number between zero and just under.

198
00:09:29.200 --> 00:09:31.799
<v Speaker 1>One a decimal. How's that useful for dice?

199
00:09:32.080 --> 00:09:34.600
<v Speaker 2>You can mine it with math dot floor. Math dot

200
00:09:34.600 --> 00:09:37.840
<v Speaker 2>floor rounds down to the near sohole number. So if

201
00:09:37.840 --> 00:09:40.279
<v Speaker 2>you want a number from zero to two for rock zero,

202
00:09:40.639 --> 00:09:43.960
<v Speaker 2>paper one scissors two, you can do math dot floor

203
00:09:44.000 --> 00:09:45.279
<v Speaker 2>math dot random three.

204
00:09:45.559 --> 00:09:49.720
<v Speaker 1>Okay, math dot random three gives zero to just under three.

205
00:09:49.799 --> 00:09:52.679
<v Speaker 1>Mach dot floor chops off the decimal, giving zero one

206
00:09:52.840 --> 00:09:54.120
<v Speaker 1>or two exactly.

207
00:09:54.360 --> 00:09:56.759
<v Speaker 2>For a six sided die, it'd be math dot floor

208
00:09:56.879 --> 00:10:00.840
<v Speaker 2>math dot random six plus one to get one through six. Technically,

209
00:10:00.919 --> 00:10:04.639
<v Speaker 2>it's pseudo random. Computers follow instructions, so it's not truly random,

210
00:10:04.639 --> 00:10:05.919
<v Speaker 2>but it's unpredictable enough.

211
00:10:05.799 --> 00:10:08.080
<v Speaker 1>For games, close enough for rock paper scissors anyway.

212
00:10:08.200 --> 00:10:10.600
<v Speaker 2>Right then you need logic game rolls. That's where I

213
00:10:10.679 --> 00:10:11.679
<v Speaker 2>false statements come in.

214
00:10:11.840 --> 00:10:14.200
<v Speaker 1>Like if the dice roll is seven, then you.

215
00:10:14.240 --> 00:10:18.159
<v Speaker 2>Win precisely or false a fils for multiple conditions the

216
00:10:18.200 --> 00:10:21.039
<v Speaker 2>dice game example, shooes this well, win on seven or eleven,

217
00:10:21.240 --> 00:10:23.559
<v Speaker 2>lose on two, three or twelve on the first roll,

218
00:10:23.919 --> 00:10:27.039
<v Speaker 2>otherwise establish a point. There's also switch statements, which can

219
00:10:27.039 --> 00:10:30.639
<v Speaker 2>be cleaner. Sometimes we're checking one variable against multiple specific values.

220
00:10:30.679 --> 00:10:33.679
<v Speaker 1>So that's the decision making. What about remembering things like

221
00:10:33.919 --> 00:10:35.799
<v Speaker 1>in the dice game, knowing if it's the first roll

222
00:10:35.879 --> 00:10:36.440
<v Speaker 1>or later roll.

223
00:10:36.600 --> 00:10:40.159
<v Speaker 2>That's managing the application state. You need variables to keep

224
00:10:40.200 --> 00:10:43.879
<v Speaker 2>track of the current situation. Often these are global variables,

225
00:10:44.320 --> 00:10:48.240
<v Speaker 2>variables declared outside functions so they're accessible everywhere and retain

226
00:10:48.279 --> 00:10:51.879
<v Speaker 2>their value between function calls. You might have a variable

227
00:10:51.960 --> 00:10:54.279
<v Speaker 2>it's your first throw set to true initially, then set

228
00:10:54.320 --> 00:10:55.960
<v Speaker 2>it to false after the first roll.

229
00:10:56.120 --> 00:10:58.519
<v Speaker 1>Okay, So state variables track what's going on.

230
00:10:58.679 --> 00:11:01.720
<v Speaker 2>Yep, and another key part for games like bouncing ball

231
00:11:01.840 --> 00:11:03.559
<v Speaker 2>or mazes is collision.

232
00:11:03.240 --> 00:11:06.399
<v Speaker 1>Detection, figuring out if things have hit each other exactly.

233
00:11:06.840 --> 00:11:09.679
<v Speaker 2>The code needs to calculate based on object positions and

234
00:11:09.720 --> 00:11:13.039
<v Speaker 2>sizes if they've overlapped, if the ball hits a wall

235
00:11:13.399 --> 00:11:16.679
<v Speaker 2>or the player hits a maze boundary. This usually involves

236
00:11:16.679 --> 00:11:20.080
<v Speaker 2>some math checking if coordinates are within certain boundaries, or

237
00:11:20.120 --> 00:11:22.720
<v Speaker 2>if the distance between two objects is less than their

238
00:11:22.720 --> 00:11:23.600
<v Speaker 2>combined radii.

239
00:11:24.039 --> 00:11:27.919
<v Speaker 1>For circles, mass strikes again always okay, this is getting complex.

240
00:11:28.519 --> 00:11:31.240
<v Speaker 1>If you have lots of balls bouncing, or lots of

241
00:11:31.320 --> 00:11:34.039
<v Speaker 1>maze walls or cards in a deck, how do you

242
00:11:34.159 --> 00:11:36.600
<v Speaker 1>organize all that data? Sounds like it could get messy.

243
00:11:36.679 --> 00:11:39.919
<v Speaker 2>It absolutely could. That's why data structures are critical. The simplest,

244
00:11:39.960 --> 00:11:41.639
<v Speaker 2>most fundamental one is the array.

245
00:11:41.759 --> 00:11:44.759
<v Speaker 1>It's like a list, exactly, an ordered list of items.

246
00:11:44.759 --> 00:11:46.440
<v Speaker 1>You can have an array of scores, an array of

247
00:11:46.519 --> 00:11:49.200
<v Speaker 1>enemy positions, whatever. And the book shows how you can

248
00:11:49.240 --> 00:11:53.080
<v Speaker 1>have arrays of arrays, basically a grid or table structure.

249
00:11:53.519 --> 00:11:55.960
<v Speaker 1>The memory game uses this for pairs of matching cards.

250
00:11:55.960 --> 00:11:58.799
<v Speaker 1>The quiz game uses it for facts, linking questions and answers.

251
00:11:59.000 --> 00:12:03.279
<v Speaker 2>Arrays with an arrays okay, and elements are numbered starting

252
00:12:03.279 --> 00:12:03.919
<v Speaker 2>from zero.

253
00:12:04.200 --> 00:12:07.080
<v Speaker 1>Always remember the first item in a JavaScript array is

254
00:12:07.080 --> 00:12:10.039
<v Speaker 1>at index zero, the second at index one, and so on.

255
00:12:10.279 --> 00:12:11.480
<v Speaker 1>Trips up beginners.

256
00:12:11.120 --> 00:12:12.360
<v Speaker 2>All the time index zero.

257
00:12:12.679 --> 00:12:13.039
<v Speaker 1>Got it.

258
00:12:13.600 --> 00:12:15.639
<v Speaker 2>But what if you need something more complex than just

259
00:12:15.679 --> 00:12:18.360
<v Speaker 2>a list, Like a playing card needs a suit and

260
00:12:18.440 --> 00:12:20.480
<v Speaker 2>a rank and maybe an image.

261
00:12:20.120 --> 00:12:23.440
<v Speaker 1>Perfect example, that's where you create your own programmer defined.

262
00:12:23.120 --> 00:12:24.960
<v Speaker 2>Objects, making your own things.

263
00:12:25.080 --> 00:12:27.879
<v Speaker 1>Pretty much, you define a blueprint like a card object,

264
00:12:28.039 --> 00:12:30.360
<v Speaker 1>then you can create instances of that card, each with

265
00:12:30.399 --> 00:12:34.000
<v Speaker 1>its own properties card one dot suit, hearts card one

266
00:12:34.080 --> 00:12:36.840
<v Speaker 1>dot value, ten card one dot picture, King of Hearts

267
00:12:36.879 --> 00:12:37.480
<v Speaker 1>dot PNG.

268
00:12:37.879 --> 00:12:40.559
<v Speaker 2>So each card is an object with its own data

269
00:12:40.600 --> 00:12:45.080
<v Speaker 2>bundle together exactly. The Maze game might have wall objects,

270
00:12:45.159 --> 00:12:48.639
<v Speaker 2>each with its x, y width and hype properties. It's

271
00:12:48.720 --> 00:12:52.000
<v Speaker 2>incredibly powerful for organizing complex game elements.

272
00:12:52.159 --> 00:12:55.039
<v Speaker 1>And how do you manage lots of these objects? Yeah,

273
00:12:55.080 --> 00:12:56.919
<v Speaker 1>all the things on the screen that need to be drawn.

274
00:12:57.120 --> 00:13:00.000
<v Speaker 2>A common pattern show in the Cannonball and Slingshot games

275
00:13:00.440 --> 00:13:03.559
<v Speaker 2>is to have an array maybe called everything, that holds

276
00:13:03.559 --> 00:13:05.360
<v Speaker 2>all the objects currently active.

277
00:13:05.039 --> 00:13:06.840
<v Speaker 1>In the game, an array of objects.

278
00:13:07.360 --> 00:13:09.759
<v Speaker 2>When you need to draw everything, you just loop through

279
00:13:09.799 --> 00:13:13.240
<v Speaker 2>that everything array and tell each object to draw itself

280
00:13:13.320 --> 00:13:16.440
<v Speaker 2>using its own draw method. And arrays have methods like

281
00:13:16.519 --> 00:13:18.360
<v Speaker 2>push to add a new object to the end like

282
00:13:18.440 --> 00:13:21.759
<v Speaker 2>adding a cannon ball when fired, and splice to remove

283
00:13:21.799 --> 00:13:24.039
<v Speaker 2>an object from the middle like when a target is hit,

284
00:13:24.240 --> 00:13:24.679
<v Speaker 2>push to.

285
00:13:24.639 --> 00:13:27.000
<v Speaker 1>Add, splice to remove. Okay, that keeps the main list.

286
00:13:26.840 --> 00:13:30.159
<v Speaker 2>Tidy, right, It's all about managing that complexity and beyond

287
00:13:30.159 --> 00:13:33.399
<v Speaker 2>the core game mechanics. HTML five and its friends offer

288
00:13:33.440 --> 00:13:36.600
<v Speaker 2>ways to really enhance the whole user experience by way well.

289
00:13:36.639 --> 00:13:40.480
<v Speaker 2>Think about form input. HTML five added new input types

290
00:13:40.519 --> 00:13:44.600
<v Speaker 2>that can automatically validate user entries. For instance, input type

291
00:13:44.679 --> 00:13:47.919
<v Speaker 2>number min one max ten tells the browser to only

292
00:13:47.960 --> 00:13:51.200
<v Speaker 2>accept numbers between one and ten. The browser can handle

293
00:13:51.240 --> 00:13:52.440
<v Speaker 2>the basic check for you.

294
00:13:52.519 --> 00:13:53.440
<v Speaker 1>Oh that's built in.

295
00:13:53.720 --> 00:13:56.960
<v Speaker 2>Nice Yeah, and CSS can style these inputs based on

296
00:13:57.000 --> 00:14:00.679
<v Speaker 2>whether they're valid or invalid. The bouncing balls shows how

297
00:14:00.679 --> 00:14:03.440
<v Speaker 2>an input field might turn red if you enter something wrong,

298
00:14:03.720 --> 00:14:07.600
<v Speaker 2>giving immediate feedback without needing complex JavaScript for simple checks.

299
00:14:07.679 --> 00:14:09.720
<v Speaker 1>Instant visual feedback cool.

300
00:14:10.000 --> 00:14:12.879
<v Speaker 2>Then there's audio and video. H to Mail five made

301
00:14:12.879 --> 00:14:15.799
<v Speaker 2>embedding media way easier with the audio and video tags,

302
00:14:15.840 --> 00:14:18.519
<v Speaker 2>just drop them in pretty much. The quiz game example

303
00:14:18.559 --> 00:14:21.759
<v Speaker 2>shows using video to play clips, you often include multiple

304
00:14:21.759 --> 00:14:24.679
<v Speaker 2>source elements inside pointing to different file formats like MP

305
00:14:24.759 --> 00:14:29.120
<v Speaker 2>four webmog Why different format browser compatibility. Yeah, not all

306
00:14:29.120 --> 00:14:32.279
<v Speaker 2>browsers support the same video or audio formats, so providing

307
00:14:32.320 --> 00:14:34.000
<v Speaker 2>options ensures it works for more people.

308
00:14:34.080 --> 00:14:34.480
<v Speaker 1>Makes sense.

309
00:14:34.480 --> 00:14:37.879
<v Speaker 2>Any catches AutoPlay Browsers have gotten really stripped about letting

310
00:14:37.879 --> 00:14:41.200
<v Speaker 2>pages automatically play sound or video because well, it can

311
00:14:41.240 --> 00:14:45.200
<v Speaker 2>be annoying. True, so often media won't play until the

312
00:14:45.279 --> 00:14:48.679
<v Speaker 2>user interacts with the page, like clicking a button. One

313
00:14:48.759 --> 00:14:51.759
<v Speaker 2>workaround shown in the book is using the muted attribute

314
00:14:51.759 --> 00:14:53.879
<v Speaker 2>on a video. It might be allowed to AutoPlay if

315
00:14:53.919 --> 00:14:54.639
<v Speaker 2>it starts silent.

316
00:14:54.799 --> 00:14:55.480
<v Speaker 1>Ah clever.

317
00:14:55.600 --> 00:14:58.480
<v Speaker 2>And if you have multiple sounds like in Rock paper Scissors,

318
00:14:58.639 --> 00:15:01.799
<v Speaker 2>maybe a sound for rock paper scissors win lose. You

319
00:15:01.840 --> 00:15:04.759
<v Speaker 2>can get a list of all audio elements using document

320
00:15:04.879 --> 00:15:08.440
<v Speaker 2>dot get elements by tag name audio and manage them

321
00:15:08.480 --> 00:15:09.080
<v Speaker 2>through code.

322
00:15:09.240 --> 00:15:11.000
<v Speaker 1>Okay, managing sounds? What else?

323
00:15:11.200 --> 00:15:13.559
<v Speaker 2>A really powerful one local storage.

324
00:15:13.240 --> 00:15:15.000
<v Speaker 1>Bo whole storage store and stuff on my.

325
00:15:14.960 --> 00:15:19.360
<v Speaker 2>Computer exactly HTML five's local storage. Let's a web application

326
00:15:19.600 --> 00:15:22.600
<v Speaker 2>save data directly in your browser and it stays there

327
00:15:22.679 --> 00:15:24.919
<v Speaker 2>even after you close the browser and come back later.

328
00:15:25.000 --> 00:15:28.080
<v Speaker 1>WHOA like cookies but more kind of like cookies? Yeah?

329
00:15:28.159 --> 00:15:30.159
<v Speaker 2>Ye but design for larger amounts of data, and it

330
00:15:30.200 --> 00:15:32.559
<v Speaker 2>doesn't get sent back to the server with every request.

331
00:15:32.799 --> 00:15:35.559
<v Speaker 2>It's meant for the application to use locally. The Maze

332
00:15:35.600 --> 00:15:39.080
<v Speaker 2>game uses it beautifully to save the Maize layout you created, so.

333
00:15:39.039 --> 00:15:42.240
<v Speaker 1>I could build a Maze, close my browser, come back tomorrow,

334
00:15:42.519 --> 00:15:44.000
<v Speaker 1>and it's still there if.

335
00:15:43.840 --> 00:15:46.840
<v Speaker 2>The game uses local storage to save it. Yes, it's

336
00:15:46.840 --> 00:15:51.240
<v Speaker 2>incredibly useful for saving game progress, user preferences, offline data.

337
00:15:51.559 --> 00:15:53.600
<v Speaker 2>But you know, it also raises interesting points about what

338
00:15:53.639 --> 00:15:56.080
<v Speaker 2>websites store locally on your machine. It's key to how

339
00:15:56.080 --> 00:15:58.440
<v Speaker 2>many sites remember you or your settings, and it.

340
00:15:58.440 --> 00:15:59.919
<v Speaker 1>Ties into things like behavioral market.

341
00:16:00.200 --> 00:16:03.720
<v Speaker 2>Potentially it can be part of that ecosystem. Yes, storing

342
00:16:03.759 --> 00:16:06.879
<v Speaker 2>identifiers or preferences locally. The key thing from the book's

343
00:16:06.919 --> 00:16:10.919
<v Speaker 2>perspective is its technical capability for saving application state persistently.

344
00:16:11.480 --> 00:16:15.559
<v Speaker 2>One detail. Local storage only stores data as tech strings,

345
00:16:15.799 --> 00:16:18.279
<v Speaker 2>so if you want to save complex data like the

346
00:16:18.360 --> 00:16:20.440
<v Speaker 2>array of walls in the Maze, you need to convert

347
00:16:20.440 --> 00:16:22.559
<v Speaker 2>it to a string first, maybe using the join method,

348
00:16:22.600 --> 00:16:24.480
<v Speaker 2>and then parse it back using split when.

349
00:16:24.320 --> 00:16:28.559
<v Speaker 1>You load it, encode and decode. Okay, wow, so stepping back,

350
00:16:28.879 --> 00:16:31.399
<v Speaker 1>what does this all mean for you? Listening. We've really

351
00:16:31.480 --> 00:16:34.200
<v Speaker 1>unpacked a lot here. We've seen HTML five giving structure,

352
00:16:34.759 --> 00:16:38.360
<v Speaker 1>CSS adding the style, and JavaScript bringing it all live

353
00:16:38.399 --> 00:16:40.879
<v Speaker 1>with interaction and logic. And we saw it all through

354
00:16:40.919 --> 00:16:45.480
<v Speaker 1>games randomized bouncing balls, rotating cannons, solvable meses. It shows

355
00:16:45.480 --> 00:16:49.399
<v Speaker 1>the power packed into just these three core web technologies.

356
00:16:48.960 --> 00:16:51.679
<v Speaker 2>It really does. And this kind of deep dive looking

357
00:16:51.720 --> 00:16:54.240
<v Speaker 2>through the lens of games, I think it shows that

358
00:16:54.320 --> 00:16:58.120
<v Speaker 2>programming isn't just about typing code. It's about problem solving,

359
00:16:58.720 --> 00:17:03.440
<v Speaker 2>breaking down complex ideas into smaller manageable steps. It's about

360
00:17:03.480 --> 00:17:07.119
<v Speaker 2>managing state, knowing what's happening when, and it's about responding

361
00:17:07.160 --> 00:17:10.079
<v Speaker 2>to users. The art of it, like the author suggests,

362
00:17:10.119 --> 00:17:13.480
<v Speaker 2>really shines through when you see those clever solutions using

363
00:17:13.519 --> 00:17:17.240
<v Speaker 2>method eaight into for precise aiming angles, or a smart

364
00:17:17.279 --> 00:17:21.319
<v Speaker 2>algorithm like fisheryates for shuffling cards properly. That's where creativity

365
00:17:21.359 --> 00:17:22.000
<v Speaker 2>meets logic.

366
00:17:22.240 --> 00:17:25.240
<v Speaker 1>Yeah, hopefully this whole discussion gives you a new appreciation

367
00:17:25.319 --> 00:17:27.599
<v Speaker 1>for all those web apps you use daily. Maybe you

368
00:17:27.640 --> 00:17:30.000
<v Speaker 1>see them a bit differently now, and perhaps it's even

369
00:17:30.000 --> 00:17:32.640
<v Speaker 1>sparked some curiosity. Maybe you're thinking about how you could

370
00:17:32.680 --> 00:17:35.279
<v Speaker 1>use these tools even in a small way to build

371
00:17:35.359 --> 00:17:36.640
<v Speaker 1>something or make it your own.

372
00:17:36.880 --> 00:17:39.799
<v Speaker 2>Definitely, And here's a final thought to chew on. If

373
00:17:39.799 --> 00:17:42.519
<v Speaker 2>you can describe the rules of a game, how it flows,

374
00:17:42.680 --> 00:17:46.960
<v Speaker 2>how players interact, think about that process. What other processes

375
00:17:47.039 --> 00:17:49.480
<v Speaker 2>or systems in the real world could you describe that way?

376
00:17:49.519 --> 00:17:52.839
<v Speaker 2>What else could you potentially model, simulate, or even automate

377
00:17:52.920 --> 00:17:55.119
<v Speaker 2>using just these fundamental web tools. Once you start seeing

378
00:17:55.119 --> 00:17:56.720
<v Speaker 2>the web not just as something you consume, but as

379
00:17:56.720 --> 00:17:59.599
<v Speaker 2>a platform you can build on, while the possibilities really

380
00:17:59.640 --> 00:18:00.279
<v Speaker 2>open up up