Build an HTML5 Game

Table of contents

1. Build an HTML5 Game: A Developer’s Guide with CSS and JavaScript
2. About the Author
3. About the Technical Reviewer
4. Preface
   1. Acknowledgments
5. Introduction
   1. Why Build HTML5 Games?
      1. Using Skills You Already Have
      2. Multi-environment Development
      3. A Rapidly Improving Platform
   2. About This Book
      1. Who This Book Is For
      2. Overview
      3. Depth of Coverage
      4. How to Use This Book
6. I. Building a Game with HTML, CSS, and JavaScript
7. 1. Preparation and Setup
   1. How the Game Is Played
   2. Building the Game
   3. Development and Testing Environment
      1. Web Browser Testing
         1. Desktop Browsers
         2. Mobile Browsers
      2. Debugging in the Web Browser
   4. Laying Out the Game Screen
      1. Creating Panels with HTML and CSS
      2. Code Structure
         1. Game Controller
         2. User Interface Code
         3. Game Elements as Objects
   5. Adding the First Scripts
      1. The Modernizr and jQuery Libraries
      2. Adding the Modernizr Library
      3. Loading Scripts with Modernizr
      4. Modular JavaScript
      5. User Interface and Display Scripts
   6. Summary
   7. Further Practice
8. 2. Sprite Animation Using jQuery and CSS
   1. Principles of CSS Sprites
      1. Creating the Game Board
      2. Adding Sprites
   2. Animation and the Bubble Class
      1. Calculating Angle and Direction
      2. Firing and Animating Bubbles
   3. Summary
   4. Further Practice
9. 3. Game Logic
   1. Drawing the Game Board
      1. Rendering the Level
      2. The Bubble Queue
   2. Detecting Collisions
      1. Collision Geometry
      2. Collision Detection Logic
         1. Starting Position and Direction Vector
         2. Calculating Collisions
         3. Finding the Correct Collision Point
   3. Reacting to Collisions
      1. Adding the bubble Object to the Board
      2. Locking the bubble Object into the Grid
   4. Summary
   5. Further Practice
10. 4. Translating Game State Changes to the Display
    1. Calculating Groups
       1. Fetching Bubbles
       2. Creating Matching Color Groups
    2. Popping Bubbles
       1. Removing Bubble Groups with JavaScript
       2. Popping Animations with CSS
    3. Orphaned Groups
       1. Identifying Orphaned Bubbles
       2. Dropping Orphaned Bubbles
    4. Exploding Bubbles with a jQuery Plug-in
    5. Summary
    6. Further Practice
11. II. Enhancements with HTML5 and the Canvas
12. 5. CSS Transitions and Transformations
    1. Benefits of CSS
    2. Basic CSS Transitions
       1. How to Write a Transition
       2. Color-Changing Buttons
    3. Basic CSS Transformations
       1. How to Write a Transformation
       2. Scaling a Button
    4. CSS Transitions in Place of jQuery animate
    5. Disadvantages of CSS Transitions
    6. Summary
    7. Further Practice
13. 6. Rendering Canvas Sprites
    1. Detecting Canvas Support
    2. Drawing to the Canvas
    3. Image Rendering
       1. canvas Elements
       2. Rotating the Canvas
    4. Sprite Rendering
    5. Defining and Maintaining States
       1. Preparing the State Machine
       2. Implementing States
    6. Sprite Sheets and the Canvas
    7. The Canvas Renderer
    8. Moving Sprites on the Canvas
    9. Animating Canvas Sprite Frames
    10. Summary
    11. Further Practice
14. 7. Levels, Sound, and More
    1. Multiple Levels and High Scores
       1. New Game State Variables
       2. Display Level and Score
    2. Ending Levels Efficiently
    3. High Score Persistence with Web Storage
       1. Web Storage vs. Cookies
       2. Adding Data to Web Storage
    4. Smoothing Animations with requestAnimationFrame
       1. A New Perspective on Frame Updates
       2. Code Compatibility with Polyfills
    5. Adding Sound with HTML5
       1. The HTML5 Audio API
       2. Popping Bubbles: Complete with Sound
    6. Summary
    7. Further Practice
15. 8. Next Steps in HTML5
    1. Saving and Retrieving Data
       1. AJAX
       2. WebSockets
       3. Web Workers
    2. WebGL
    3. Deploying HTML5 Games
       1. Running Fullscreen in a Desktop Browser
       2. Running in a Mobile Browser
          1. Touch Events
          2. Scaling
       3. Deploying as a Native Application
    4. Optimization
       1. Memory Management
       2. Optimizing for Speed
    5. Security
       1. Trust No One
       2. Obfuscation
       3. Using Private Variables
       4. Validating with Checksums
    6. Summary
    7. Further Practice
16. A. Afterword
    1. Improving Bubble Shooter
    2. Creating a Whole New Game
       1. Match-3
       2. Solitaire
       3. A Platform Game
       4. A Simple Physics Game
    3. Joining a Game Development Team
17. B. Updates
18. Index
19. Copyright