wrox press professional html5 mobile game development (2012)

PROFESSIONAL
HTML5 Mobile Game Development
Pascal Rettig

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) 748-
6008, 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 specically disclaim all warranties, including
without limitation warranties of tness for a particular purpose. No warranty may be created or extended by sales or pro-
motional 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 pub-
lisher 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 trade-
marks or registered trademarks of John Wiley & Sons, Inc. and/or its afliates, 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.

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

EXECUTIVE EDITOR
Carol Long
PROJECT EDITOR
Jennifer Lynn
TECHNICAL EDITOR
Chris Ullman
PRODUCTION EDITOR

Christine Mugnolo
COPY EDITOR
San Dee Phillips
EDITORIAL MANAGER
Mary Beth Wakefield
FREELANCER EDITORIAL MANAGER
Rosemarie Graham
ASSOCIATE DIRECTOR OF MARKETING
David Mayhew
MARKETING MANAGER
Ashley Zurcher
BUSINESS MANAGER
Amy Knies
PRODUCTION MANAGER
Tim Tate
VICE PRESIDENT AND EXECUTIVE GROUP
PUBLISHER
Richard Swadley
VICE PRESIDENT AND EXECUTIVE PUBLISHER
Neil Edde
ASSOCIATE PUBLISHER
Jim Minatel
PROJECT COORDINATOR, COVER
Katie Crocker
COMPOSITOR
Je Lytle, Happenstance Type-O-Rama
PROOFREADER
Nancy Carrasco
INDEXER
Johnna VanHoose Dinse

COVER DESIGNER
Ryan Sneed
COVER IMAGE
© Daniel Schweinert / iStockPhoto
CREDITS
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 sci-
ence 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 interac-
tive 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 web-
related 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.


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 help-
ing 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 incred-
ible technology community, and being around such motivated, smart people keeps me learning,
energized, and constantly hacking away at new projects.

CONTENTS
INTRODUCTION xxiii
PART I: DIVING IN
CHAPTER 1: FLYING BEFORE YOU WALK 3
Introduction 3
Building a Complete Game in 500 Lines 4
Understanding the Game 4
Structuring the Game 4
The Final Game 5
Adding the Boilerplate HTML
and CSS 5
Getting Started with Canvas 6
Accessing the Context 6
Drawing on Canvas 7
Drawing Images 8
Creating Your Game’s Structure 9

Building Object-Oriented JavaScript 10
Taking Advantage of Duck Typing 10
Creating the Three Principle Objects 11
Loading the SpriteSheet 11
Creating the Game Object 13
Implementing the Game Object 13
Refactoring the Game Code 15
Adding a Scrolling Background 16
Putting in a Title Screen 19
Drawing Text on Canvas 19
Adding a Protagonist 21
Creating the PlayerShip Object 22
Handling User Input 22
Summary 23
x
CONTE NTS
CHAPTER 2: MAKING IT A GAME 25
Introduction 25
Creating the GameBoard Object 25
Understanding the GameBoard 26
Adding and Removing Objects 26
Iterating over the List of Objects 27
Defining the Board Methods 28
Handling Collisions 29
Adding GameBoard into the Game 30
Firing Missiles 30
Adding a Bullet Sprite 31
Connecting Missiles to the Player 32
Adding Enemies 33
Calculating Enemy Movement 33

Constructing the Enemy Object 34
Stepping and Drawing the Enemy Object 35
Adding Enemies on the Board 36
Refactoring the Sprite Classes 37
Creating a Generic Sprite Class 37
Refactoring PlayerShip 38
Refactoring PlayerMissile 39
Refactoring Enemy 39
Handling Collisions 40
Adding Object Types 40
Colliding Missiles with Enemies 41
Colliding Enemies with the Player 42
Making It Go Boom 43
Representing Levels 44
Setting Up the Enemies 44
Setting Up Level Data 45
Loading and Finishing a Level 46
Implementing the Level Object 47
Summary 49
CHAPTER 3: FINISHING UP AND GOING MOBILE 51
Introduction 51
Adding Touch Controls 51
Drawing Controls 52
Responding to Touch Events 54
Testing on Mobile 56
xi
CONTE NTS
Maximizing the Game 57
Setting the Viewport 57
Resizing the Canvas 57

Adding to the iOS Home Screen 60
Adding a Score 60
Making It a Fair Fight 61
Summary 64
PART II: MOBILE HTML5
CHAPTER 4: HTML5 FOR MOBILE 67
Introduction 67
Capturing a Brief History of HTML5 68
Understanding How HTML5 Grew Up “Dierent” 68
Looking Toward HTML6? HTML7? Nope, Just HTML5 68
Going to the Spec 69
Dierentiating the HTML5 Family and HTML5 69
Using HTML5 The Right Way 70
Having Your Cake and Eating It, Too 70
Sning Browsers 70
Determining Capabilities, Not Browsers 72
Enhancing Progressively 73
Polyfilling in the Gaps 74
Considering HTML5 from a Game Perspective 74
Canvas 74
CSS3/DOM 75
SVG 76
Considering HTML5 from a Mobile Perspective 76
Understanding the New APIs 77
What’s Coming: WebAPI 77
Surveying the Mobile Browser Landscape 77
WebKit: The Market Dominator 78
Opera: Still Plugging Along 78
Firefox: Mozilla’s Mobile Oering 79
WP7 Internet Explorer 9 79

Tablets 79
Summary 79
xii
CONTE NTS
CHAPTER 5: LEARNING SOME HELPFUL LIBRARIES 81
Introduction 81
Learning JavaScript Libraries 82
Starting with jQuery 82
Adding jQuery to Your Page 82
Understanding the $ 83
Manipulating the DOM 84
Creating Callbacks 85
Binding Events 87
Making Ajax Calls 90
Calling Remote Servers 90
Using Deferreds 91
Using Underscore.js 92
Accessing Underscore 92
Working with Collections 92
Using Utility Functions 93
Chaining Underscore Method Calls 94
Summary 94
CHAPTER 6: BEING A GOOD MOBILE CITIZEN 95
Introduction 95
Responding to Device Capabilities 96
Maximizing Real Estate 96
Resizing Canvas to Fit 97
Dealing with Browser Resizing, Scrolling, and Zooming 98
Handling Resizing 98
Preventing Scrolling and Zooming 99

Setting the Viewport 100
Removing the Address Bar 101
Configuring Your App for the iOS Home Screen 103
Making Your Game Web App Capable 103
Adding a Startup Image 103
Configuring Home Icons 104
Taking Mobile Performance into Consideration 105
Adapting to Limited Bandwidth and Storage 106
Optimizing for Mobile 106
Good for Mobile Is Good for All 106
Minifying Your JavaScript 107
Setting Correct Headers 108
Serving from a CDN 108
xiii
CONTE NTS
Going Oine Completely with Application Cache 109
Creating Your Manifest File 109
Checking If the Browser Is Online 111
Listening for More Advanced Behavior 111
A Final Word of Warning 111
Summary 112
PART III: JAVASCRIPT GAME DEV BASICS
CHAPTER 7: LEARNING ABOUT YOUR
HTML5 GAME DEVELOPMENT ENVIRONMENT 115
Introduction 115
Picking an Editor 116
Exploring the Chrome Developer Tools 116
Activating Developer Tools 116
Inspecting Elements 116
Viewing Page Resources 118

Tracking Network Trac 119
Debugging JavaScript 121
Examining the Console Tab 121
Exercising the Script Tab 123
Profiling and Optimizing Your Code 125
Running Profiles 126
Actually Optimizing Your Game 128
Mobile Debugging 129
Summary 131
CHAPTER 8: RUNNING JAVASCRIPT ON THECOMMAND LINE 133
Introduction 133
Learning About Node.js 134
Installing Node 134
Installing Node on Windows 135
Installing Node on OS X 135
Installing Node on Linux 135
Tracking the Latest Version of Node 136
Installing and Using Node Modules 136
Installing Modules 136
Hinting Your Code 136
Uglifying Your Code 137
xiv
CONTE NTS
Creating Your Own Script 137
Creating a package.json File 138
Using Server-Side Canvas 139
Creating a Reusable Script 140
Writing a Sprite-Map Generator 141
Using Futures 141
Working from the Top Down 142

Loading Images 144
Calculating the Size of the Canvas 146
Drawing Images on the Server-Side Canvas 146
Updating and Running the Script 148
Summary 148
CHAPTER 9: BOOTSTRAPPING THE QUINTUS ENGINE: PART I 149
Introduction 149
Creating a Framework for a Reusable HTML5 Engine 150
Designing the Basic Engine API 150
Starting the Engine Code 151
Adding the Game Loop 153
Building a Better Game Loop Timer 153
Adding the Optimized Game Loop to Quintus 154
Testing the Game Loop 155
Adding Inheritance 157
Using Inheritance in Game Engines 157
Adding Classical Inheritance to JavaScript 158
Exercising the Class Functionality 161
Supporting Events 162
Designing the Event API 162
Writing the Evented Class 162
Filling in the Evented Methods 163
Supporting Components 165
Designing the Component API 166
Implementing the Component System 167
Summary 169
CHAPTER 10: BOOTSTRAPPING THE QUINTUS ENGINE: PART II 171
Introduction 171
Accessing a Game Container Element 171
Capturing User Input 174

Creating an Input Subsystem 174
Bootstrapping the Input Module 175
xv
CONTE NTS
Handling Keyboard Events 176
Adding Keypad Controls 178
Adding Joypad Controls 181
Drawing the Onscreen Input 184
Finishing and Testing the Input 186
Loading Assets 188
Defining Asset Types 189
Loading Specific Assets 189
Finishing the Loader 191
Adding Preload Support 194
Summary 195
CHAPTER 11: BOOTSTRAPPING THE QUINTUS ENGINE: PART III 197
Introduction 197
Defining SpriteSheets 198
Creating a SpriteSheet Class 198
Tracking and Loading Sheets 199
Testing the SpriteSheet class 200
Adding Sprites 201
Writing the Sprite Class 201
Referencing Sprites, Properties, and Assets 203
Exercising the Sprite Object 203
Setting the Stage with Scenes 207
Creating the Quintus.Scenes Module 207
Writing the Stage Class 208
Rounding Out the Scene Functionality 212
Finishing Blockbreak 214

Summary 217
PART IV: BUILDING GAMES WITH CSS3 AND SVG
CHAPTER 12: BUILDING GAMES WITH CSS3 221
Introduction 221
Deciding on a Scene Graph 221
Your Target Audience 222
Your Interaction Method 222
Your Performance Requirements 222
Implementing DOM Support 223
Considering DOM Specifics 223
Bootstrapping the Quintus DOM Module 223
xvi
CONTE NTS
Creating a Consistent Translation Method 224
Creating a Consistent Transition Method 227
Implementing a DOM Sprite 227
Creating a DOM Stage Class 230
Replacing the Canvas Equivalents 231
Testing the DOM Functionality 232
Summary 233
CHAPTER 13: CRAFTING A CSS3 RPG 235
Introduction 235
Creating a Scrolling Tile Map 235
Understanding the Performance Problem 236
Implementing the DOM Tile Map Class 236
Building the RPG 240
Creating the HTML File 240
Setting Up the Game 241
Adding a Tile Map 242
Creating Some Useful Components 245

Adding in the Player 248
Adding Fog, Enemies, and Loot 249
Extending the Tile Map with Sprites 253
Adding a Health Bar and HUD 255
Summary 260
CHAPTER 14: BUILDING GAMES WITH SVG ANDPHYSICS 261
Introduction 261
Understanding SVG Basics 262
Getting SVG on Your Page 262
Getting to Know the Basic SVG Elements 263
Transforming SVG Elements 267
Applying Strokes and Fills 267
Beyond the Basics 270
Working with SVG from JavaScript 271
Creating SVG Elements 271
Setting and Getting SVG Attributes 272
Adding SVG Support to Quintus 272
Creating an SVG Module 273
Adding SVG Sprites 274
Creating an SVG Stage 276
Testing the SVG Class 278
xvii
CONTE NTS
Adding Physics with Box2D 280
Understanding Physics Engines 281
Implementing the World Component 281
Implementing the Physics Component 284
Adding Physics to the Example 287
Creating a Cannon Shooter 288
Planning the Game 289

Building the Necessary Sprites 290
Gathering User Input and Finishing the Game 292
Summary 294
PART V: HTML5 CANVAS
CHAPTER 15: LEARNING CANVAS, THE HEROOFHTML5 297
Introduction 297
Getting Started with the Canvas Tag 298
Understanding CSS and Pixel Dimensions 298
Grabbing the Rendering Context 301
Creating an Image from Canvas 301
Drawing on Canvas 302
Setting the Fill and Stroke Styles 303
Setting the Stroke Details 305
Adjusting the Opacity 306
Drawing Rectangles 306
Drawing Images 306
Drawing Paths 307
Rendering Text on Canvas 308
Using the Canvas Transformation Matrix 310
Understanding the Basic Transformations 310
Saving, Restoring, and Resetting the Transformation Matrix 311
Drawing Snowflakes 311
Applying Canvas Eects 313
Adding Shadows 314
Using Composition Eects 314
Summary 316
CHAPTER 16: GETTING ANIMATED 317
Introduction 317
Building Animation Maps 318
Deciding on an Animation API 318

Writing the Animation Module 320
Testing the Animation 323
xviii
CONTE NTS
Adding a Canvas Viewport 325
Going Parallax 328
Summary 330
CHAPTER 17: PLAYING WITH PIXELS 331
Introduction 331
Reviewing 2-D Physics 332
Understanding Force, Mass, and Acceleration 332
Modeling a Projectile 333
Switching to an Iterative Solution 334
Extracting a Reusable Class 335
Implementing Lander 336
Bootstrapping the Game 336
Building the Ship 337
Getting Pixel Perfect 339
Playing with ImageData 340
Making It Go Boom 343
Summary 347
CHAPTER 18: CREATING A 2D PLATFORMER 349
Introduction 349
Creating a Tile Layer 350
Writing the TileLayer Class 350
Exercising the TileLayer Code 352
Optimizing the Drawing 353
Handling Platformer Collisions 355
Adding the 2-D Component 356
Calculating Platformer Collisions 358

Stitching It Together with the PlatformStage 359
Building the Game 361
Boostrapping the Game 361
Creating the Enemy 363
Adding Bullets 364
Creating the Player 365
Summary 369
CHAPTER 19: BUILDING A CANVAS EDITOR 371
Introduction 371
Serving the Game with Node.js 371
Creating the package.json File 372
Setting Up Node to Serve Static Assets 372
xix
CONTE NTS
Creating the Editor 373
Modifying the Platform Game 374
Creating the Editor Module 376
Adding Touch and Mouse Events 379
Selecting Tiles 381
Adding Level-Saving Support 383
Summary 384
PART VI: MULTIPLAYER GAMING
CHAPTER 20: BUILDING FOR ONLINE AND SOCIAL 387
Introduction 387
Understanding HTTP-Based Multiplayer Games 388
Planning a Simple Social Game 388
Integrating with Facebook 389
Generating the Facebook Application 389
Creating the Node.js Server 390
Adding the Login View 393

Testing the Facebook Authentication 395
Connecting to a Database 396
Installing MongoDB on Windows 396
Installing MongoDB on OS X 396
Installing MongoDB on Linux 397
Connecting to MongoDB from the Command Line 397
Integrating MongoDB into the Game 398
Finishing Blob Clicker 401
Pushing to a Hosting Service 403
Summary 405
CHAPTER 21: GOING REAL TIME 407
Introduction 407
Understanding WebSockets 407
Using Native WebSockets in the Browser 408
Using Socket.io: WebSockets with Fallbacks 411
Creating the Scribble Server 411
Adding the Scribble Client 413
Building a Multiplayer Pong Game Using Socket.io 415
Dealing with Latency 415
Combating Cheating 416
Deploying Real-Time Apps 416
xx
CONTE NTS
Creating an Auto-Matching Server 417
Building the Pong Front End 419
Summary 425
CHAPTER 22: BUILDING NONTRADITIONAL GAMES 427
Introduction 427
Creating a Twitter Application 427
Connecting a Node App to Twitter 429

Sending Your First Tweet 429
Listening to the User Stream 430
Generating Random Words 431
Creating Twitter Hangman 432
Summary 437
PART VII: MOBILE ENHANCEMENTS
CHAPTER 23: LOCATING VIA GEOLOCATION 441
Introduction 441
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
Summary 448
CHAPTER 24: QUERYING DEVICE ORIENTATION
AND ACCELERATION 449
Introduction 449
Looking at a Device Orientation 450
Getting Started with Device Orientation Events 450
Detecting and Using the Event 451
Understanding the Event Data 451
Trying Out Device Orientation 451
Creating a Ball Playground 452
Adding Orientation Control 454
Dealing with Browser Rotation 455
Summary 456
xxi
CONTE NTS
CHAPTER 25: PLAYING SOUNDS, THE MOBILE ACHILLES HEEL 457

Introduction 457
Working with the Audio Tag 457
Using the Audio Tag for Basic Playback 458
Dealing with Dierent Supported Formats 458
Understanding the Limitations of Mobile Audio 459
Building a Simple Desktop Sound Engine 459
Using Audio Tags for Game Audio 460
Adding a Simple Sound System 460
Adding Sound Eects to Block Break 461
Building a Sound System for Mobile 463
Using Sound Sprites 463
Generating the Sprite File 466
Adding Sound Sprites to the Game 467
Looking to the Future of HTML5 Sound 467
Summary 467
PART VIII: GAME ENGINES AND APP STORES
CHAPTER 26: USING AN HTML5 GAME ENGINE 471
Introduction 471
Looking at the History of HTML5 Engines 471
Using a Commercial Engine 472
Impact.js 473
Spaceport.io 474
IDE Engines 474
Using an Open-Source Engine 475
Crafty.js 475
LimeJS 476
EaselJS 478
Summary 481
CHAPTER 27: TARGETING APP STORES 483
Introduction 483

Packaging Your App for the Google Chrome Web Store 484
Creating a Hosted App 484
Creating a Packaged App 486
Publishing Your App 486
xxii
CONTE NTS
Using CocoonJS to Accelerate Your App 487
Getting a Game Ready to Load into CocoonJS 487
Testing CocoonJS on Android 489
Building Your App in the Cloud 489
Building Apps with the AppMobi XDK and DirectCanvas 490
Understanding DirectCanvas 490
Installing the XDK 490
Creating the App 491
Modifying Alien Invasion to Use DirectCanvas 491
Testing Your App on a Device 496
Summary 496
CHAPTER 28: SEEKING OUT WHAT’S NEXT 497
Introduction 497
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
Summary 500
APPENDIX: RESOURCES 501
INDEX 503
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 main-
stream, 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 dol-
lars, 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 sig-
nicant portion of that time. Smartphones and tablets are signicantly 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 rst-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 rst smash success in the medium is still to be seen.
Getting into a technology at an early stage can provide signicant benets. One of the wonder-
ful 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.