Build an HTML5 Game: A Developer’s Guide with CSS and JavaScript

If you already have even basic familiarity with HTML, CSS, and JavaScript, you’re ready to learn how to build a browser-based game. In Build an HTML5 Game, you’ll use your skills to create a truly cross-platform bubble-shooter game – playable in both desktop and mobile browsers.

As you follow along with this in-depth, hands-on tutorial, you’ll learn how to:

• Send sprites zooming around the screen with JavaScript animations
• Make things explode with a jQuery plug-in
• Use hitboxes and geometry to detect collisions
• Implement game logic to display levels and respond to player input
• Convey changes in game state with animation and sound
• Add flair to a game interface with CSS transitions and transformations
• Gain pixel-level control over your game display with the HTML canvas

The programming starts right away in Chapter—no hemming and hawing, history, or throat clearing. Exercises at the end of each chapter challenge you to dig in to the bubble shooter’s code and modify the game.

Go ahead. Take the plunge. Learn to create a complete HTML5 game right now and then use your newfound skills to build your own mega-popular, addictive game.

Table of Contents

Part 1: Building a Game with HTML, CSS, and JavaScript
Chapter 1: Preparation and Setup
Chapter 2: Sprite Animation Using jQuery and CSS
Chapter 3: Game Logic
Chapter 4: Translating Game State Changes to the Display
Part 2: Enhancements with HTML5 and the Canvas
Chapter 5: CSS Transitions and Transformations
Chapter 6: Rendering Canvas Sprites
Chapter 7: Levels, Sound, and More
Chapter 8: Next Steps in HTML5