HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL ppt

HTML5 Games: Creating
Fun with HTML5, CSS3,
and WebGL
Table of Contents
Introduction
Who this book is for
What this book is about
Part 1: Getting Started with HTML5 Games
Chapter 1: Gaming on the Web
Tracing the History of HTML5
Using HTML5 for Games
Canvas
Audio
WebSockets
Web Storage
WebGL
HTML5 is (not) a Flash killer
Creating Backward Compatibility
Feature detection
Using the Modernizr Library
Filling the gaps with polyfills
Building a Game
Summary
Chapter 2: Taking the First Steps
Understanding the Game
Swapping jewels
Matching three
Level progression
Identifying Game Stages
Splash screen

Main menu
Playing the game
High score
Creating the Application Skeleton
Setting up the HTML
Adding a bit of style
Loading the scripts
Creating the Splash Screen
Working with web fonts
Styling the splash screen
Summary
Chapter 3: Going Mobile
Developing Mobile Web
Applications
Write once, read many
The challenges of mobile
platforms
Handling User Input on Mobile
Devices
Keyboard input
Mouse versus touch
Adapting to Small Screen
Resolutions
Creating scalable layouts
Controlling the viewport
Disabling user scaling
Creating Different Views
Creating the main menu
Adding screen modules
Using CSS media queries

Detecting device orientation
Adding a mobile style sheet
Developing for iOS and Android
Devices
Placing web applications on
the home screen
Getting the browser out of the
way
Debugging Mobile Web
Applications
Enabling the Safari debugger
Accessing the Android log
Summary
Part 2: Creating the Basic Game
Chapter 4: Building the Game
Creating the Game Board Module
Initializing the game state
Filling the initial board
Implementing the Rules
Validating swaps
Detecting chains
Refilling the grid
Swapping jewels
Summary
Chapter 5: Delegating Tasks to Web
Workers
Working with Web Workers
Limitations in workers
What workers can do
Using Workers

Sending messages
Receiving messages
Catching errors
Shared workers
A prime example
Using Web Workers in Games
Creating the worker module
Keeping the same interface
Summary
Chapter 6: Creating Graphics with
Canvas
Graphics on the Web
Bitmap images
SVG graphics
Canvas
When to choose canvas
Drawing with Canvas
Drawing shapes and paths
Using advanced strokes and
fill styles
Using transformations
Adding text, images, and
shadows
Managing the state stack
Drawing the HTML5 logo
Compositing
Accessing Image Data
Retrieving pixel values
Updating pixel values
Exporting image file data

Understanding security
restrictions
Creating pixel-based effects
Summary
Chapter 7: Creating the Game Display
Preloading Game Files
Detecting the jewel size
Modifying the loader script
Adding a progress bar
Improving the Background
Building the Game Screen
Drawing the board with
canvas
Drawing the board with CSS
and images
Summary
Chapter 8: Interacting with the Game
Capturing User Input
Mouse events on touch
devices
The virtual keyboard
Touch events
Input events and canvas
Building the Input Module
Handling input events
Implementing game actions
Binding inputs to game
functions
Summary
Chapter 9: Animating Game Graphics

Making the Game React
Animation timing
Animating the cursor
Animating game actions
Adding Points and Time
Creating the UI elements
Creating the game timer
Awarding points
Game over
Summary
Part 3: Adding 3D and Sound
Chapter 10: Creating Audio for Games
HTML5 Audio
Detecting audio support
Understanding the audio
format wars
Finding sound effects
Using the audio Element
Controlling playback
Using audio on mobile devices
Working with Audio Data
Using the Mozilla Audio Data
API
A few examples
Building the Audio Module
Preparing for audio playback
Playing sound effects
Stopping sounds
Cleaning up
Adding Sound Effects to the Game

Playing audio from the game
screen
Summary
Chapter 11: Creating 3D Graphics with
WebGL
3D for the Web
Getting started with WebGL
Debugging WebGL
Creating a helper module
Shaders
Variables and data types
Using shaders with WebGL
Uniform variables
Varying variables
Rendering 3D Objects
Using vertex buffers
Using index buffers
Using models, views, and
projections
Rendering
Loading Collada models
Using Textures and Lighting
Adding light
Adding per-pixel lighting
Creating textures
Creating the WebGL display
Loading the WebGL files
Setting up WebGL
Rendering jewels
Animating the jewels

Summary
Part 4: Local Storage and Multiplayer
Games
Chapter 12: Local Storage and
Caching
Storing Data with Web Storage
Using the storage interface
Building a storage module
Making the Game State Persistent
Exiting the game
Pausing the game
Saving the game data
Creating a High Score List
Building the high score screen
Storing the high score data
Displaying the high score data
Application Cache
The cache manifest
Summary
Chapter 13: Going Online with
WebSockets
Using WebSockets
Connecting to servers
Communicating with
WebSockets
Using Node on the Server
Installing Node
Creating an HTTP server with
Node
Creating a WebSocket chat

room
Summary
Chapter 14: Resources
Using Middleware
Box2D
Impact
Three.js
Deploying on Mobile Devices
PhoneGap
Appcelerator Titanium
Distributing Your Games
Chrome Web Store
Zeewe
Android Market
App Store
Using Online Services
TapJS
Playtomic
JoyentCloud Node
Summary
HTML5 Games
Creating Fun with HTML5,
CSS3, and WebGL
Jacob Seidelin
This edition first published 2012
© 2012 John Wiley and Sons, Ltd
Registered office
John Wiley & Sons Ltd, The Atrium, Southern
Gate, Chichester, West Sussex, PO19 8SQ, United
Kingdom

For details of our global editorial offices, for
customer services and for information about how to
apply for permission to reuse the copyright material
in this book please see our website at
www.wiley.com.
The right of the author to be identified as the
author of this work has been asserted in accordance
with the Copyright, Designs and Patents Act 1988.
All rights reserved. No Part of this publication
may be reproduced, stored in a retrieval system, or
transmitted, in any form or by any means, electronic,
mechanical, photocopying, recording or otherwise,
except as permitted by the UK Copyright, Designs
and Patents Act 1988, without the prior permission of
the publisher.
Wiley also publishes its books in a variety of
electronic formats. Some content that appears in
print may not be available in electronic books.
Designations used by companies to distinguish
their products are often claimed as trademarks. All
brand names and product names used in this book
are trade names, service marks, trademarks or
registered trademarks of their respective owners.
The publisher is not associated with any product or
vendor mentioned in this book. This publication is
designed to provide accurate and authoritative
information in regard to the subject matter covered. It
is sold on the understanding that the publisher is not
engaged in rendering professional services. If
professional advice or other expert assistance is

required, the services of a competent professional
should be sought.
Trademarks: Wiley and the John Wiley & Sons,
Ltd logo are trademarks or registered trademarks of
John Wiley and Sons, Ltd and/ or its affiliates in the
United States and/or other countries, and may not be
used without written permission. All other trademarks
are the property of their respective owners. John
Wiley & Sons, Ltd is not associated with any product
or vendor mentioned in the book.
978-1-119-97508-3
A catalogue record for this book is available
from the British Library.
ISBN 978-1-119-97508-3 (paperback); ISBN
978-1-119-97634-9 (ebook); 978-1-119-97632-5
(ebook);
978-1-119-97633-2 (ebook)
Set in 10/12.5 Chaparral Pro by Wiley
Composition Services
Printed in the United States by Bind-Rite
About the Author
Jacob Seidelin (Copenhagen) is a freelance web
developer with 10 years of experience working
withbackend programming, graphics design, and
front-end technology. When not working with clients
he enjoys JavaScript and HTML5, web game
development, and generally pushing the limit of what
is possible in the browser. The results of his
adventures in web development can be witnessed at
his website at />

Acknowledgments
I’d like to acknowledge a few people who helped in
the making of this book. First of all, I want to thank
Chris Webb at Wiley for taking the initiative and
making this book possible. Thanks to my editors
Linda Morris, Brian Herrmann, and Charles
Hutchinson for improving all aspects of the text, and
to Andrew Wooldridge, my technical editor, whose
keen eye for technical details kept me on my toes. It
has been a pleasure working with all of you.

I’d also like to extend my gratitude to the web
development community in general for the never-
ending inspiration and motivation. The same goes for
the hard-working people at W3C, Khronos, and other
organizations trying to make the Web a better place
through open standards. Keep fighting the good fight.

Finally, thanks to my beautiful Ulla for the endless
support and patience. Thank you for believing.

Publisher’s
Acknowledgements
Some of the people who helped bring this book to
market include the following:

VP Consumer and Technology
Publishing Director
Michelle Leete
Associate Director–Book Content

Management
Martin Tribe
Associate Publisher
Chris Webb
Assistant Editor
Ellie Scott
Development Editor
Brian Herrmann
Copy Editor
Charles Hutchinson
Technical Editor
Andrew Woolridge
Editorial Manager
Jodi Jensen
Senior Project Editor
Sara Shlaer
Editorial Assistant
Leslie Saxman
Associate Marketing Director
Louise Breinholt
Marketing Executive
Kate Parrett
Senior Project Coordinator
Kristie Rees
Graphics and Production Specialists
Noah Hart
Andrea Hornberger
Jennifer Mayberry
Quality Control Technician
Melissa Cossell

Proofreading and Indexing
The Well-Chosen Word
Potomac Indexing, LLC
Introduction

“All this is done in HTML5, by the way!” exclaimed
Steve Jobs, the mind and face of the Apple success
story, as he walked the audience through the new
HTML5-powered ad system at the iPhone OS 4.0
Keynote, receiving cheers, laughs, and applause in
return. The recent developments in open, standards-
based web technologies are moving the web forward
at an increasing pace, and Apple’s embrace of
HTML5, including the blocking of Flash on all
iDevices, is just another symbol of the power of this
movement. Although Apple’s love for HTML5 might in
part be fueled by business motives, it is clear that the
open web is on the move and exciting things are
happening on an almost daily basis, making it an
exciting time for web and game developers alike.

The world of web and game development wasn’t
always this exciting, however. Building games for the
browser could be a frustrating experience and has
traditionally meant having to choose between using
feature-rich plugin-based technologies or settling for
a more low-tech approach, trying to fit the square peg
of HTML and JavaScript into the round hole of game
development. Disagreeing or downright broken
implementations of various standards have only

made the consistent and predictable environment of,
for instance, Flash more appealing.

By opting for plugins like Flash, developers and
game designers gain access to frameworks that are
suitable for advanced game development, featuring
dynamic graphics, sounds, and even 3D, but doing
so also disconnects the game from the technologies
surrounding it. Although technologies such as Flash,
Java, and Silverlight all have means to communicate
with the rest of the page, they remain isolated objects
with limited capabilities for mixing with the
surrounding content.

In contrast, using HTML, JavaScript, and CSS — the
native building blocks of the web — means your
game will fit naturally within the context of a web
page, but with them comes other compromises, not
least of which is a lack of suitable elements and APIs.
When the first editions of the HTML standard were
published in the mid-1990s, it is doubtful that anyone
had rich Internet applications in mind, and HTML’s
document-centric nature meant that it was much more
suitable for marking up pages of text and images
than for application and game development. Even as
these pages slowly became more and more
interactive as JavaScript and the Document Object
Model (DOM) evolved, graphics were still limited to
static images and styled HTML elements, and audio
was pretty much nonexistent. Only recently have the

was pretty much nonexistent. Only recently have the
specifications for HTML5, CSS3, and other related
standards evolved in the direction of actual
applications, allowing developers to build
experiences more akin to desktop applications than
the traditional page-based web site. Naturally, these
developments also apply to web games, and many of
the recent advancements are a perfect fit for games
and other interactive entertainment applications.

Who this book is for
HTML, JavaScript, and CSS are no longer limited to
building web sites; web apps can be deployed on the
web, as desktop widgets, and on mobile devices and
many other places. If you are in any way interested in
developing games for these targets and want to
leverage your existing web development skills to do
so, this is the book for you.

You probably already know a good deal about web
development and have worked with HTML, CSS, and
JavaScript previously. HTML5 Games is not a
general guide to HTML5, and it does not teach you
how to build web sites, so it is generally assumed
throughout the book that you have some basic
experience with traditional HTML and have at least
heard of the new elements and APIs. Not all aspects
of HTML5 are covered either, simply because they
are not very relevant to games. You do not need to be
an expert programmer, but you should have some

experience with JavaScript. The new JavaScript APIs
introduced with HTML5 are, of course, covered and
explained, but it is otherwise expected that you have
a good grasp of the language itself.

HTML5 Games is also not a book about game
design. Many excellent books are available that deal
with all conceivable aspects of game development
more in depth than what this book can offer you.
Trying to cover topics as diverse as artificial
intelligence, physics simulation, and advanced
graphics programming with enough detail to do them
justice would leave little room to talk about HTML5
and web development. That being said, you don’t
need any prior experience with game development,
nor do you need to be a mathematician or a great
artist to use this book. HTML5 Games stays in the
shallow end in terms of game development theory,
and any nontrivial math and programming concepts
that are used are explained as they are introduced.
An interest in games and web development, a bit of
high school math, and the ability to draw stick figures
should get you through the book just fine.

What this book is about
HTML5 Games is about taking your skills in web
development and applying them to game