983 professional HTML5 mobile game development

www.it-ebooks.info


www.it-ebooks.info


PROFESSIONAL

HTML5 Mobile Game Development
Pascal Rettig

www.it-ebooks.info


Professional HTML5 Mobile Game Development
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256

www.wiley.com
Copyright © 2012 by Pascal Rettig
Published by John Wiley & Sons, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-1-118-30132-6
ISBN: 978-1-118-30133-3 (ebk)
ISBN: 978-1-118-42144-4 (ebk)
ISBN: 978-1-118-43394-2 (ebk)
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
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, scanning or otherwise, except as permitted under Sections 107 or 108
of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization
through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers,
MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the
Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 7486008, or online at />Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with
respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including
without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold
with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services.
If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to
in this work as a citation and/or a potential source of further information does not mean that the author or the publisher
endorses the information the organization or Web site may provide or recommendations it may make. Further, readers
should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was
written and when it is read.
For general information on our other products and services please contact our Customer Care Department within the
United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard
print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD
or DVD that is not included in the version you purchased, you may download this material at http://booksupport
.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2012942105
Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries,
and may not be used without written permission. All other trademarks are the property of their respective owners. John
Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.

www.it-ebooks.info


This book is dedicated to my wife, business partner,
best friend, and all-around support system, Martha.
Thank You.

www.it-ebooks.info


CREDITS
EXECUTIVE EDITOR

VICE PRESIDENT AND EXECUTIVE GROUP
PUBLISHER

Carol Long

Richard Swadley
PROJECT EDITOR

Jennifer Lynn

VICE PRESIDENT AND EXECUTIVE PUBLISHER

Neil Edde
TECHNICAL EDITOR

Chris Ullman

ASSOCIATE PUBLISHER

Jim Minatel
PRODUCTION EDITOR

Christine Mugnolo

PROJECT COORDINATOR, COVER

Katie Crocker
COPY EDITOR

San Dee Phillips

COMPOSITOR

Jeff Lytle, Happenstance Type-O-Rama
EDITORIAL MANAGER

Mary Beth Wakefield

PROOFREADER

Nancy Carrasco
FREELANCER EDITORIAL MANAGER

Rosemarie Graham

INDEXER

Johnna VanHoose Dinse
ASSOCIATE DIRECTOR OF MARKETING

David Mayhew

COVER DESIGNER

Ryan Sneed
MARKETING MANAGER

Ashley Zurcher

COVER IMAGE

© Daniel Schweinert / iStockPhoto
BUSINESS MANAGER

Amy Knies
PRODUCTION MANAGER

Tim Tate

www.it-ebooks.info


ABOUT THE AUTHOR
PASCAL RETTIG  is a lifelong programmer who got his start program-

ming by writing BASIC games on the Apple II at the ripe age of 7. Pascal
has a Bachelor of Science and a Master of Engineering in computer science and electrical engineering from the Massachusetts Institute of
Technology ’02 and has been hacking and building stuff on the web since
1995. Pascal built the HTML5 game-based language learning system
GamesForLanguage.com in 2011 and is currently a partner at the interactive web agency Cykod. He organizes one of the country’s oldest monthly
HTML5 Game Development meetups in Boston each month and runs the HTML5 Game
Development news site html5gamedevelopment.org.

ABOUT THE TECHNICAL EDITOR

CHRIS ULLMAN  is a senior software developer at MIG, specializing in .NET,
and a technical editor/author, who has spent many years stewing in webrelated technologies, like a teabag left too long in the pot. Coming from a
computer science background, he gravitated toward MS solutions during
the summer of ASP (1997). He cut his teeth on Wrox Press ASP guides,
and since then he has edited or contributed to more than 30 books, most
notably as lead author for Wrox’s bestselling Beginning ASP/ASP.NET
1.x/2 series. These days he lives out on the moors of Cornwall and spends
his non-computing time running, writing music, and attempting with his wife, Kate, to curb the
enthusiasm of three very boisterous children.

www.it-ebooks.info


www.it-ebooks.info


ACKNOWLEDGMENTS

I’D LIKE TO THANK MY WIFE,  Martha, who not only had to put up with me spending every moment

of free time I had writing this book (while working on two startups) but also was gracious enough
to design all the custom game art used in this book, ensuring that readers aren’t stuck with the
dreaded curse of programmer art.
I’d also like to thank my family for supporting me in this endeavor and continuing to accept me as a
family member despite my best efforts to lock myself away for the duration.
I’d like to particularly thank my editors, Carol Long, Jennifer Lynn, and San Dee Phillips, for helping a newbie author through the process of turning some pages of code into a cohesive book; and
technical reviewer Chris Ullman, who did his best to ensure this book made it to print as error-free
as possible.

Lastly, I’d like to thank the Boston HTML5 Game Development community. Boston has an incredible technology community, and being around such motivated, smart people keeps me learning,
energized, and constantly hacking away at new projects.

www.it-ebooks.info


www.it-ebooks.info


CONTENTS

INTRODUCTION

xxiii

Part I: DIVING IN
CHAPTER 1: FLYING BEFORE YOU WALK

3

Introduction3
Building a Complete Game in 500 Lines
4
Understanding the Game
Structuring the Game
The Final Game

4
4
5

Adding the Boilerplate HTML
and CSS
Getting Started with Canvas

5
6

Accessing the Context
Drawing on Canvas
Drawing Images

6
7
8

Creating Your Game’s Structure
Building Object-Oriented JavaScript
Taking Advantage of Duck Typing
Creating the Three Principle Objects

Loading the SpriteSheet
Creating the Game Object

9
10
10
11

11

13

Implementing the Game Object
Refactoring the Game Code

13
15

Adding a Scrolling Background
Putting in a Title Screen

16
19

Drawing Text on Canvas

19

Adding a Protagonist

21

Creating the PlayerShip Object
Handling User Input

22
22

Summary23

www.it-ebooks.info


CONTENTS

CHAPTER 2: MAKING IT A GAME

25

Introduction25
Creating the GameBoard Object
25
Understanding the GameBoard
Adding and Removing Objects
Iterating over the List of Objects
Defining the Board Methods
Handling Collisions
Adding GameBoard into the Game

Firing Missiles

26
26
27
28
29
30

30

Adding a Bullet Sprite
Connecting Missiles to the Player

Adding Enemies

31
32

33

Calculating Enemy Movement
Constructing the Enemy Object
Stepping and Drawing the Enemy Object
Adding Enemies on the Board

33
34
35
36

Refactoring the Sprite Classes

37

Creating a Generic Sprite Class
Refactoring PlayerShip
Refactoring PlayerMissile
Refactoring Enemy

37

38
39
39

Handling Collisions

40

Adding Object Types
Colliding Missiles with Enemies
Colliding Enemies with the Player
Making It Go Boom

Representing Levels

40
41
42
43

44

Setting Up the Enemies
Setting Up Level Data
Loading and Finishing a Level
Implementing the Level Object

44
45
46

47

Summary49
CHAPTER 3: FINISHING UP AND GOING MOBILE

51

Introduction51
Adding Touch Controls
51
Drawing Controls
Responding to Touch Events
Testing on Mobile

x

www.it-ebooks.info

52
54
56


CONTENTS

Maximizing the Game

57

Setting the Viewport

Resizing the Canvas
Adding to the iOS Home Screen

57
57
60

Adding a Score
60
Making It a Fair Fight
61
Summary64
Part II: MOBILE HTML5
CHAPTER 4: HTML5 FOR MOBILE

67

Introduction67
Capturing a Brief History of HTML5
68
Understanding How HTML5 Grew Up “Different”
Looking Toward HTML6? HTML7? Nope, Just HTML5
Going to the Spec
Differentiating the HTML5 Family and HTML5

Using HTML5 The Right Way
Having Your Cake and Eating It, Too
Sniffing Browsers
Determining Capabilities, Not Browsers
Enhancing Progressively

Polyfilling in the Gaps

Considering HTML5 from a Game Perspective

68
68
69
69

70
70
70
72
73
74

74

Canvas74
CSS3/DOM75
SVG76

Considering HTML5 from a Mobile Perspective
Understanding the New APIs
What’s Coming: WebAPI

Surveying the Mobile Browser Landscape

76
77

77

77

WebKit: The Market Dominator
78
Opera: Still Plugging Along
78
Firefox: Mozilla’s Mobile Offering
79
WP7 Internet Explorer 9
79
Tablets79

Summary79

xi

www.it-ebooks.info


CONTENTS

CHAPTER 5: LEARNING SOME HELPFUL LIBRARIES

81

Introduction81
Learning JavaScript Libraries
82

Starting with jQuery
82
Adding jQuery to Your Page
Understanding the $
Manipulating the DOM
Creating Callbacks
Binding Events
Making Ajax Calls
Calling Remote Servers
Using Deferreds

Using Underscore.js

82
83
84
85
87
90
90
91

92

Accessing Underscore
Working with Collections
Using Utility Functions
Chaining Underscore Method Calls

92

92
93
94

Summary94
CHAPTER 6: BEING A GOOD MOBILE CITIZEN

95

Introduction95
Responding to Device Capabilities
96
Maximizing Real Estate
Resizing Canvas to Fit

96
97

Dealing with Browser Resizing, Scrolling, and Zooming
Handling Resizing
Preventing Scrolling and Zooming
Setting the Viewport
Removing the Address Bar

Configuring Your App for the iOS Home Screen
Making Your Game Web App Capable
Adding a Startup Image
Configuring Home Icons

Taking Mobile Performance into Consideration

Adapting to Limited Bandwidth and Storage
Optimizing for Mobile
Good for Mobile Is Good for All
Minifying Your JavaScript
Setting Correct Headers
Serving from a CDN

xii

www.it-ebooks.info

98
98
99
100
101

103
103
103
104

105
106
106
106
107
108
108

CONTENTS

Going Offline Completely with Application Cache
Creating Your Manifest File
Checking If the Browser Is Online
Listening for More Advanced Behavior
A Final Word of Warning

109
109
111
111
111

Summary112
Part III: JAVASCRIPT GAME DEV BASICS
CHAPTER 7: LEARNING ABOUT YOUR
HTML5 GAME DEVELOPMENT ENVIRONMENT

115

Introduction115
Picking an Editor
116
Exploring the Chrome Developer Tools
116
Activating Developer Tools
Inspecting Elements
Viewing Page Resources

Tracking Network Traffic

116
116
118
119

Debugging JavaScript

121

Examining the Console Tab
Exercising the Script Tab

121
123

Profiling and Optimizing Your Code
Running Profiles
Actually Optimizing Your Game

125
126
128

Mobile Debugging
129
Summary131
CHAPTER 8: RUNNING JAVASCRIPT ON THE COMMAND LINE

133

Introduction133
Learning About Node.js
134
Installing Node
134
Installing Node on Windows
Installing Node on OS X
Installing Node on Linux
Tracking the Latest Version of Node

135
135
135
136

Installing and Using Node Modules

136

Installing Modules
Hinting Your Code
Uglifying Your Code

136
136
137

xiii

www.it-ebooks.info


CONTENTS

Creating Your Own Script

137

Creating a package.json File
Using Server-Side Canvas
Creating a Reusable Script

138
139
140

Writing a Sprite-Map Generator

141

Using Futures
Working from the Top Down
Loading Images
Calculating the Size of the Canvas
Drawing Images on the Server-Side Canvas
Updating and Running the Script

141

142
144
146
146
148

Summary148
CHAPTER 9: BOOTSTRAPPING THE QUINTUS ENGINE: PART I

149

Introduction149
Creating a Framework for a Reusable HTML5 Engine
150
Designing the Basic Engine API
Starting the Engine Code

Adding the Game Loop

150
151

153

Building a Better Game Loop Timer
Adding the Optimized Game Loop to Quintus
Testing the Game Loop

Adding Inheritance

153
154
155

157

Using Inheritance in Game Engines
Adding Classical Inheritance to JavaScript
Exercising the Class Functionality

Supporting Events

157
158
161

162

Designing the Event API
Writing the Evented Class
Filling in the Evented Methods

Supporting Components
Designing the Component API
Implementing the Component System

162
162
163

165
166
167

Summary169
CHAPTER 10: BOOTSTRAPPING THE QUINTUS ENGINE: PART II

171

Introduction171
Accessing a Game Container Element
171
Capturing User Input
174
Creating an Input Subsystem
Bootstrapping the Input Module
xiv

www.it-ebooks.info

174
175


CONTENTS

Handling Keyboard Events
Adding Keypad Controls
Adding Joypad Controls
Drawing the Onscreen Input

Finishing and Testing the Input

Loading Assets

176
178
181
184
186

188

Defining Asset Types
Loading Specific Assets
Finishing the Loader
Adding Preload Support

189
189
191
194

Summary195
CHAPTER 11: BOOTSTRAPPING THE QUINTUS ENGINE: PART III

197

Introduction197
Defining SpriteSheets
198

Creating a SpriteSheet Class
Tracking and Loading Sheets
Testing the SpriteSheet class

Adding Sprites

198
199
200

201

Writing the Sprite Class
Referencing Sprites, Properties, and Assets
Exercising the Sprite Object

Setting the Stage with Scenes
Creating the Quintus.Scenes Module
Writing the Stage Class
Rounding Out the Scene Functionality

201
203
203

207
207
208
212

Finishing Blockbreak
214
Summary217
Part IV: BUILDING GAMES WITH CSS3 AND SVG
CHAPTER 12: BUILDING GAMES WITH CSS3

221

Introduction221
Deciding on a Scene Graph
221
Your Target Audience
Your Interaction Method
Your Performance Requirements

Implementing DOM Support
Considering DOM Specifics
Bootstrapping the Quintus DOM Module

222
222
222

223
223
223

xv

www.it-ebooks.info

CONTENTS

Creating a Consistent Translation Method
Creating a Consistent Transition Method
Implementing a DOM Sprite
Creating a DOM Stage Class
Replacing the Canvas Equivalents
Testing the DOM Functionality

224
227
227
230
231
232

Summary233
CHAPTER 13: CRAFTING A CSS3 RPG

235

Introduction235
Creating a Scrolling Tile Map
235
Understanding the Performance Problem
Implementing the DOM Tile Map Class

Building the RPG

236
236

240

Creating the HTML File
Setting Up the Game
Adding a Tile Map
Creating Some Useful Components
Adding in the Player
Adding Fog, Enemies, and Loot
Extending the Tile Map with Sprites
Adding a Health Bar and HUD

240
241
242
245
248
249
253
255

Summary260
CHAPTER 14: BUILDING GAMES WITH SVG AND PHYSICS

261

Introduction261

Understanding SVG Basics
262
Getting SVG on Your Page
Getting to Know the Basic SVG Elements
Transforming SVG Elements
Applying Strokes and Fills
Beyond the Basics

262
263
267
267
270

Working with SVG from JavaScript

271

Creating SVG Elements
Setting and Getting SVG Attributes

271
272

Adding SVG Support to Quintus
Creating an SVG Module
Adding SVG Sprites
Creating an SVG Stage
Testing the SVG Class

xvi

www.it-ebooks.info

272
273
274
276
278


CONTENTS

Adding Physics with Box2D

280

Understanding Physics Engines
Implementing the World Component
Implementing the Physics Component
Adding Physics to the Example

Creating a Cannon Shooter

281
281
284
287

288

Planning the Game
Building the Necessary Sprites
Gathering User Input and Finishing the Game

289
290
292

Summary294
Part V: HTML5 CANVAS
CHAPTER 15: LEARNING CANVAS, THE HERO OF HTML5

297

Introduction297
Getting Started with the Canvas Tag
298
Understanding CSS and Pixel Dimensions
Grabbing the Rendering Context
Creating an Image from Canvas

Drawing on Canvas

298
301
301

302

Setting the Fill and Stroke Styles
Setting the Stroke Details
Adjusting the Opacity
Drawing Rectangles
Drawing Images
Drawing Paths
Rendering Text on Canvas

Using the Canvas Transformation Matrix
Understanding the Basic Transformations
Saving, Restoring, and Resetting the Transformation Matrix
Drawing Snowflakes

Applying Canvas Effects

303
305
306
306
306
307
308

310
310
311
311

313

Adding Shadows
Using Composition Effects

314
314

Summary316
CHAPTER 16: GETTING ANIMATED

317

Introduction317
Building Animation Maps
318
Deciding on an Animation API
Writing the Animation Module
Testing the Animation

318
320
323
xvii

www.it-ebooks.info


CONTENTS

Adding a Canvas Viewport
325

Going Parallax
328
Summary330
CHAPTER 17: PLAYING WITH PIXELS

331

Introduction331
Reviewing 2-D Physics
332
Understanding Force, Mass, and Acceleration
Modeling a Projectile
Switching to an Iterative Solution
Extracting a Reusable Class

Implementing Lander

332
333
334
335

336

Bootstrapping the Game
Building the Ship
Getting Pixel Perfect
Playing with ImageData
Making It Go Boom

336
337
339
340
343

Summary347
CHAPTER 18: CREATING A 2-D PLATFORMER

349

Introduction349
Creating a Tile Layer
350
Writing the TileLayer Class
Exercising the TileLayer Code
Optimizing the Drawing

Handling Platformer Collisions
Adding the 2-D Component
Calculating Platformer Collisions
Stitching It Together with the PlatformStage

Building the Game

350
352
353

355

356
358
359

361

Boostrapping the Game
Creating the Enemy
Adding Bullets
Creating the Player

361
363
364
365

Summary369
CHAPTER 19: BUILDING A CANVAS EDITOR

371

Introduction371
Serving the Game with Node.js
371
Creating the package.json File
Setting Up Node to Serve Static Assets
xviii

www.it-ebooks.info

372
372


CONTENTS

Creating the Editor

373

Modifying the Platform Game
Creating the Editor Module
Adding Touch and Mouse Events
Selecting Tiles

374
376
379
381

Adding Level-Saving Support
383
Summary384
Part VI: MULTIPLAYER GAMING
CHAPTER 20: BUILDING FOR ONLINE AND SOCIAL

387

Introduction387
Understanding HTTP-Based Multiplayer Games

388
Planning a Simple Social Game
388
Integrating with Facebook
389
Generating the Facebook Application
Creating the Node.js Server
Adding the Login View
Testing the Facebook Authentication

Connecting to a Database

389
390
393
395

396

Installing MongoDB on Windows
Installing MongoDB on OS X
Installing MongoDB on Linux
Connecting to MongoDB from the Command Line
Integrating MongoDB into the Game

396
396
397
397
398

Finishing Blob Clicker
401
Pushing to a Hosting Service
403
Summary405
CHAPTER 21: GOING REAL TIME

407

Introduction407
Understanding WebSockets
407
Using Native WebSockets in the Browser
408
Using Socket.io: WebSockets with Fallbacks
411
Creating the Scribble Server
Adding the Scribble Client

Building a Multiplayer Pong Game Using Socket.io
Dealing with Latency
Combating Cheating
Deploying Real-Time Apps

411
413

415
415

416
416

xix

www.it-ebooks.info


CONTENTS

Creating an Auto-Matching Server
Building the Pong Front End

417
419

Summary425
CHAPTER 22: BUILDING NONTRADITIONAL GAMES

427

Introduction427
Creating a Twitter Application
427
Connecting a Node App to Twitter
429
Sending Your First Tweet
Listening to the User Stream

429

430

Generating Random Words
431
Creating Twitter Hangman
432
Summary437
Part VII: MOBILE ENHANCEMENTS
CHAPTER 23: LOCATING VIA GEOLOCATION

441

Introduction441
Getting Started with Geolocation
441
Getting a One-Time Position
442
Plotting a Location on a Map
444
Watching the Position Change over Time
445
Drawing an Interactive Map
446
Calculating the Position between Two Points
448
Summary448
CHAPTER 24: QUERYING DEVICE ORIENTATION
AND ACCELERATION

449

Introduction449
Looking at a Device Orientation
450
Getting Started with Device Orientation Events
450
Detecting and Using the Event
Understanding the Event Data

451
451

Trying Out Device Orientation

451

Creating a Ball Playground
Adding Orientation Control
Dealing with Browser Rotation

452
454
455

Summary456

xx

www.it-ebooks.info

CONTENTS

CHAPTER 25: PLAYING SOUNDS, THE MOBILE ACHILLES HEEL

457

Introduction457
Working with the Audio Tag
457
Using the Audio Tag for Basic Playback
Dealing with Different Supported Formats
Understanding the Limitations of Mobile Audio

Building a Simple Desktop Sound Engine

458
458
459

459

Using Audio Tags for Game Audio
Adding a Simple Sound System
Adding Sound Effects to Block Break

460
460
461

Building a Sound System for Mobile

463

Using Sound Sprites
Generating the Sprite File
Adding Sound Sprites to the Game

463
466
467

Looking to the Future of HTML5 Sound
467
Summary467
Part VIII: GAME ENGINES AND APP STORES
CHAPTER 26: USING AN HTML5 GAME ENGINE

471

Introduction471
Looking at the History of HTML5 Engines
471
Using a Commercial Engine
472
Impact.js473
Spaceport.io474
IDE Engines
474

Using an Open-Source Engine

475

Crafty.js475
LimeJS476
EaselJS478

Summary481
CHAPTER 27: TARGETING APP STORES

483

Introduction483
Packaging Your App for the Google Chrome Web Store
484
Creating a Hosted App
Creating a Packaged App
Publishing Your App

484
486
486

xxi

www.it-ebooks.info


CONTENTS

Using CocoonJS to Accelerate Your App
Getting a Game Ready to Load into CocoonJS
Testing CocoonJS on Android
Building Your App in the Cloud

Building Apps with the AppMobi XDK and DirectCanvas
Understanding DirectCanvas
Installing the XDK
Creating the App
Modifying Alien Invasion to Use DirectCanvas
Testing Your App on a Device

487
487
489
489

490
490
490
491
491
496

Summary496
CHAPTER 28: SEEKING OUT WHAT’S NEXT

497

Introduction497
Going 3-D with WebGL
497
Getting Better Access to Sound with the Web Audio API
498
Making Your Game Bigger with the Full-Screen API
499
Locking Your Device Screen with the Screen Orientation API
499
Adding Real-Time Communications with WebRTC
499
Tracking Other Upcoming Native Features
500
Summary500
APPENDIX: RESOURCES

501

INDEX

503

xxii

www.it-ebooks.info


INTRODUCTION

THE GAMING WORLD AND THE WEB  have been on a collision course with each other since social

games began bringing gaming to the masses and helped make what was once a subculture a mainstream, mass-market phenomenon. Throw mobile into the mix and suddenly you have a massive
phenomenon that is going to become more important as more devices get into people’s hands.
For example, one story making its way around the web as of this writing is that game developer
Rovio, creator of the Angry Birds franchise, is estimated to be worth approximately 8 billion dollars, almost the same as venerable phone maker Nokia. These days people spend more time on their
phones and tablets than ever before, and games (in addition to social networks) account for a significant portion of that time. Smartphones and tablets are significantly displacing dedicated mobile
gaming devices from Nintendo and Sony. With HTML5, game developers now have technology that
has the capability to reach more people than ever imaginable from a single codebase.
HTML5 mobile game development is currently a new technology that people aren’t sure what to make
of yet, much like smartphone games were in 2008 when the Apple App Store launched. However, there
are some serious heavyweights pushing for the success of HTML5 gaming. Facebook, which launched
its App Center in May 2012, has made HTML5-based Web Apps first-class citizens on mobile and is
looking for ways to monetize on mobile and get out from underneath the thumb of the 30% fee Apple
takes for in-app purchases in its app store. Carriers such as AT&T similarly view web apps as a way to
recapture revenue lost to Google and Apple.
All is not rosy in the HTML5 game development picture, however. Different devices have different
capabilities, levels of performance, and screen resolutions, and navigating the dangerous waters of
mobile HTML5 game development requires some careful sailing. That’s where this book comes in.
Its goal is to provide a pragmatic roadmap to build mobile games in HTML5, covering both the
possibilities and limitations of the medium. If HTML5 game development on the desktop is still in
its infancy, mobile HTML5 game development is still embryonic. The possibilities to do great things
are within reach, but the first smash success in the medium is still to be seen.
Getting into a technology at an early stage can provide significant benefits. One of the wonderful things in working in new technologies is that the noise level is minimal, and less is required to
generate a splash than in other established mediums. HTML5 games, especially mobile ones, have
budgets that are tiny fractions of the millions of dollars that standard PC and console games have,
and yet they have the opportunity to create a smash hit in an instant due to the viral nature of the
web. Mobile HTML5 games have even more potential for explosive growth because they can be
shared instantly with a link rather than requiring the recipients to download an app that might not
be available for their device from an app store.
This book is a journey through the world of possibilities that the exciting realm of HTML5 mobile

game development presents and I hope you’ll jump aboard.

www.it-ebooks.info