Learn HTML5 by Creating Fun Games

دوره آموزش html

Preface 1
Chapter 1: An Overview of HTML5 7
What is HTML? 7
A brief history of HTML 8
The evolution of the World Wide Web 8
What is HTML5? 9
HTML5 – the next step in the evolution 9
HTML5 is not a single feature 10
More semantic document structure 10
A warning about performance 15
Native features of the browser 16
Automatic form validation 18
New input types 19
Telephone-friendly hyperlinks 19
CSS-based DOM selectors 19
Text-to-speech 20
CSS3 20
Separation of concerns 20
Reusability of visual design 21
Ease of maintenance 22
Scalability 22
The evolution of CSS 22
Experimental features and vendor prefixes 23
CSS preprocessors 24
CSS3 modules 25
Style attributes 26
Selectors 26
Colors 27
Media queries 28JavaScript APIs 31
New JavaScript APIs 31
The Web as a platform 32
The Open Web 33
HTML5 – a game changer 34
Learning HTML5 through game development 35
Summary 36
Chapter 2: HTML5 Typography 39
The game 39
Game elements 42
The options widget 43
The game title 43
Boat 44
Sky 44
Waves 44
Tracks 44
Players 44
The main container 45
Words to write 45
Words written 45
The message container 45
The message title 45
The new champion form 46
Leaderboard 46
Game controls 47
HTML 48
The web form 48
Data attributes 51
CSS 51
Web fonts 51
Transitions 52
Animations 53
The text shadows 56
The box shadows 57
The border radius 58
JavaScript 59
Query selectors 60
API usage 60
Web forms 60
New input types 60
Form validation 75
Used in the game 77
Data attributes 78Query selectors 82
Used in the game 85
Web fonts 85
Transitions 86
Animations 89
The text shadow 91
The box shadow 92
The border radius 93
The code 94
The HTML structure 94
JavaScript and logic 95
Summary 100
Chapter 3: Understanding the Gravity of HTML5 101
Browser compatibility 101
Supporting different browsers 102
HTML5 libraries and frameworks 103
jQuery 103
Google Web Toolkit 105
Supporting browsers with limited HTML5 features 106
Gracefully degrade 106
Polyfills 109
Modernizr 109
The game 110
Code structure 111
API usage 113
Web audio 113
Scalable Vector Graphics (SVG) 115
Drag-and-drop 117
Web audio 119
How to use it 120
SVG 122
How to use it 126
Drag-and-drop 136
How to use it 137
Summary 139
Chapter 4: Using HTML5 to Catch a Snake 141
The game 142
API usage 143
How to use it 143
Typed arrays 147
How to use it 149Typed array view types 153
Canvas 154
How to use it 155
clearRect 157
Fill and stroke 158
Lines 159
Shapes 161
Text 162
Transformations 162
Drawing images 163
Manipulating pixels 166
Web workers 169
How to use it 169
Offline application cache 173
How to use it 173
The code 176
Summary 182
Chapter 5: Improving the Snake Game 183
The game 184
API usage 185
Web messaging 185
How to use it 185
Web storage 192
Local storage 194
Session storage 196
IndexedDB 197
IDBFactory 199
IDBOpenDBRequest 200
IDBTransaction 202
readwrite 203
readonly 203
versionchange 203
Getting elements 204
Deleting elements 209
The code 211
Saving the high score 212
Taking screenshots of the game 213
Summary 216
Chapter 6: Adding Features to Your Game 219
Advanced HTML5 APIs 220
WebGL 221
Hello, World! 221Web sockets 231
The connection 233
The server-side code 234
The client-side code 234
Video 235
Attributes 238
Events 238
Geolocation 243
A Google Maps example 247
Upcoming CSS features 249
Programming in the bleeding edge 249
CSS shaders 251
Using custom filters 253
CSS columns 259
The column rule 261
Column breaks 262
CSS regions and exclusions 264
Exclusions 268
Defining shapes 274
Summary 274
Chapter 7: HTML5 and Mobile Game Development 275
Desktop versus mobile 276
Major implementation considerations 277
Screen size and orientation 277
Computing power 278
Battery life 279
Browser differences 279
Best practices 280
Degrade gracefully and enhance progressively 280
Finger-friendly design 283
Save battery life 284
Plan for offline 285
Offering a desktop version 285
Understanding media queries 285
width 288
height 290
device-width 291
device-height 292
orientation 292
aspect-ratio 293
device-aspect-ratio 295
color 298
color-index 299
monochrome 299resolution 300
scan 301
grid 301
Understanding touch events 302
touchstart 303
touches 303
changedTouches 303
targetTouches 303
touchend 304
touchmove 304
The touch object 305
identifier 305
screenX 307
screenY 307
clientX 307
clientY 308
pageX 308
pageY 308
radiusX 309
radiusY 310
rotationAngle 313
force 313
target 314
The game 314
Code structure 316
/css 316
/img 318
/js 319
/components 319
/entities 328
/widgets 331
Canvas.js 332
EnemyManager.js 335
GameLoop.js 338
PhysicsManager.js 339
Vec2.js 340
main.js 340
index.html 343
Mobile optimizations 343
Combine resources 344
Track touches by IDs 344
Use CSS animations with caution 345
Use separate canvases for each game layer 346
Use image atlases 347
Summary 348
Index 349