O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

HTML5 Games: Novice to Ninja

Book Description

This book will teach you how to create awesome video games. Games from scratch. Games that run cross-platform, in web browsers, and on phones. Games filled with dynamic sound and music. Games overflowing with impressive visual effects. Fun games.

More importantly, this book will teach you how to think about making games. You'll learn to analyze and dissect games; to understand what it is that makes great games great. By the end of the journey you'll have all the knowledge and tools needed to produce engaging, polished products that people will love to play.

What's inside?

  • Learn the basics: game loops and input
  • Draw graphics on the screen using Canvas
  • Add amazing sound effects and music using the Web Audio API
  • Develop several fun games: a platformer, a shoot ‘em up, a dungeon crawler, and a physics-based game
  • Create your own JavaScript game library
  • Jazz up your game up with "juice": screen shakes, particle effects, and more

Table of Contents

  1. HTML5 Games: Novice to Ninja
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About Earle Castledine
  6. About SitePoint
  7. Preface
    1. Who Should Read This Book?
    2. Acknowledgments
    3. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
  8. Level 1: Press Space to Start
    1. Game Design
    2. A Brief History
    3. Games and JavaScript
      1. Strengths of JavaScript
      2. Limitations of JavaScript
      3. The Future of HTML5 Games
    4. Enough Talk; Let’s Make Games
      1. Making Art
      2. Build Tools and Workflow
      3. Version Control Systems
      4. Staying Motivated
    5. Get Ready!
  9. Level 2: Drawing Things
    1. DOM vs Canvas vs WebGL
    2. Plain Ol’ DOM
      1. Why Not DOM?
    3. Canvas API
      1. Drawing Some Shapes
      2. Images
      3. Transformations
      4. Blending and Alpha
      5. Performance Considerations
    4. Game Engines vs Reinventing the Wheel
      1. Game Libraries and Engines
    5. Quick, Draw
  10. Level 3: Game Loops & User Input
    1. The Loop
      1. The Old-school Way
      2. Looping with HTML5
      3. An Even More Accurate Loop
    2. User Input
      1. Keyboard Input
      2. Mouse Controls
    3. Creating Your Game Library
      1. Our Game Architecture Idea
      2. The Renderer
      3. Bonus Renderer Features
      4. Adding the Loop
      5. Game Entities
      6. Adding Some Action
    4. A Space Shoot-’em-up
      1. Setting Up the Game
      2. A Controllable Player
      3. A Player That Shoots
      4. Removing “Dead” Entities
      5. The Bad Guys Strike Back
      6. Collisions—at Last!
    5. Game Over
  11. Level 4: Animation, Levels, Maps, Cameras…
    1. An Unexpected Proposition
    2. De-boilerplating Our Prototypes
      1. Starting a New Game
      2. A Little Help with the Children
    3. Sprites with Zing!
      1. Sprite Translation
      2. Scaling Sprites
      3. Math Helper Functions
      4. Anchor Points
      5. Sprite Rotation
    4. An Unexpected Assignment
    5. Sprite Sheets & Animation
      1. Sprite Sheets
      2. Creating the TileSprite
      3. Cell-based Animation: the Easy Way
      4. Cell-based Animation: A More Powerful Way
    6. The Animation Manager
    7. Tile Maps
      1. Clamping Down
      2. Snapping to a Grid
      3. Tile Map Helpers
      4. Entities Utilities
    8. Scrolling Maps with a Camera
      1. Grid-based Baddies
    9. Screens & Game Life Cycle
      1. Game Screens
      2. The Circle of Life
      3. Finishing Touches
    10. Leveled Up
  12. :Level 5: Collision Detection & AI
    1. Colliding with Things
      1. Bounding-box Collisions
      2. Drawing Rectangles
      3. Adjusting the Bounding Box
      4. Collision Testers
    2. Procedural Level Generation
    3. Colliding with Maps
      1. Wall Sliding
      2. Snap to Edges
    4. AI: The Bots Strike Back
      1. Intentional Movement
      2. Waypoints
      3. Moving, and Shooting, Towards a Target
      4. Smart Bad Guys: Attacking and Evading
      5. A More Stately State Machine
      6. Controlling Game Flow
    5. Pathfinding
      1. Target the Player
      2. Moving Along a Path
    6. Enemies alive
  13. Level 6: Mathematics & Physics
    1. Jump Everybody, Jump
      1. Faking Gravity
      2. Jumping Platformer
    2. Fixing Our Time Step
    3. Triangles and Vectors
    4. Building a Vector Library
      1. Normalizing, and the Dot Product
    5. The Need for Speed (and Direction)
      1. Velocity
      2. Velocity Bounce
      3. Acceleration
      4. Integration
      5. Friction
      6. More Accurate Friction
      7. Gravity-based Platformer
    6. Billiard Ball Physics
      1. Collision Resolution
    7. Polar Coordinates
      1. Physics All the Things
    8. Physics Libraries
      1. Penguin Golf
      2. Matter.js
      3. Syncing with Our Library
      4. Event Systems
      5. Procedurally Generated Terrain
      6. We Got Physical
  14. Level 7: Audio
    1. Old-school Techniques
    2. Audio on the Web
      1. Playing Sounds
      2. Playing SFX
      3. Repeating Sounds
      4. Polyphonic Sounds
      5. Randomly Ordered Sounds
    3. An Asset Manager
      1. Asset Manager Events
    4. Sound Production
      1. Tools and Software
      2. Sound-effect Generators
      3. Samples and DIY Recording
      4. Recording Tips
      5. Music for Games
      6. Creating a Track from Scratch
    5. The Web Audio API
      1. Oscillators
      2. Combining Oscillators
      3. Moving into Our Library
      4. Audio Element as a Source
      5. Source as an Audio Buffer
      6. Effecting a Sound Source
      7. Timing and Scheduling
      8. Ramps and Modulators
    6. Post Production: Mixing and Mastering
    7. Fade to Silence
  15. Level 8: Bringing a Game to Life with “Juice”
    1. Screen Effects
      1. Screen Shake
      2. Alpha support
      3. Screen Flash
      4. Hit Stop, Hit Lag (Time Dilation)
    2. Animations, Tweens, and Easing
      1. Normalization and Lerping
      2. A Generic Timer
      3. Easing
    3. Particle Effects
      1. 1-UPs
      2. Firework Particles
    4. Camera Tricks
      1. Smooth Camera Motion
      2. Camera Tracking Box
    5. Platformer Tricks
      1. Invincibility Blinking
      2. Jump Forgiveness
      3. Knockback
      4. Wall Jumping
    6. More Tiles
      1. Cloud Platforms
      2. Disappearing Tiles
      3. Trigger Areas and Doors
    7. Dialogs and Screen Transitions
      1. Pause Dialog
      2. Fading Screens
    8. Designing Levels with a Level Editor
      1. Tiled: a Level Editor
      2. Loading a Tiled Level
      3. Tiled Objects and Properties
      4. Game State and Serialization
    9. Got Game
  16. Level 9: Optimizing & Packaging
    1. Debugging
      1. Console Tools
      2. Browser Debugger
      3. Control Time, Squash Bugs
      4. Debug Overlay
    2. Profiling
      1. Adding an FPS Counter
      2. Measuring
    3. Speeding Up Your Code
      1. Looping Over Arrays
      2. Object Pools
      3. Faster Collisions with Spatial Partitioning
    4. Speeding Up Rendering
      1. Don’t Render Off-screen Entities
      2. Canvas Tricks
      3. TileMap Enhancements
      4. A WebGL Renderer
    5. Getting on Devices
      1. Gamepad Controls
      2. Mobile Web Tricks
      3. Touch Controls
      4. Deploying to Mobile
      5. Desktop Executables
    6. Getting on the Stores
    7. Releasing to the World
      1. Game Over
  17. Bonus Round: How to Use SSL/TLS with Node.js
  18. Appendix A: List of Games Mentioned