Core HTML5 2D Game Programming

Core HTML5 2D Game Programming

by David Geary
Released July 2014
Publisher(s): Pearson
ISBN: 9780133564280

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

  1. About This eBook
  2. Title Page
  3. Copyright Page
  4. Contents
  5. Preface
    1. A Brief History of This Book
    2. How to Use This Book
    3. The Book’s Exercises
    4. Source Code and Chapter-specific Versions of Snail Bait
    5. Prerequisites
    6. Your Game
    7. Online Resources
  6. Acknowledgments
  7. About the Author
  8. Chapter 1. Introduction
    1. 1.1 Snail Bait
    2. 1.2 HTML5 Game Development Best Practices
    3. 1.3 Special Features
    4. 1.4 Snail Bait’s HTML and CSS
    5. 1.5 Snail Bait’s Humble Beginning
    6. 1.6 The Use of JavaScript in This Book
    7. 1.7 Conclusion
    8. 1.8 Exercises
  9. Chapter 2. Raw Materials and Development Environment
    1. 2.1 Use Developer Tools
    2. 2.2 Obtain Assets
    3. 2.3 Use CSS Backgrounds
    4. 2.4 Generate Favicons
    5. 2.5 Shorten the Coding Cycle
    6. 2.6 Conclusion
    7. 2.7 Exercises
  10. Chapter 3. Graphics and Animation
    1. 3.1 Draw Graphics and Images with the HTML5 canvas Element
    2. 3.2 Implement Smooth HTML5 Animations
    3. 3.3 Implement a Game Loop
    4. 3.4 Calculate Frame Rates
    5. 3.5 Scroll the Background
    6. 3.6 Create Time-Based Motion
    7. 3.7 Reverse Scroll Direction
    8. 3.8 Draw Animation Frames
    9. 3.9 Use Parallax to Create the Illusion of Depth
    10. 3.10 Conclusion
    11. 3.11 Exercises
  11. Chapter 4. Infrastructure
    1. 4.1 Encapsulate Game Functions in a JavaScript Object
    2. 4.2 Understand JavaScript’s Persnickety this Reference
    3. 4.3 Handle Keyboard Input
    4. 4.4 Pause or Resume the Game When the Player Presses the p Key
    5. 4.5 Freeze the Game to Ensure It Resumes Exactly Where It Left Off
    6. 4.6 Pause the Game When the Window Loses Focus
    7. 4.7 Resume a Paused Game with an Animated Countdown
    8. 4.8 Conclusion
    9. 4.9 Exercises
  12. Chapter 5. Loading Screens
    1. 5.1 Define Snail Bait’s Chrome
    2. 5.2 Fade Elements In and Out with CSS Transitions
    3. 5.3 Fade Any Element In or Out That Has a CSS Transition Associated with Its Opacity
    4. 5.4 Implement the Loading Screen
    5. 5.5 Reveal the Game
    6. 5.6 Conclusion
    7. 5.7 Exercises
  13. Chapter 6. Sprites
    1. 6.1 Sprite Objects
    2. 6.2 Incorporate Sprites into a Game Loop
    3. 6.3 Implement Sprite Artists
    4. 6.4 Create and Initialize a Game’s Sprites
    5. 6.5 Define Sprites with Metadata
    6. 6.6 Scroll Sprites
    7. 6.7 Conclusion
    8. 6.8 Exercises
  14. Chapter 7. Sprite Behaviors
    1. 7.1 Behavior Fundamentals
    2. 7.2 Runner Behaviors
    3. 7.3 The Runner’s Run Behavior
    4. 7.4 Flyweight Behaviors
    5. 7.5 Game-Independent Behaviors
    6. 7.6 Combine Behaviors
    7. 7.7 Conclusion
    8. 7.8 Exercises
  15. Chapter 8. Time, Part I: Finite Behaviors and Linear Motion
    1. 8.1 Implement an Initial Jump Algorithm
    2. 8.2 Shift Responsibility for Jumping to the Runner
    3. 8.3 Implement the Jump Behavior
    4. 8.4 Time Animations with Stopwatches
    5. 8.5 Refine the Jump Behavior
    6. 8.6 Implement Linear Motion
    7. 8.7 Pause Behaviors
    8. 8.8 Conclusion
    9. 8.9 Exercises
  16. Chapter 9. Time, Part II: Nonlinear Motion
    1. 9.1 Understand Time and Its Derivatives
    2. 9.2 Use Animation Timers and Easing Functions to Implement Nonlinear Jumping
    3. 9.3 Implement Animation Timers
    4. 9.4 Implement Easing Functions
    5. 9.5 Fine-tune Easing Functions
    6. 9.6 Implement a Realistic Bounce Behavior
    7. 9.7 Randomize Behaviors
    8. 9.8 Implement Nonlinear Color Changes with Animation Timers and Easing Functions
    9. 9.9 Conclusion
    10. 9.10 Exercises
  17. Chapter 10. Time, Part III: Time Systems
    1. 10.1 Snail Bait’s Time System
    2. 10.2 Create and Start the Time System
    3. 10.3 Incorporate the Time System into Snail Bait
    4. 10.4 Redefine the Current Time for Stopwatches and Animation Timers
    5. 10.5 Implement the Time System
    6. 10.6 Conclusion
    7. 10.7 Exercises
  18. Chapter 11. Collision Detection
    1. 11.1 The Collision Detection Process
    2. 11.2 Collision Detection Techniques
    3. 11.3 Snail Bait’s Collision Detection
    4. 11.4 Select Candidates for Collision Detection
    5. 11.5 Detect Collisions Between the Runner and Another Sprite
    6. 11.6 Process Collisions
    7. 11.7 Optimize Collision Detection
    8. 11.8 Monitor Collision Detection Performance
    9. 11.9 Implement Collision Detection Edge Cases
    10. 11.10 Conclusion
    11. 11.11 Exercises
  19. Chapter 12. Gravity
    1. 12.1 Equip the Runner for Falling
    2. 12.2 Incorporate Gravity
    3. 12.3 Collision Detection, Redux
    4. 12.4 Conclusion
    5. 12.5 Exercises
  20. Chapter 13. Sprite Animations and Special Effects
    1. 13.1 Implement Sprite Animations
    2. 13.2 Create Special Effects
    3. 13.3 Choreograph Effects
    4. 13.4 Conclusion
    5. 13.5 Exercises
  21. Chapter 14. Sound and Music
    1. 14.1 Create Sound and Music Files
    2. 14.2 Load Music and Sound Effects
    3. 14.3 Specify Sound and Music Controls
    4. 14.4 Play Music
    5. 14.5 Play Music in a Loop
    6. 14.6 Play Sound Effects
    7. 14.7 Turn Sound On and Off
    8. 14.8 Conclusion
    9. 14.9 Exercises
  22. Chapter 15. Mobile Devices
    1. 15.1 Run Snail Bait on Mobile Devices
    2. 15.2 Detect Mobile Devices
    3. 15.3 Scale Games to Fit Mobile Devices
    4. 15.4 Change Instructions Underneath the Game’s Canvas
    5. 15.5 Change the Welcome Screen
    6. 15.6 Incorporate Touch Events
    7. 15.7 Work Around Sound Idiosyncrasies on Mobile Devices
    8. 15.8 Add an Icon to the Home Screen and Run Without Browser Chrome
    9. 15.9 Conclusion
    10. 15.10 Exercises
  23. Chapter 16. Particle Systems
    1. 16.1 Smoking Holes
    2. 16.2 Use Smoking Holes
    3. 16.3 Implement Smoking Holes
    4. 16.4 Pause Smoking Holes
    5. 16.5 Conclusion
    6. 16.6 Exercises
  24. Chapter 17. User Interface
    1. 17.1 Keep Score
    2. 17.2 Add a Lives Indicator
    3. 17.3 Display Credits
    4. 17.4 Tweet Player Scores
    5. 17.5 Warn Players When the Game Runs Slowly
    6. 17.6 Implement a Winning Animation
    7. 17.7 Conclusion
    8. 17.8 Exercises
  25. Chapter 18. Developer Backdoor
    1. 18.1 Snail Bait’s Developer Backdoor
    2. 18.2 The Developer Backdoor’s HTML and CSS
    3. 18.3 Reveal and Hide the Developer Backdoor
    4. 18.4 Update the Developer Backdoor’s Elements
    5. 18.5 Implement the Developer Backdoor’s Checkboxes
    6. 18.6 Incorporate the Developer Backdoor Sliders
    7. 18.7 Implement the Backdoor’s Ruler
    8. 18.8 Conclusion
    9. 18.9 Exercises
  26. Chapter 19. On the Server: In-game Metrics, High Scores, and Deployment
    1. 19.1 Node.js and socket.io
    2. 19.2 Include socket.io JavaScript in Snail Bait
    3. 19.3 Create a Simple Server
    4. 19.4 Create a Socket on the Server
    5. 19.5 Start the Server
    6. 19.6 Create a Socket on the Client and Connect to the Server
    7. 19.7 Record In-game Metrics
    8. 19.8 Manage High Scores
    9. 19.9 Deploy Snail Bait
    10. 19.10 Upload Files to a Server
    11. 19.11 Conclusion
    12. 19.12 Exercises
  27. Chapter 20. Epilogue: Bodega’s Revenge
    1. 20.1 Design the User Interface
    2. 20.2 Create the Sprite Sheet
    3. 20.3 Instantiate the Game
    4. 20.4 Implement Sprites
    5. 20.5 Implement Sprite Behaviors
    6. 20.6 Draw the Bullet Canvas
    7. 20.7 Implement Touch-Based Controls for Mobile Devices
    8. 20.8 Conclusion
    9. 20.9 Exercises
  28. Glossary
  29. Index

Product information

  • Title: Core HTML5 2D Game Programming
  • Author(s): David Geary
  • Release date: July 2014
  • Publisher(s): Pearson
  • ISBN: 9780133564280