Home > Store

Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL

Register your product to gain access to bonus material or receive a coupon.

Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL


  • Sorry, this book is no longer in print.
Not for Sale

eBook (Watermarked)

  • Your Price: $27.19
  • List Price: $33.99
  • Includes EPUB and PDF
  • About eBook Formats
  • This eBook includes the following formats, accessible from your Account page after purchase:

    ePub EPUB The open industry format known for its reflowable content and usability on supported mobile devices.

    Adobe Reader PDF The popular standard, used most often with the free Acrobat® Reader® software.

    This eBook requires no passwords or activation to read. We customize your eBook by discreetly watermarking it with your name, making it uniquely yours.


  • Copyright 2012
  • Dimensions: 7" x 9"
  • Pages: 256
  • Edition: 1st
  • Book
  • ISBN-10: 0-321-76736-5
  • ISBN-13: 978-0-321-76736-3

Get Started Fast with HTML5 Online Game Programming!

HTML5 will transform web and mobile gaming. As new browsers rapidly adopt it, HTML5 will do everything “legacy” technologies such as Flash and Silverlight have done—and much more. In Learning HTML5 Game Programming, pioneering developer James L. Williams gives you all the knowledge, code, and insights you’ll need to get started fast!

Williams combines detailed explanations of HTML5’s key innovations with examples, including two case study applications that address the entire development process. He guides you through setting up a state-of-the-art HTML5 development environment; making the most of HTML5’s canvas tag, SVG vector graphics, and WebGL 3D; and targeting diverse mobile and social platforms. It’s all here: from the essentials of online game design to the nitty-gritty details of performance optimization.

About the Website

All code samples and answers to chapter exercises are available for download at www.informit.com/title/9780321767363 and on Github at https://github.com/jwill/html5-game-book.

Coverage includes

·          Understanding the HTML5 innovations that make it possible to create amazingly rich games

·          Setting up a state-of-the-art open source HTML5 game development environment

·          Using JavaScript to drive sophisticated interactions between users and games

·          Building basic games fast, with the prototype-based Simple Game Framework (SGF)

·          Generating movement and gameplay with the canvas tag and surface

·          Creating games with SVG vector graphics using the RaphaëlJS Javascript library

·          Using Three.js to build powerful WebGL 3D games with far less complexity

·          Developing games without JavaScript, using Google Web Toolkit (GWT) or CoffeeScript

·          Building a complete multiplayer game server using Node.js and WebSockets

·          Planning and choosing tools for mobile game development with HTML5

·          Optimizing game performance with offline cache, minification, and other techniques

Learning HTML5 Game Programming is the fastest route to success with HTML5 game development—whether you’re a long-time game developer or a web/mobile programmer building games for the first time.



Download free online files here

Sample Content

Online Sample Chapter

Introducing HTML5 for Building Online Games

Sample Pages

Download the sample pages (includes Chapter 1 and Index)

Table of Contents

Chapter 1 Introducing HTML5 1

Beyond Basic HTML 1

JavaScript 1


Bridging the Divide 2

Google Gears 3

Chrome Frame 3

Getting Things Done with WebSockets and Web Workers 4

WebSockets 4

Web Workers 4

Application Cache 5

Database API 6


IndexedDB API 7

Web Storage 7

Geolocation 8

Getting Users’ Attention with Notifications 10

Requesting Permission to Display Notifications 11

Creating Notifications 11

Interacting with Notifications 12

Media Elements 13

Controlling Media 13

Handling Unsupported Formats 14

HTML5 Drawing APIs 15

Canvas 15

SVG 16

WebGL 16

Conveying Information with Microdata 16

Chapter 2 Setting Up Your Development Environment 19

Development Tools 19

Installing Java 19

Installing the Eclipse IDE and Google Plugin 20

Google Web Toolkit 22

Web Server Tools and Options 23

Google App Engine 23

Opera Unite 23

Node.js and RingoJS 23

Browser Tools 24

Inside the Chrome Developer Tools 24

Chrome Extensions 25

Safari Developer Tools 26

Firebug 26

HTML5 Tools 27

ProcessingJS 27

Inkscape 27

SVG-edit 27

Raphaël 28

3D Modeling Tools 29

Blender 29

Chapter 3 Learning JavaScript 31

What Is JavaScript? 31

JavaScript’s Basic Types 31

Understanding Arithmetic Operators 32

Understanding JavaScript Functions 32

Functions as First-class Objects 33

Comparison Operators 34

Conditional Loops and Statements 35

Controlling Program Flow with Loops 36

Delayed Execution with setTimeout and setInterval 38

Creating Complex Objects with Inheritance and Polymorphism 38

Making Inheritance Easier with the Prototype Library 39

Learning JQuery 41

Manipulating the DOM with Selectors 42

JQuery Events 43

AJAX with JQuery 43

Cross-Site Scripting 44

JSON: The Other JavaScript Format 44

JavaScript Outside of the Browser 45

Mobile Platforms 45

JavaScript as an Intermediary Language 45

JavaScript on the Desktop 46

Server-Side JavaScript 48

Chapter 4 How Games Work 51

Designing a Game 51

Writing a Basic Design Document 51

Deciding on a Game Genre 52

The Game Loop 53

Getting Input from the User 53

Representing Game Objects with Advanced Data Structures 54

Making Unique Lists of Data with Sets 54

Creating Object Graphs with Linked Lists 56

Understanding the APIs in Simple Game Framework 57

Core API 57

Components API 58

Resources API and Networking APIs 58

Building Pong with the Simple Game Framework 59

Setting Up the Application 59

Drawing the Game Pieces 61

Making Worlds Collide with Collision Detection and Response 63

Understanding Newton’s Three Laws 63

Making the Ball Move 64

Advanced Collision Detection and Particle Systems with Asteroids 66

Creating Competitive Opponents with Artificial Intelligence 67

Adding AI to Pong 68

Advanced Computer AI with Tic-Tac-Toe 68

Chapter 5 Creating Games with the Canvas Tag 71

Getting Started with the Canvas 71

Drawing Your First Paths 72

Drawing Game Sprites for Tic-Tac-Toe 73

Drawing Objects on the Canvas with Transformations 75

Ordering Your Transformations 76

Saving and Restoring the Canvas Drawing State 77

Using Images with the Canvas 78

Serving Images with Data URLs 78

Serving Images with Spritesheets 78

Drawing Images on the Canvas 78

Animating Objects with Trident.js 79

Creating Timelines 80

Animating with Keyframes 81

Creating Nonlinear Timelines with Easing 81

Animating Game Objects with Spritesheets 83

Simulating 3D in 2D Space 84

Perspective Projection 84

Parallaxing 85

Creating a Parallax Effect with JavaScript 85

Creating Copy Me 87

Drawing Our Game Objects 87

Making the Game Tones 88

Playing MIDI Files in the Browser 89

Playing Multiple Sounds at Once 90

Playing Sounds Sequentially 91

Drawing Our Game Text 91

Styling Text with CSS Fonts 92

Chapter 6 Creating Games with SVG and RaphaëlJS 95

Introduction to SVG 95

First Steps with RaphaëlJS 97

Setting Up Our Development Environment 97

Drawing the Game Board 98

Drawing Game Text 99

Custom Fonts 100

Specifying Color 103

Loading Game Assets 104

Converting SVG Files to Bitmap Images 105

Creating Our Game Classes 105

Shuffling Cards 107

Drawing and Animating Cards 107

Creating Advanced Animations 110

Paths 110

moveto and lineto 110

curveto 111

Exporting Paths from an SVG File 112

Animating Along Paths 113

Extending Raphaël with Plugins 113

Adding Functions 113

SVG Filters 113

Speed Considerations 114

Chapter 7 Creating Games with WebGL and Three.js 117

Moving to Three Dimensions 118

Giving Your Objects Some Swagger with Materials and Lighting 119

Understanding Lighting 120

Using Materials and Shaders 120

Creating Your First Three.js Scene 122

Setting Up the View 123

Viewing the World 128

Loading 3D Models with Three.js 129

Programming Shaders and Textures 131

Using Textures 134

Creating a Game with Three.js 136

Simulating the Real World with Game Physics 137

Revisiting Particle Systems 140

Creating Scenes 141

Selecting Objects in a Scene 142

Animating Models 142

Sourcing 3D Models 143

Benchmarking Your Games 144

Checking Frame Rate with Stats.js 144

Using the WebGL Inspector 145

Chapter 8 Creating Games Without JavaScript 147

Google Web Toolkit 147

Understanding GWT Widgets and Layout 148

Exposing JavaScript Libraries to GWT with JSNI 149

RaphaëlGWT 150

Adding Sound with gwt-html5-media 151

Accessing the Drawing APIs with GWT 151

CoffeeScript 153

Installing CoffeeScript 153

Compiling CoffeeScript Files 153

A Quick Guide to CoffeeScript 154

Basics 154

Functions and Invocation 154

Aliases, Conditionals, and Loops 156

Enhanced for Loop and Maps 156

Classes and Inheritance 157

Alternate Technologies 158

Cappuccino 158

Pyjamas 158

Chapter 9 Building a Multiplayer Game Server 161

Introduction to Node.js 161

Extending Node with the Node Package Manager 162

Managing Multiple Node Versions 162

Making Web Apps Simpler with ExpressJS 163

Serving Requests with URL Routing 163

Managing Sessions 165

Understanding the ExpressJS Application Structure 165

Templating HTML with CoffeeKup 166

Persisting Data with Caching 168

Managing Client/Server Communication 169

Communicating with Socket.IO 169

Setting Up a Simple Socket.IO Application with Express 170

Making Web Sockets Simpler with NowJS 171

Debugging Node Applications 172

Creating a Game Server 173

Making the Game Lobby 173

Creating Game Rooms with NowJS Groups 174

Managing Game Participants and Moving Between Game Rooms 175

Managing Game Play 175

Chapter 10 Developing Mobile Games 179

Choosing a Mobile Platform 179

iOS 179

Android 180

WebOS 180

Windows Phone 7 180

Flick, Tap, and Swipe: A Quick Guide to Mobile Gestures 181

Deciding Between an Application and a Website 181

Storing Data on Mobile Devices 183

Relaxing in Your Lawnchair: An Easier Way to Store Data 183

Getting Started with Lawnchair 184

Client-Side Scripting Simplified with JQuery and Zepto 185

Using JQuery Variants 185

Using Zepto.js 187

Architecting Your Applications with JoApp 187

Choosing an Application Framework 188

PhoneGap 188

Diving into the PhoneGap APIs 189

Appcelerator Titanium 191

Diving into the Appcelerator Titanium APIs 191

Packaging Android Applications with Titanium and PhoneGap 191

Packaging an Application with Titanium 193

Packaging an Application with PhoneGap 195

Chapter 11 Publishing Your Games 199

Optimizing Your Game’s Assets 199

Minification with Google Closure Compiler 199

Running Applications Offline with Application Cache 201

Hosting Your Own Server 203

Deploying Applications on Hosted Node.js Services 204

Publishing Applications on the Chrome Web Store 205

Describing Your Application’s Metadata 206

Deploying a Hosted Application 207

Deploying a Packaged Application 208

Testing Your Applications Locally 208

Uploading Your Application to the Chrome Web Store 208

Configuring Your Application 210

Deciding Between Packaged and Hosted Chrome Apps 212

Publishing Applications with TapJS 212

Creating a TapJS Application 213

Packaging an Application for TapJS 215

Publishing a TapJS Application to Facebook 215

Publishing Games with Kongregate 217

Publishing HTML5 Applications to the Desktop 217

Index 219

More Information

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020