Build an HTML5 Game · A Developer’s Guide with CSS and JavaScript by Bunyan, Karl -- Read -- Imperial Library of Trantor

Index

Build an HTML5 Game: A Developer’s Guide with CSS and JavaScript About the Author About the Technical Reviewer Preface

Acknowledgments

Introduction

Why Build HTML5 Games?

Using Skills You Already Have Multi-environment Development A Rapidly Improving Platform

About This Book

Who This Book Is For Overview Depth of Coverage How to Use This Book

I. Building a Game with HTML, CSS, and JavaScript 1. Preparation and Setup

How the Game Is Played Building the Game Development and Testing Environment

Web Browser Testing

Desktop Browsers Mobile Browsers

Debugging in the Web Browser

Laying Out the Game Screen

Creating Panels with HTML and CSS Code Structure

Game Controller User Interface Code Game Elements as Objects

Adding the First Scripts

The Modernizr and jQuery Libraries Adding the Modernizr Library Loading Scripts with Modernizr Modular JavaScript User Interface and Display Scripts

Summary Further Practice

2. Sprite Animation Using jQuery and CSS

Principles of CSS Sprites

Creating the Game Board Adding Sprites

Animation and the Bubble Class

Calculating Angle and Direction Firing and Animating Bubbles

Summary Further Practice

3. Game Logic

Drawing the Game Board

Rendering the Level The Bubble Queue

Detecting Collisions

Collision Geometry Collision Detection Logic

Starting Position and Direction Vector Calculating Collisions Finding the Correct Collision Point

Reacting to Collisions

Adding the bubble Object to the Board Locking the bubble Object into the Grid

Summary Further Practice

4. Translating Game State Changes to the Display

Calculating Groups

Fetching Bubbles Creating Matching Color Groups

Popping Bubbles

Removing Bubble Groups with JavaScript Popping Animations with CSS

Orphaned Groups

Identifying Orphaned Bubbles Dropping Orphaned Bubbles

Exploding Bubbles with a jQuery Plug-in Summary Further Practice

II. Enhancements with HTML5 and the Canvas 5. CSS Transitions and Transformations

Benefits of CSS Basic CSS Transitions

How to Write a Transition Color-Changing Buttons

Basic CSS Transformations

How to Write a Transformation Scaling a Button

CSS Transitions in Place of jQuery animate Disadvantages of CSS Transitions Summary Further Practice

6. Rendering Canvas Sprites

Detecting Canvas Support Drawing to the Canvas Image Rendering

canvas Elements Rotating the Canvas

Sprite Rendering Defining and Maintaining States

Preparing the State Machine Implementing States

Sprite Sheets and the Canvas The Canvas Renderer Moving Sprites on the Canvas Animating Canvas Sprite Frames Summary Further Practice

7. Levels, Sound, and More

Multiple Levels and High Scores

New Game State Variables Display Level and Score

Ending Levels Efficiently High Score Persistence with Web Storage

Web Storage vs. Cookies Adding Data to Web Storage

Smoothing Animations with requestAnimationFrame

A New Perspective on Frame Updates Code Compatibility with Polyfills

Adding Sound with HTML5

The HTML5 Audio API Popping Bubbles: Complete with Sound

Summary Further Practice

8. Next Steps in HTML5

Saving and Retrieving Data

AJAX WebSockets Web Workers

WebGL Deploying HTML5 Games

Running Fullscreen in a Desktop Browser Running in a Mobile Browser

Touch Events Scaling

Deploying as a Native Application

Optimization

Memory Management Optimizing for Speed

Security

Trust No One Obfuscation Using Private Variables Validating with Checksums

Summary Further Practice

A. Afterword

Improving Bubble Shooter Creating a Whole New Game

Match-3 Solitaire A Platform Game A Simple Physics Game

Joining a Game Development Team

B. Updates Index Copyright

← Prev
Back
Next →

← Prev
Back
Next →