Game programming offers a wealth of creative and business opportunities, and it’s never been more accessible. In Core HTML5 2D Game Programming, best-selling author David Geary shows you how to use freely available browser tools and open source resources to create video games that run in desktop browsers and on mobile devices.   Geary walks you step by step through every aspect of implementing a sophisticated arcade-style game entirely from scratch, without using proprietary game frameworks. Packed with code, this full-color tutorial gives you the in-depth understanding you need to design and build any kind of HTML5 2D game on your own, whether you use a framework or not.   A clearly written, accessible, and exhaustive guide to implementing games, this book leaves no stone unturned, showing you how to Create smooth, flicker-free animations Implement motion that’s unaffected by your game’s underlying animation frame rate Animate sprites (graphical objects) to make them sparkle, explode, etc. Layer multi-channel sound effects on top of a soundtrack Warp time to create nonlinear effects, such as jumping or bouncing Control the flow of time through your game with a time system Implement particle systems that simulate natural phenomena Efficiently detect collisions between sprites Create a developer backdoor containing special features Use Node.js and socket.io to transfer real-time metrics to a server Employ a heads-up display to show high scores stored on a server Understand the nuances of implementing HTML5 games for mobile devices Through expertly written code that’s easy to understand, and prose that cuts to the chase, Geary illuminates every corner of game development. Everyone from novice game programmers to professional game developers will find this book invaluable as both a tutorial and a reference.   All of the book’s source code, including chapter-specific versions of the game discussed in the book, are available at corehtml5games.com.

Table of Contents:
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