Learning HTML5 Game Programming

James L. Williams is an experienced Silicon Valley developer and speaker who has presented worldwide on Java, user interfaces, and game programming. He created SwingXBuilder, a domain-specific language for creating user interfaces utilizing SwingX components, and is co-despot of Griffon, a framework for building rich applications with Groovy. While riding a coach bus to South by Southwest Interactive (SXSW), he and his team conceived, coded, and created a winning product in the StartupBus 2011 competition.

Chapter 1 Introducing HTML5 1

Beyond Basic HTML 1

JavaScript 1

AJAX 2

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

WebSQL 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