Preface xv
Acknowledgments xxi
About the Author xxiii
Chapter 1: Introduction 1
1.1 Snail Bait 3
1.2 HTML5 Game Development Best Practices 10
1.3 Special Features 16
1.4 Snail Bait’s HTML and CSS 18
1.5 Snail Bait’s Humble Beginning 25
1.6 The Use of JavaScript in This Book 28
1.7 Conclusion 31
1.8 Exercises 31
Chapter 2: Raw Materials and Development Environment 33
2.1 Use Developer Tools 35
2.2 Obtain Assets 50
2.3 Use CSS Backgrounds 54
2.4 Generate Favicons 56
2.5 Shorten the Coding Cycle 58
2.6 Conclusion 59
2.7 Exercises 60
Chapter 3: Graphics and Animation 61
3.1 Draw Graphics and Images with the HTML5 canvas Element 64
3.2 Implement Smooth HTML5 Animations 70
3.3 Implement a Game Loop 75
3.4 Calculate Frame Rates 77
3.5 Scroll the Background 78
3.6 Create Time-Based Motion 85
3.7 Reverse Scroll Direction 86
3.8 Draw Animation Frames 86
3.9 Use Parallax to Create the Illusion of Depth 87
3.10 Conclusion 90
3.11 Exercises 90
Chapter 4: Infrastructure 93
4.1 Encapsulate Game Functions in a JavaScript Object 95
4.2 Understand JavaScript’s Persnickety this Reference 100
4.3 Handle Keyboard Input 103
4.4 Pause or Resume the Game When the Player Presses the p Key 105
4.5 Freeze the Game to Ensure It Resumes Exactly Where It Left Off 107
4.6 Pause the Game When the Window Loses Focus 108
4.7 Resume a Paused Game with an Animated Countdown 110
4.8 Conclusion 115
4.9 Exercises 116
Chapter 5: Loading Screens 117
5.1 Define Snail Bait’s Chrome 120
5.2 Fade Elements In and Out with CSS Transitions 123
5.3 Fade Any Element In or Out That Has a CSS Transition Associated with Its Opacity 132
5.4 Implement the Loading Screen 135
5.5 Reveal the Game 140
5.6 Conclusion 144
5.7 Exercises 144
Chapter 6: Sprites 147
6.1 Sprite Objects 149
6.2 Incorporate Sprites into a Game Loop 156
6.3 Implement Sprite Artists 160
6.4 Create and Initialize a Game’s Sprites 167
6.5 Define Sprites with Metadata 171
6.6 Scroll Sprites 174
6.7 Conclusion 176
6.8 Exercises 177
Chapter 7: Sprite Behaviors 179
7.1 Behavior Fundamentals 182
7.2 Runner Behaviors 184
7.3 The Runner’s Run Behavior 187
7.4 Flyweight Behaviors 190
7.5 Game-Independent Behaviors 193
7.6 Combine Behaviors 199
7.7 Conclusion 205
7.8 Exercises 206
Chapter 8: Time, Part I: Finite Behaviors and Linear Motion 207
8.1 Implement an Initial Jump Algorithm 209
8.2 Shift Responsibility for Jumping to the Runner 210
8.3 Implement the Jump Behavior 213
8.4 Time Animations with Stopwatches 214
8.5 Refine the Jump Behavior 217
8.6 Implement Linear Motion 220
8.7 Pause Behaviors 225
8.8 Conclusion 227
8.9 Exercises 227
Chapter 9: Time, Part II: Nonlinear Motion 229
9.1 Understand Time and Its Derivatives 230
9.2 Use Animation Timers and Easing Functions to Implement Nonlinear Jumping 231
9.3 Implement Animation Timers 233
9.4 Implement Easing Functions 235
9.5 Fine-tune Easing Functions 239
9.6 Implement a Realistic Bounce Behavior 241
9.7 Randomize Behaviors 245
9.8 Implement Nonlinear Color Changes with Animation Timers and Easing Functions 247
9.9 Conclusion 251
9.10 Exercises 251
Chapter 10: Time, Part III: Time Systems 253
10.1 Snail Bait’s Time System 255
10.2 Create and Start the Time System 257
10.3 Incorporate the Time System into Snail Bait 258
10.4 Redefine the Current Time for Stopwatches and Animation Timers 264
10.5 Implement the Time System 268
10.6 Conclusion 270
10.7 Exercises 270
Chapter 11: Collision Detection 273
11.1 The Collision Detection Process 275
11.2 Collision Detection Techniques 275
11.3 Snail Bait’s Collision Detection 277
11.4 Select Candidates for Collision Detection 281
11.5 Detect Collisions Between the Runner and Another Sprite 282
11.6 Process Collisions 284
11.7 Optimize Collision Detection 286
11.8 Monitor Collision Detection Performance 289
11.9 Implement Collision Detection Edge Cases 291
11.10 Conclusion 295
11.11 Exercises 296
Chapter 12: Gravity 297
12.1 Equip the Runner for Falling 298
12.2 Incorporate Gravity 300
12.3 Collision Detection, Redux 308
12.4 Conclusion 310
12.5 Exercises 311
Chapter 13: Sprite Animations and Special Effects 313
13.1 Implement Sprite Animations 314
13.2 Create Special Effects 320
13.3 Choreograph Effects 329
13.4 Conclusion 335
13.5 Exercises 336
Chapter 14: Sound and Music 337
14.1 Create Sound and Music Files 339
14.2 Load Music and Sound Effects 340
14.3 Specify Sound and Music Controls 342
14.4 Play Music 343
14.5 Play Music in a Loop 344
14.6 Play Sound Effects 347
14.7 Turn Sound On and Off 361
14.8 Conclusion 362
14.9 Exercises 362
Chapter 15: Mobile Devices 363
15.1 Run Snail Bait on Mobile Devices 366
15.2 Detect Mobile Devices 368
15.3 Scale Games to Fit Mobile Devices 369
15.4 Change Instructions Underneath the Game’s Canvas 381
15.5 Change the Welcome Screen 383
15.6 Incorporate Touch Events 396
15.7 Work Around Sound Idiosyncrasies on Mobile Devices 400
15.8 Add an Icon to the Home Screen and Run without Browser Chrome 402
15.9 Conclusion 403
15.10 Exercises 404
Chapter 16: Particle Systems 405
16.1 Smoking Holes 406
16.2 Use Smoking Holes 411
16.3 Implement Smoking Holes 414
16.4 Pause Smoking Holes 434
16.5 Conclusion 435
16.6 Exercises 436
Chapter 17: User Interface 437
17.1 Keep Score 438
17.2 Add a Lives Indicator 442
17.3 Display Credits 448
17.4 Tweet Player Scores 455
17.5 Warn Players When the Game Runs Slowly 458
17.6 Implement a Winning Animation 467
17.7 Conclusion 472
17.8 Exercises 472
Chapter 18: Developer Backdoor 475
18.1 Snail Bait’s Developer Backdoor 477
18.2 The Developer Backdoor’s HTML and CSS 479
18.3 Reveal and Hide the Developer Backdoor 481
18.4 Update the Developer Backdoor’s Elements 483
18.5 Implement the Developer Backdoor’s Checkboxes 484
18.6 Incorporate the Developer Backdoor Sliders 492
18.7 Implement the Backdoor’s Ruler 502
18.8 Conclusion 513
18.9 Exercises 513
Chapter 19: On the Server: In-game Metrics, High Scores, and Deployment 515
19.1 Node.js and socket.io 517
19.2 Include socket.io JavaScript in Snail Bait 518
19.3 Create a Simple Server 520
19.4 Create a Socket on the Server 520
19.5 Start the Server 521
19.6 Create a Socket on the Client and Connect to the Server 522
19.7 Record In-game Metrics 523
19.8 Manage High Scores 526
19.9 Deploy Snail Bait 540
19.10 Upload Files to a Server 542
19.11 Conclusion 543
19.12 Exercises 544
Chapter 20: Epilogue: Bodega’s Revenge 545
20.1 Design the User Interface 547
20.2 Create the Sprite Sheet 551
20.3 Instantiate the Game 552
20.4 Implement Sprites 553
20.5 Implement Sprite Behaviors 563
20.6 Draw the Bullet Canvas 580
20.7 Implement Touch-Based Controls for Mobile Devices 582
20.8 Conclusion 585
20.9 Exercises 585
Glossary 587
Index 595