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
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
Defi ning 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
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 Diff erent 68
Looking Toward HTML6? HTML7? Nope, Just HTML5 68
Going to the Spec 69
Diff erentiating the HTML5 Family and HTML5 69
Using HTML5 The Right Way 70
Having Your Cake and Eating It, Too 70
Sniffi ng Browsers 70
Determining Capabilities, Not Browsers 72
Enhancing Progressively 73
Polyfi lling 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 Off ering 79
WP7 Internet Explorer 9 79
Tablets 79
Summary 79
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
Confi guring Your App for the iOS Home Screen 103
Making Your Game Web App Capable 103
Adding a Startup Image 103
Confi guring 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
Going Offl 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 Traffi c 119
Debugging JavaScript 121
Examining the Console Tab 121
Exercising the Script Tab 123
Profi ling and Optimizing Your Code 125
Running Profi les 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
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
Handling Keyboard Events 176
Adding Keypad Controls 178
Adding Joypad Controls 181
Drawing the Onscreen Input 184
Finishing and Testing the Inp
