0% found this document useful (0 votes)

762 views

Core HTML5 2D Game Programming - David Geary 9780133564242

Uploaded by

Emiliano Vega

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

762 views

Core HTML5 2D Game Programming - David Geary 9780133564242

Uploaded by

Emiliano Vega

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 78

Core HTML5

2D Game Programming
This page intentionally left blank
Core HTML5
2D Game Programming

David Geary

Upper Saddle River, NJ • Boston • Indianapolis • San Francisco

New York • Toronto • Montreal • London • Munich • Paris • Madrid
Capetown • Sydney • Tokyo • Singapore • Mexico City
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in this book, and the publisher was
aware of a trademark claim, the designations have been printed with initial capital letters or
in all capitals.

The author and publisher have taken care in the preparation of this book, but make no expressed
or implied warranty of any kind and assume no responsibility for errors or omissions. No
liability is assumed for incidental or consequential damages in connection with or arising out
of the use of the information or programs contained herein.

For information about buying this title in bulk quantities, or for special sales opportunities
(which may include electronic versions; custom cover designs; and content particular to your
business, training goals, marketing focus, or branding interests), please contact our corporate
sales department at corpsales@pearsoned.com or (800) 382–3419.

For government sales inquiries, please contact governmentsales@pearsoned.com.

For questions about sales outside the United States, please contact international@pearsoned.com.

Visit us on the Web: informit.com/ph

Library of Congress Cataloging-in-Publication Data

Geary, David M. (David Mark), 1957- author.

Core HTML5 2D game programming / David Geary.
pages cm
Includes index.
ISBN 978-0-13-356424-2 (pbk. : alk. paper) — ISBN 0-13-356424-X (pbk. : alk. paper)
1. HTML (Document markup language) 2. Computer games—Programming. 3.
Computer animation. I. Title.
QA76.76.H94G43 2015
006.7'4—dc23
2014014836
Copyright © 2015 Clarity Training

All rights reserved. Printed in the United States of America. This publication is protected by
copyright, and permission must be obtained from the publisher prior to any prohibited
reproduction, storage in a retrieval system, or transmission in any form or by any means,
electronic, mechanical, photocopying, recording, or likewise. To obtain permission to use
material from this work, please submit a written request to Pearson Education, Inc., Permissions
Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your
request to (201) 236-3290.

ISBN-13: 978-0-13-356424-2
ISBN-10: 0-13-356424-X
Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana.
First printing, July 2014
Contents
Preface ............................................................................................................ xv
Acknowledgments .......................................................................................... xxi
About the Author ........................................................................................... xxiii

Chapter 1: Introduction .................................................................................. 1

1.1 Snail Bait ........................................................................................................ 3
1.1.1 Sprites: The Cast of Characters ...................................................... 7
1.2 HTML5 Game Development Best Practices ........................................... 10
1.2.1 Pause the Game When the Window Loses Focus ..................... 10
1.2.2 Implement a Countdown When the Window Regains Focus . 12
1.2.3 Use CSS for UI Effects ................................................................... 12
1.2.4 Detect and React to Slowly Running Games ............................. 14
1.2.5 Incorporate Social Features .......................................................... 14
1.2.6 Put All the Game’s Images in a Single Sprite Sheet ................. 15
1.2.7 Store High Scores and Send Realtime, In-game Metrics to
the Server ........................................................................................ 16
1.3 Special Features .......................................................................................... 16
1.4 Snail Bait’s HTML and CSS ...................................................................... 18
1.5 Snail Bait’s Humble Beginning ................................................................ 25
1.6 The Use of JavaScript in This Book .......................................................... 28
1.7 Conclusion .................................................................................................. 31
1.8 Exercises ...................................................................................................... 31

Chapter 2: Raw Materials and Development Environment ........................ 33

2.1 Use Developer Tools .................................................................................. 35
2.1.1 The Console .................................................................................... 35
2.1.2 Chrome Canary’s Frame Rate Counter ...................................... 40
2.1.3 Debugging ...................................................................................... 42
2.1.4 Timelines ......................................................................................... 44
2.1.5 Proﬁling .......................................................................................... 49
2.2 Obtain Assets .............................................................................................. 50

v
vi Contents

2.2.1 Graphics .......................................................................................... 50

2.2.2 Image Manipulation ..................................................................... 51
2.2.3 Sound and Music ........................................................................... 52
2.2.4 Animations ..................................................................................... 53
2.3 Use CSS Backgrounds ............................................................................... 54
2.4 Generate Favicons ...................................................................................... 56
2.5 Shorten the Coding Cycle ......................................................................... 58
2.6 Conclusion .................................................................................................. 59
2.7 Exercises ...................................................................................................... 60

Chapter 3: Graphics and Animation ............................................................ 61

3.1 Draw Graphics and Images with the HTML5 canvas Element .......... 64
3.1.1 Draw the Background ................................................................... 66
3.1.2 Draw the Runner ........................................................................... 67
3.1.3 Draw Platforms ............................................................................. 67
3.2 Implement Smooth HTML5 Animations ............................................... 70
3.2.1 The requestAnimationFrame() Method .................................... 71
3.2.2 A requestAnimationFrame() Polyﬁll ......................................... 72
3.3 Implement a Game Loop .......................................................................... 75
3.4 Calculate Frame Rates ............................................................................... 77
3.5 Scroll the Background ............................................................................... 78
3.5.1 Translate the Coordinate System ................................................. 79
3.5.2 Scroll Snail Bait’s Background ..................................................... 81
3.6 Create Time-Based Motion ....................................................................... 85
3.7 Reverse Scroll Direction ............................................................................ 86
3.8 Draw Animation Frames .......................................................................... 86
3.9 Use Parallax to Create the Illusion of Depth .......................................... 87
3.10 Conclusion .................................................................................................. 90
3.11 Exercises ...................................................................................................... 90

Chapter 4: Infrastructure .............................................................................. 93

4.1 Encapsulate Game Functions in a JavaScript Object ............................ 95
4.1.1 Snail Bait’s Constructor ................................................................ 95
4.1.2 Snail Bait’s Prototype .................................................................... 97
4.2 Understand JavaScript’s Persnickety this Reference ......................... 100
4.3 Handle Keyboard Input .......................................................................... 103
4.4 Pause or Resume the Game When the Player Presses the p Key ...... 105
Contents vii

4.5 Freeze the Game to Ensure It Resumes Exactly Where It Left Off ..... 107
4.6 Pause the Game When the Window Loses Focus ................................ 108
4.7 Resume a Paused Game with an Animated Countdown .................. 110
4.7.1 Display Toasts (Brief Messages) to Players .............................. 111
4.7.2 Snail Bait’s Countdown .............................................................. 112
4.8 Conclusion ................................................................................................ 115
4.9 Exercises .................................................................................................... 116

Chapter 5: Loading Screens ...................................................................... 117

5.1 Deﬁne Snail Bait’s Chrome ..................................................................... 120
5.1.1 Accessing Chrome Elements in JavaScript ............................... 122
5.2 Fade Elements In and Out with CSS Transitions ................................. 123
5.2.1 Fade Elements Into View ............................................................ 125
5.2.2 Fade Elements Out of View ........................................................ 127
5.2.3 The snailbait-toast Element’s CSS ....................................... 128
5.2.4 Revealing and Hiding Toasts ..................................................... 129
5.3 Fade Any Element In or Out That Has a CSS Transition Associated
with Its Opacity ........................................................................................ 132
5.4 Implement the Loading Screen .............................................................. 135
5.5 Reveal the Game ...................................................................................... 140
5.6 Conclusion ................................................................................................ 144
5.7 Exercises .................................................................................................... 144

Chapter 6: Sprites ....................................................................................... 147

6.1 Sprite Objects ............................................................................................ 149
6.1.1 Sprite Properties .......................................................................... 152
6.1.2 The Sprite Constructor .............................................................. 153
6.1.3 Sprite Methods ............................................................................. 154
6.2 Incorporate Sprites into a Game Loop .................................................. 156
6.3 Implement Sprite Artists ........................................................................ 160
6.3.1 Stroke and Fill Artists ................................................................. 160
6.3.2 Image Artists ................................................................................ 161
6.3.3 Sprite Sheet Artists ...................................................................... 162
6.3.4 Deﬁne Sprite Sheet Cells ............................................................ 164
6.4 Create and Initialize a Game’s Sprites .................................................. 167
6.5 Deﬁne Sprites with Metadata ................................................................. 171
6.6 Scroll Sprites ............................................................................................. 174
viii Contents

6.7 Conclusion ................................................................................................ 176

6.8 Exercises .................................................................................................... 177

Chapter 7: Sprite Behaviors ....................................................................... 179

7.1 Behavior Fundamentals .......................................................................... 182
7.2 Runner Behaviors .................................................................................... 184
7.3 The Runner’s Run Behavior ................................................................... 187
7.4 Flyweight Behaviors ................................................................................ 190
7.5 Game-Independent Behaviors ............................................................... 193
7.5.1 The Cycle Behavior ...................................................................... 193
7.5.1.1 Sparkling Rubies and Sapphires ................................ 195
7.5.1.2 Flapping Wings and Throbbing Coins ...................... 197
7.6 Combine Behaviors ................................................................................. 199
7.7 Conclusion ................................................................................................ 205
7.8 Exercises .................................................................................................... 206

Chapter 8: Time, Part I: Finite Behaviors and Linear Motion ................... 207
8.1 Implement an Initial Jump Algorithm .................................................. 209
8.2 Shift Responsibility for Jumping to the Runner .................................. 210
8.3 Implement the Jump Behavior ............................................................... 213
8.4 Time Animations with Stopwatches ..................................................... 214
8.5 Reﬁne the Jump Behavior ....................................................................... 217
8.6 Implement Linear Motion ...................................................................... 220
8.6.1 Ascending ..................................................................................... 221
8.6.2 Descending ................................................................................... 223
8.7 Pause Behaviors ....................................................................................... 225
8.8 Conclusion ................................................................................................ 227
8.9 Exercises .................................................................................................... 227

Chapter 9: Time, Part II: Nonlinear Motion ................................................ 229

9.1 Understand Time and Its Derivatives ................................................... 230
9.2 Use Animation Timers and Easing Functions to Implement
Nonlinear Jumping .................................................................................. 231
9.3 Implement Animation Timers ................................................................ 233
9.4 Implement Easing Functions ................................................................. 235
9.5 Fine-tune Easing Functions .................................................................... 239
9.6 Implement a Realistic Bounce Behavior ............................................... 241
9.7 Randomize Behaviors ............................................................................. 245
Contents ix

9.8 Implement Nonlinear Color Changes with Animation Timers and

Easing Functions ...................................................................................... 247
9.8.1 The Pulse Behavior ...................................................................... 249
9.9 Conclusion ................................................................................................ 251
9.10 Exercises .................................................................................................... 251

Chapter 10: Time, Part III: Time Systems ................................................... 253

10.1 Snail Bait’s Time System ......................................................................... 255
10.2 Create and Start the Time System .......................................................... 257
10.3 Incorporate the Time System into Snail Bait ........................................ 258
10.3.1 Use the Time System to Drive the Game’s Animation .......... 258
10.3.2 Implement a Game Method that Uses the Time System to
Modify the Flow of Time ............................................................ 259
10.3.3 Factor the Time Rate into the Frame Rate Calculation ........... 260
10.3.4 Pause and Resume the Game by Using the Time System ...... 261
10.4 Redeﬁne the Current Time for Stopwatches and Animation
Timers ........................................................................................................ 264
10.5 Implement the Time System .................................................................. 268
10.6 Conclusion ................................................................................................ 270
10.7 Exercises .................................................................................................... 270

Chapter 11: Collision Detection ................................................................. 273

11.1 The Collision Detection Process ............................................................. 275
11.2 Collision Detection Techniques ............................................................. 275
11.3 Snail Bait’s Collision Detection .............................................................. 277
11.3.1 Sprite Collision Rectangles ......................................................... 278
11.3.2 The Runner’s Collide Behavior ................................................. 279
11.4 Select Candidates for Collision Detection ............................................ 281
11.5 Detect Collisions Between the Runner and Another Sprite .............. 282
11.6 Process Collisions .................................................................................... 284
11.7 Optimize Collision Detection ................................................................. 286
11.7.1 Reﬁne Bounding Boxes ............................................................... 286
11.7.2 Use Spatial Partitioning .............................................................. 288
11.8 Monitor Collision Detection Performance ........................................... 289
11.9 Implement Collision Detection Edge Cases ......................................... 291
11.10 Conclusion ................................................................................................ 295
11.11 Exercises .................................................................................................... 296
x Contents

Chapter 12: Gravity ..................................................................................... 297

12.1 Equip the Runner for Falling .................................................................. 298
12.2 Incorporate Gravity ................................................................................. 300
12.2.1 The Runner’s Fall Behavior ........................................................ 302
12.2.2 Calculate Initial Falling Velocities ............................................. 306
12.2.3 Pause When the Runner Is Falling ............................................ 308
12.3 Collision Detection, Redux ..................................................................... 308
12.4 Conclusion ................................................................................................ 310
12.5 Exercises .................................................................................................... 311

Chapter 13: Sprite Animations and Special Effects ................................. 313

13.1 Implement Sprite Animations ................................................................ 314
13.2 Create Special Effects .............................................................................. 320
13.2.1 Shake the Game ........................................................................... 321
13.2.2 Transition Between Lives ........................................................... 323
13.3 Choreograph Effects ................................................................................ 329
13.3.1 Explode Bees ................................................................................ 332
13.3.2 Detonate Buttons ......................................................................... 333
13.4 Conclusion ................................................................................................ 335
13.5 Exercises .................................................................................................... 336

Chapter 14: Sound and Music .................................................................... 337

14.1 Create Sound and Music Files ............................................................... 339
14.2 Load Music and Sound Effects .............................................................. 340
14.3 Specify Sound and Music Controls ....................................................... 342
14.4 Play Music ................................................................................................ 343
14.5 Play Music in a Loop ............................................................................... 344
14.6 Play Sound Effects ................................................................................... 347
14.6.1 Create Audio Sprites ................................................................... 350
14.6.2 Deﬁne Sound Objects .................................................................. 351
14.6.3 Implement Multichannel Sound ............................................... 353
14.6.3.1 Create Audio Channels ............................................... 355
14.6.3.2 Coordinate with Sprite Sheet Loading to Start the
Game .............................................................................. 357
14.6.3.3 Play Sounds ................................................................... 358
14.7 Turn Sound On and Off .......................................................................... 361
Contents xi

14.8 Conclusion ................................................................................................ 362

14.9 Exercises .................................................................................................... 362

Chapter 15: Mobile Devices ........................................................................ 363

15.1 Run Snail Bait on Mobile Devices .......................................................... 366
15.2 Detect Mobile Devices ............................................................................. 368
15.3 Scale Games to Fit Mobile Devices ........................................................ 369
15.3.1 The viewport Meta Tag ............................................................... 371
15.3.2 Programmatically Resize Games to Fit Mobile Device
Screens .......................................................................................... 376
15.4 Change Instructions Underneath the Game’s Canvas ........................ 381
15.5 Change the Welcome Screen .................................................................. 383
15.5.1 Implement the Welcome Toast ................................................... 384
15.5.1.1 Modify the Game’s Start Sequence ............................ 385
15.5.1.2 Add HTML for the Mobile Welcome Toast .............. 386
15.5.1.3 Deﬁne CSS for the Mobile Toasts ............................... 387
15.5.1.4 Implement Event Handlers for the Mobile Welcome
Toast’s Links .................................................................. 388
15.5.2 Draw Mobile Instructions .......................................................... 389
15.5.3 Implement the Mobile Start Toast ............................................. 394
15.5.3.1 Implement the Start Link’s Event Handler .............. 395
15.5.4 Reveal the Mobile Start Toast ..................................................... 396
15.6 Incorporate Touch Events ....................................................................... 396
15.7 Work Around Sound Idiosyncrasies on Mobile Devices ................... 400
15.8 Add an Icon to the Home Screen and Run Without Browser
Chrome ...................................................................................................... 402
15.9 Conclusion ................................................................................................ 403
15.10 Exercises .................................................................................................... 404

Chapter 16: Particle Systems ..................................................................... 405

16.1 Smoking Holes ......................................................................................... 406
16.2 Use Smoking Holes ................................................................................. 411
16.2.1 Deﬁne Smoking Hole Data ......................................................... 411
16.2.2 Create Smoking Holes ................................................................ 412
16.2.3 Add Smoking Holes to Snail Bait’s sprites Array ................ 413
16.2.4 Scroll Smoking Holes Every Animation Frame ...................... 413
16.3 Implement Smoking Holes ..................................................................... 414
xii Contents

16.3.1 Disguise Smoking Holes as Sprites .......................................... 415

16.3.2 Incorporate Fire Particles ............................................................ 417
16.3.2.1 Create Fire Particles ...................................................... 418
16.3.2.2 Draw and Update Fire Particles Every
Animation Frame ......................................................... 421
16.3.3 Incorporate Smoke Bubbles ....................................................... 422
16.3.3.1 Create Smoke Bubbles ................................................. 424
16.3.3.2 Draw and Update Smoke Bubbles Every Animation
Frame ............................................................................. 428
16.3.3.3 Emit Smoke Bubbles .................................................... 430
16.3.3.4 Dissipate Smoke Bubbles ............................................ 432
16.4 Pause Smoking Holes .............................................................................. 434
16.5 Conclusion ................................................................................................ 435
16.6 Exercises .................................................................................................... 436

Chapter 17: User Interface .......................................................................... 437

17.1 Keep Score ................................................................................................ 438
17.2 Add a Lives Indicator ............................................................................. 442
17.3 Display Credits ........................................................................................ 448
17.4 Tweet Player Scores ................................................................................. 455
17.5 Warn Players When the Game Runs Slowly ........................................ 458
17.5.1 Monitor Frame Rate .................................................................... 464
17.5.2 Implement the Running Slowly Warning Event Handlers .... 466
17.6 Implement a Winning Animation ......................................................... 467
17.7 Conclusion ................................................................................................ 472
17.8 Exercises .................................................................................................... 472

Chapter 18: Developer Backdoor ............................................................... 475

18.1 Snail Bait’s Developer Backdoor ............................................................ 477
18.2 The Developer Backdoor’s HTML and CSS ......................................... 479
18.3 Reveal and Hide the Developer Backdoor ........................................... 481
18.4 Update the Developer Backdoor’s Elements ....................................... 483
18.5 Implement the Developer Backdoor’s Checkboxes ............................ 484
18.5.1 Show and Hide Collision Rectangles ....................................... 487
18.5.2 Enable and Disable the Running Slowly Warning .................. 489
18.5.3 Show and Hide Smoking Holes ................................................ 490
18.5.4 Update Backdoor Checkboxes ................................................... 491
Contents xiii

18.6 Incorporate the Developer Backdoor Sliders ....................................... 492

18.6.1 Specify the HTML and CSS for the Backdoor’s Sliders ......... 494
18.6.2 Access Slider Readouts in Snail Bait’s JavaScript .................... 496
18.6.3 Create and Initialize the Backdoor’s Sliders ........................... 497
18.6.4 Wire the Running Slowly Slider to the Game ......................... 498
18.6.5 Wire the Time Rate Slider to the Game .................................... 498
18.6.6 Wire the Game to the Time Rate Slider .................................... 499
18.6.7 Update Sliders Before Revealing the Backdoor ...................... 500
18.7 Implement the Backdoor’s Ruler ........................................................... 502
18.7.1 Create and Access the Ruler Canvas ......................................... 503
18.7.2 Fade the Ruler .............................................................................. 504
18.7.3 Draw the Ruler ............................................................................ 505
18.7.4 Update the Ruler ......................................................................... 507
18.7.5 Drag the Canvas ........................................................................... 507
18.8 Conclusion ................................................................................................ 513
18.9 Exercises .................................................................................................... 513

Chapter 19: On the Server: In-game Metrics, High Scores, and

Deployment ................................................................................................. 515
19.1 Node.js and socket.io ............................................................................... 517
19.2 Include socket.io JavaScript in Snail Bait .............................................. 518
19.3 Create a Simple Server ............................................................................ 520
19.4 Create a Socket on the Server ................................................................. 520
19.5 Start the Server ......................................................................................... 521
19.6 Create a Socket on the Client and Connect to the Server ................... 522
19.7 Record In-game Metrics .......................................................................... 523
19.8 Manage High Scores ................................................................................ 526
19.8.1 The High Scores User Interface ................................................. 527
19.8.2 Retrieve High Scores from the Server ...................................... 530
19.8.3 Display High Scores on the Client ............................................ 533
19.8.4 Monitor Name Input ................................................................... 534
19.8.5 Validate and Set the High Score on the Server ........................ 536
19.8.6 Redisplay High Scores ................................................................ 538
19.8.7 Start a New Game ....................................................................... 539
19.9 Deploy Snail Bait ...................................................................................... 540
19.10 Upload Files to a Server .......................................................................... 542
xiv Contents

19.11 Conclusion ................................................................................................ 543

19.12 Exercises .................................................................................................... 544

Chapter 20: Epilogue: Bodega’s Revenge ................................................ 545

20.1 Design the User Interface ....................................................................... 547
20.2 Create the Sprite Sheet ............................................................................ 551
20.3 Instantiate the Game ................................................................................ 552
20.4 Implement Sprites ................................................................................... 553
20.4.1 The Turret ..................................................................................... 553
20.4.1.1 Create the Turret Sprite’s Artist ................................. 554
20.4.1.2 Draw the Turret ............................................................ 555
20.4.2 Bullets ............................................................................................ 556
20.4.3 Birds .............................................................................................. 560
20.5 Implement Sprite Behaviors ................................................................... 563
20.5.1 Turret Behaviors .......................................................................... 564
20.5.1.1 The Turret’s Rotate Behavior ...................................... 564
20.5.1.2 The Turret’s Barrel Fire Behavior ............................... 566
20.5.1.3 The Turret’s Shoot Behavior ....................................... 569
20.5.2 Bullet Behaviors ........................................................................... 571
20.5.3 Bird Behaviors .............................................................................. 574
20.5.3.1 The Bird Move Behavior .............................................. 575
20.5.3.2 The Bird Collide Behavior ........................................... 577
20.5.3.3 The Bird Explosion Behavior ...................................... 579
20.6 Draw the Bullet Canvas .......................................................................... 580
20.7 Implement Touch-Based Controls for Mobile Devices ....................... 582
20.8 Conclusion ................................................................................................ 585
20.9 Exercises .................................................................................................... 585
Glossary ........................................................................................................ 587

Index ............................................................................................................. 595

Preface
This book is for experienced JavaScript developers who want to implement
2D games with HTML5. In this book, I chronicle the development of a sophisti-
cated side-scroller platform video game, named Snail Bait, from scratch. I do not
use any third-party graphics or game frameworks, so that you can learn to imple-
ment everything from smooth animations and exploding sprites to developer
backdoors and in-game metrics, entirely on your own. If you do use a game
framework, this book provides valuable insights into how they work.
Because it’s meant for instructional purposes, Snail Bait has only a single level,
but in all other respects it’s a full-fledged, arcade-style game. Snail Bait simulta-
neously manipulates dozens of animated objects, known as sprites, on top of a
scrolling background and simultaneously plays multiple sound effects layered
over the game’s soundtrack. The sprites run, jump, fly, sparkle, bounce, pace,
explode, collide, shoot, land on platforms, and fall through the bottom of the game.
Snail Bait also implements many other features, such as a time system that can
slow the game’s overall time or speed it up; an animated loading screen; special
effects, such as shaking the game when the main character loses a life; and particle
systems that simulate smoke and fire. Snail Bait pauses the game when the game’s
window loses focus; and when the window regains focus, Snail Bait resumes with
an animated countdown to give the user time to regain the controls.
Although it doesn’t use game or graphics frameworks, Snail Bait uses Node.js
and socket.io to send in-game metrics to a server, and to store and retrieve high
scores, which the game displays with a heads-up display. Snail Bait shows a
warning when the game runs too slowly, and if you type CTRL-d as the game
runs, Snail Bait reveals a developer backdoor that gives you special powers, such
as modifying the flow of time or displaying sprite collision rectangles, among
other things.
Snail Bait detects when it runs on a mobile device and reconfigures itself by in-
stalling touch event handlers and resizing the game to fit snugly on the mobile
device’s screen.
In this book I show you how to implement all of Snail Bait’s features step by step,
so that you can implement similar features in your own games.

xv
xvi Preface

A Brief History of This Book

In 2010, I downloaded the graphics and sound from a popular open source An-
droid game named Replica Island, and used them to implement a primitive version
of Snail Bait on Android.
At that time, I became interested in HTML5 Canvas and I started working on my
previous book, Core HTML5 Canvas. As I wrote the Canvas book, I continued to
work on Snail Bait, converting it from Android’s Java to the browser’s JavaScript
and the HTML5 canvas element. By the time that book was finished in 2012, I
had a still primitive, but close to feature-complete, version of the game.
Later in 2012, I started writing a 10-article series for IBM developerWorks on
game programming, based on Snail Bait. Over the course of the next ten months,
I continued to work on the game as I wrote the articles. (See “Online Resources”
below for a link to those articles.)
By summer 2013, Snail Bait had matured a great deal, so I put together a presen-
tation covering Snail Bait’s development and traveled to Sebastopol, California
to shoot a 15-hour O’Reilly video titled “HTML5 2D Game Development.” In
some respects that video is the film version of this book. Although the video
wasn’t released until September, it was one of the top 10 bestselling O’Reilly
videos for 2013. (The “Online Resources” below has a link to that video.)
When I returned home from Sebastopol in July 2013, I started writing this book
full time. I started with the ten articles from the IBM developerWorks series,
rewrote them as book chapters, and ultimately added ten more chapters. As I
was writing, I constantly iterated over Snail Bait’s code to make it as readable as
possible.
In December 2013, with Chapters 1–19 written, I decided to add a final chapter
on using the techniques in the book to implement a simpler video game. That
game is Bodega’s Revenge, and it’s the subject of Chapter 20.

How to Use This Book

This book’s premise is simple: It shows you how to implement a sophisticated
video game so that you can implement one of your own.
There are several ways you can use this book. First, I’ve gone to great lengths to
make it as skim-friendly as possible. The book contains lots of screenshots, code
listings, and diagrams.
Preface xvii

I make liberal use of Notes, Tips, Cautions, and Best Practices. Encapsulating
those topics in callouts streamlines the book’s main discussion, and since each
Note, Tip, Caution, and Best Practice has a title (excluding callouts with a single
line), you can decide at a glance whether those ancillary topics are pertinent to
your situation. In general, the book’s main discussion shows you how things
work, whereas the callouts delve into why things work as they do. If you’re in a
hurry, you can quickly get to the bottom of how things work by sticking to the
main discussion, skimming the callouts to make sure you’re not missing anything
important.
Chapters 1–19 of the book chronicle the development of Snail Bait, starting with
a version of the game that simply displays graphics and ending with a full-featured
HTML5 video game. Chapter 20 is the Epilogue, which uses much of what the
book covered in the previous 19 chapters to implement a second video game.
If you plan to read the book, as opposed to using it solely as reference, you will
most likely want to start reading at either Chapter 1 or Chapter 20. If you start at
the beginning, Chapter 20 will be a recap and review of what you learned previ-
ously, in addition to providing new insights such as using polar coordinates and
rotating coordinate systems.
If you start reading at Chapter 20, perhaps even just skimming the chapter, you
can get an idea for what lies behind in the previous 19 chapters. If you start at
Chapter 20, don’t expect to understand a lot of what you read in that chapter the
ﬁrst time around.
I assume that many readers will want to use this book as a reference, so I’ve in-
cluded references to section headings at the start of each chapter, in addition to
a short discussion at the beginning of each chapter about what the chapter
entails. That will help you locate topics. I’ve also included many step-by-step in-
structions on how to implement features so that you can follow those steps to
implement similar features of your own.

The Book’s Exercises

Passively reading a book won’t turn anyone into a game programmer. You’ve
got to get down in the trenches and sling some code to really learn how to imple-
ment games. To that end, each chapter in this book concludes with a set of
exercises.
To perform the exercises, download the ﬁnal version of Snail Bait and modify
that code. In some cases, the exercises will instruct you to modify code for a
xviii Preface

chapter-speciﬁc version of the game. See the next section for more information
about chapter-speciﬁc versions of Snail Bait.

Source Code and Chapter-speciﬁc Versions of Snail Bait

This book comes with the source to two video games. See “Online Resources”
below for URLs to the games and their source code.
You will undoubtedly find it beneficial to refer to Snail Bait’s source code as you
read this book. You will find it more beneficial, however, to refer to the version
of the game that corresponds to the chapter you are reading. For example, in the
first chapter we implement a nascent version of Snail Bait that simply draws the
background and the game’s main character. That version of the game bears little
resemblance to the final version, so referring to the final version of the game is
of little use at that point. Instead, you can access the version of Snail Bait corre-
sponding to the end of Chapter 1 at corehtml5games.com/book/code/ch01.
URLs for each of the book’s chapters follow the format corehtml5games.com/book/
code/ch??, where ?? represents two digits corresponding to chapter numbers
from 01 to 20, excluding Chapter 2.
As mentioned above, exercises at the end of each chapter correspond to the final
version of Snail Bait, unless otherwise stated.

Prerequisites
No one would think of taking a creative writing class in a language they couldn’t
speak or write. Likewise, you must know JavaScript to implement sophisticated
games with HTML5. JavaScript is a nonnegotiable prerequisite for this book.
Nearly all the code listings in this book are JavaScript, but you still need to know
your way around HTML and CSS. You should also be familiar with computer
graphics and have a good grasp of basic mathematics.

Your Game
Finally, let’s talk about why we’re here. I assume you’re reading this book because
you want to implement a game of your own.
The chapters of this book discuss individual aspects of game programming, such
as implementing sprites or detecting collisions. Although they pertain to Snail
Bait, you will be able to easily translate those aspects to your own game.
Preface xix

The order of the chapters, however, is also signiﬁcant because it shows you how
to implement a game from start to ﬁnish. In the beginning of the book, we gather
raw materials, set up our development environment, and then start development
by drawing the game’s basic graphics. Subsequent chapters add animation, sprites,
sprite behaviors, and so on. If you’re starting a game from scratch, you may want
to follow that same outline, so you can alternate between reading about features
and implementing them on your own.
Before you get started coding in earnest, you should take the time to set up your
development environment and become as familiar as you can with the browser’s
developer tools. You should also make sure you shorten your development cycle
as discussed at the end of Chapter 2. The time you initially spend preparing will
make you more productive later on.
Finally, thank you for buying this book. I can’t wait to see the games you create!

David Geary
Fort Collins, Colorado
2014

Online Resources
Core HTML5 2D Game Programming’s companion website: corehtml5games.com
Play Snail Bait: corehtml5games.com/snailbait
Play Bodega’s Revenge: corehtml5games.com/bodegas-revenge
Download Snail Bait: corehtml5games.com/book/downloads/snailbait
Download Bodega’s Revenge: corehtml5games.com/book/downloads/
bodegas-revenge
David’s “HTML5 2D Game Development” video from O’Reilly: shop.oreilly.
com/product/0636920030737.do.
David’s “HTML5 2D Game Development” series on IBM developerWorks:
www.ibm.com/developerworks/java/library/j-html5-game1/index.html
A video of David speaking about HTML5 game programming at the Atlanta
HTML5 Users Group in 2013: youtube.com/watch?v=S256vAqGY6c
Core HTML5 Canvas at http://amzn.to/1jfuf0C. Take a deep dive into Canvas
with David’s book.
This page intentionally left blank
Acknowledgments
I am fortunate to have a great editor—the only editor I’ve had in nearly twenty
years of writing books—who is always receptive to my ideas for my next book
and who guides my books from conception to completion. This book was no
different. Greg Doench helped shepherd this book through the process from an
idea to a ﬁnished book.
I’m also fortunate to have a wonderful copyeditor, Mary Lou Nohr. She has
copyedited every one of my previous books, and she graciously agreed to smooth
out my rough edges once again.
This is the second book that I’ve done with Alina Kirsanova, who’s a wizardess
at taking my PDFs and making them look super. Once again, Julie Nahil oversaw
the production of the book and kept everything on track as we headed to the
printer.
For every book I write, I select reviewers who I think will make the book much
better than I ever could have alone. For this book, I had four excellent reviewers:
Jim O’Hara, Timothy Harrington, Simon Sarris, and Willam Malone. Gintas
Sanders also gave me permission to use his coins in Snail Bait and gave me some
great critiques of the game.
When I shot the “HTML5 2D Game Development” video for O’Reilly, I taught a
class in front of a live audience. One of the audience members asked great ques-
tions and came up with several insights. Jim O’Hara was one of my most consci-
entious reviewers and, as he did in class, provided lots of great questions and
insights.
My editor, Greg Doench, put me in touch with Tim Harrington, who is a Senior
Academic Applications Analyst at Devry University with a background in game
development. Like Jim, Tim came up with lots of insights that made me rethink
how I presented material.
I wanted to ﬁnd a graphics expert for this book who knew a lot about game pro-
gramming, and I found one. Simon Sarris, who, much to my delight, is not only
both of those things, but is also an excellent writer. He made this book better in
several different ways.

xxi
xxii Acknowledgments

Finally, I was fortunate to have William Malone review this book. William is a
professional game developer who’s implemented games for Sesame Street (see
Cookie Kart Racing at http://bit.ly/1nlSY3N). William made a tremendous dif-
ference in this book by pointing out many subtleties that would’ve escaped me,
especially concerning mobile devices.
About the Author
David is the author of Core HTML5 Canvas and coauthor of Core JavaServer
Faces. David has written several other bestselling books on client- and
server-side Java, including one of the bestselling Java books of all time,
Graphic Java.

xxiii
This page intentionally left blank
CHAPTER 1
Introduction
Topics in This Chapter
• 1.1 Snail Bait — p. 3
• 1.2 HTML5 Game Development Best Practices — p. 10
• 1.3 Special Features — p. 16
• 1.4 Snail Bait’s HTML and CSS — p. 18
• 1.5 Snail Bait’s Humble Beginning — p. 25
• 1.6 The Use of JavaScript in This Book — p. 28
• 1.7 Conclusion — p. 31
• 1.8 Exercises — p. 31

The great thing about software development is that you can make nearly anything
you can imagine come to life on screen. Unencumbered by physical constraints
that hamper engineers in other disciplines, software developers have long used
graphics APIs and UI toolkits to implement creative and compelling applications.
Arguably, the most creative genre of software development is game programming;
few endeavors are more rewarding from a creative standpoint than making the
vision you have for a game become a reality.
The great thing about game programming is that it’s never been more accessible.
With the advent of open source graphics, sound, and music, you no longer need
to be an artist and a musician to implement games. And the development envi-
ronments built into modern browsers are not only free, they contain all the
tools you need to create the most sophisticated games. You need only supply

1
2 Chapter 1 Introduction

programming prowess, a good understanding of basic math (mostly trigonometry),

and a little physics.
In this book we implement two full-ﬂedged HTML5 video games so that you
can learn how to create one of your own. Here are some of the things you will
learn to do:

• Use the browser’s development tools to implement sophisticated games

• Create smooth, flicker-free animations
• Scroll backgrounds and use parallax to create a 3D effect
• Implement graphical objects, known as sprites, that you can draw and
manipulate in a canvas
• Detect collisions between sprites
• Animate sprites to make them explode
• Implement a time system that controls the rate at which time flows through
your game
• Use nonlinear motion to create realistic jumping
• Simulate gravity
• Pause and freeze your game
• Warn players when your game runs slowly
• Display scoreboards, controls, and high scores
• Create a developer’s backdoor with special features
• Implement particle systems to simulate natural phenomenon, such as smoke
and fire
• Store high scores and in-game metrics on a server with Node.js and socket.io
• Configure games to run on mobile devices

NOTE: HTML5 technologies used in Snail Bait

This book discusses the implementation of an HTML5 video game, named Snail
Bait, using the following HTML5 APIs, the most predominant of which is the
Canvas 2D API:

• Canvas 2D API
• Timing Control for Script-based Animations
• Audio
• CSS3 Transitions
1.1 Snail Bait 3

In this book we develop Snail Bait entirely from scratch, without any third-party
game frameworks, so you can learn how to implement all the common aspects
of a video game from the ground up. That knowledge will be invaluable whether
you implement a game by using a framework or not.

The book’s epilogue discusses the implementation of a second video game—

Bodega’s Revenge—that shows how to combine the concepts discussed in the
book to implement a simpler video game.

NOTE: Play Snail Bait and Bodega’s Revenge online

To get the most out of this book, you should play Snail Bait and Bodega’s
Revenge so you’re familiar with the games. You can play Snail Bait online
at corehtml5games.com/snailbait, and you can ﬁnd Bodega’s Revenge at
corehtml5games.com/bodegas-revenge.

NOTE: Particle systems

A particle system uses many small particles that combine to simulate natural
phenomena that do not have well-deﬁned boundaries and edges. Snail Bait
implements a particle system to simulate smoke, as you can see in Figure 1.1.
We discuss particle systems in detail in Chapter 16.

1.1 Snail Bait

Snail Bait is a classic platform game. The game’s main character, known as the
runner, runs along and jumps between ﬂoating platforms that move horizontally.
The runner’s ultimate goal is to land on a gold button that paces back and forth
on top of a pulsating platform at the end of the game. That button is guarded by
two bees and a bomb-shooting snail. The runner, pulsating platform, gold button,
bees, bomb, and snail are all shown in Figure 1.1.
The player controls the game with the keyboard:

• d or ← turns the runner to the left and scrolls the background from left to
right.
• k or → turns the runner to the right and scrolls the background from right
to left.
• j makes the runner jump.
• p pauses the game.
4 Chapter 1 Introduction

Figure 1.1 Snail Bait

When the game begins, the player has three lives. Icons representing the number
of remaining lives are displayed above and to the left of the game’s canvas, as
you can see in Figure 1.1. In the runner’s quest to make it to the end of the level,
she must avoid bad guys—bees and bats—while trying to capture valuable items
such as coins, rubies, and sapphires. If the runner collides with bad guys,
she blows up, the player loses a life, and the runner goes back to the beginning
of the level. When she collides with valuable items, the valuable item disappears,
the score increases, and the game plays a pleasant sound effect.
The snail periodically shoots snail bombs (the gray ball shown near the center of
Figure 1.1). The bombs, like bees and bats, blow up the runner when they hit her.
The game ends in one of two ways: the player loses all three lives, or the player
lands on the gold button. If the player lands on the gold button, the player wins
the game and Snail Bait shows the animation depicted in Figure 1.2.
Snail Bait maintains high scores on a server. If the player beats the existing high
score, Snail Bait lets the player enter their name with a heads-up display (HUD),
as shown in Figure 1.3.
1.1 Snail Bait 5

Figure 1.2 Snail Bait’s winning animation

Figure 1.3 Snail Bait’s high scores

6 Chapter 1 Introduction

If the player doesn’t win the game or beat the existing high score, Snail Bait
displays game credits, as shown in Figure 1.4.

Figure 1.4 Snail Bait’s credits

With the exception of the runner, everything in Snail Bait scrolls continuously in
the horizontal direction. That scrolling further categorizes Snail Bait as a side-
scroller platform game. However, that’s not the only motion in the game, which
leads us to sprites and their behaviors.

NOTE: Platform video games

Donkey Kong, Mario Bros., Sonic the Hedgehog, and Braid are all well-known,
best-selling games where players navigate 2D platforms, a genre known as
platformers. At one time, platformers represented up to one-third of all video
game sales.Today, their market share is drastically lower, but there are still many
successful platform games.
1.1 Snail Bait 7

CAUTION: Snail Bait performance

Hardware acceleration for Canvas makes a huge difference in performance and
has been implemented by most browsers since the middle of 2012. Should you
run Snail Bait in a browser that does not have hardware-accelerated Canvas,
performance will be terrible and the game probably won’t work correctly. When
you play the game, make sure your browser has hardware-accelerated Canvas.
Here is a list of browser versions that have hardware-accelerated Canvas:

• Chrome 13
• Firefox 4
• Internet Explorer 9
• Opera 11
• Safari 5

WASD?
By convention, computer games often use the w, a, s, and d keys to control play.
That convention evolved primarily because it lets right-handed players use the mouse
and keyboard simultaneously. It also leaves the right hand free to press the spacebar
or modiﬁer keys such as CTRL or ALT. Snail Bait doesn’t use WASD because it
doesn’t receive input from the mouse or modiﬁer keys. But you can easily modify
the game’s code to use any combination of keys.

1.1.1 Sprites: The Cast of Characters

With the exception of the background, everything in Snail Bait is a sprite. A sprite
is a visual representation of an object in a game that you draw on the game’s
canvas. Sprites are not a part of the HTML5 Canvas API, but they are simple to
implement. Following are the game’s sprites:

• Platforms (inanimate objects)

• Runner (main character)
• Buttons (good)
• Coins (good)
8 Chapter 1 Introduction

• Rubies and sapphires (good)

• Bees and bats (bad)
• Snail (bad)
• Snail bombs (bad)
Besides scrolling horizontally, nearly all the game’s sprites move independently
of one another. For example, rubies and sapphires bounce up and down at varying
rates of speed, and the buttons and the snail pace back and forth along the length
of the platform on which they reside.
That independent motion is one of many sprite behaviors. Sprites can have other
behaviors that have nothing to do with motion; for example, besides bouncing
up and down, the rubies and sapphires sparkle.
Each sprite has an array of behaviors. A behavior is just a JavaScript object with
an execute() method. Every animation frame, the game iterates over all its visible
sprites and, for each sprite, iterates over the sprite’s behaviors, invoking each
behavior’s execute() method and passing the method a reference to the sprite
in question. In that method, behaviors manipulate their associated sprite according
to game conditions. For example, when you press j to make the runner jump, the
runner’s jump behavior subsequently moves the runner through the jump
sequence, one animation frame at a time.
Table 1.1 lists the game’s sprites and their respective behaviors.

Table 1.1 Snail Bait sprites

Sprites Behaviors
Platforms Pulsate (only one platform)
Runner Run; jump; fall; collide with other sprites; explode
Bees and bats Explode; ﬂap their wings
Buttons Pace; collapse; make bad guys explode
Coins, rubies, and sapphires Sparkle; bounce up and down
Snail Pace; shoot bombs
Snail bombs Move from right to left; collide with runner

Behaviors are simple JavaScript objects, as illustrated by Example 1.1, which

shows how Snail Bait instantiates the runner sprite.
1.1 Snail Bait 9

Example 1.1 Creating sprites

runBehavior = { // Just a JavaScript object with an execute method

execute: function (sprite, // Sprite associated with the behavior

now, // The current game time
fps, // The current frame rate
context, // The context for the game's canvas
lastAnimationFrameTime) { // Time of last frame

// Update the sprite's attributes, based on the current time

// (now), frame rate (fps), and the time at which Snail Bait
// drew the last animation frame (lastAnimationFrameTime),
// to make it look like the runner is running.

// The canvas context is provided as a convenience for things

// like hit detection, but it should not be used for drawing
// because that's the responsibility of the sprite's artist.

// Method implementation omitted. See Section 7.3 on p. 187

// for a discussion of this behavior.
}

};

var runner = new Sprite('runner', // name

runnerArtist, // artist
[ runBehavior, ... ]); // behaviors

Snail Bait deﬁnes a runBehavior object, which it passes—in an array with other
behaviors—to the runner sprite’s constructor, along with the sprite’s type (runner)
and its artist (runnerArtist). For every animation frame in which the runner is
visible, the game invokes the runBehavior object’s execute() method. That
execute() method makes it appear as though the runner is running by advancing
through the set of images that depict the runner in various run poses.

NOTE: Replica Island

The idea for sprite behaviors, which are an example of the Strategy design
pattern, comes from Replica Island, a popular open source (Apache 2 license)
Android platform game. Additionally, most of Snail Bait’s graphics are from
Replica Island. You can ﬁnd out more about Replica Island at replicaisland.net,
and you can read about the Strategy design pattern at http://en.wikipedia.org/
wiki/Strategy_design_pattern.
10 Chapter 1 Introduction

NOTE: Sprite artists

Besides encapsulating behaviors in separate objects—which makes it easy to
add and remove behaviors at runtime—sprites also delegate how they are drawn
to another JavaScript object, known as a sprite artist. That makes it possible to
plug in a different artist at runtime.

NOTE: Freely available resources

Most game developers need help with graphics, sound effects, and music.
Fortunately, an abundance of assets are freely available under various licensing
arrangements. Snail Bait uses the following:

• Graphics and sound effects from Replica Island

• Soundtrack from soundclick.com
• Coins from LoversHorizon at deviantART

See Chapter 2 for more information on obtaining game resources and setting
up a development environment.

1.2 HTML5 Game Development Best Practices

We discuss game development best practices throughout this book, starting here
with seven that are speciﬁc to HTML5.

1. Pause the game when the window loses focus.

2. Implement a countdown when the window regains focus.
3. Use CSS for user interface (UI) effects.
4. Detect and react to slowly running games.
5. Incorporate social features.
6. Put all the game’s images in a single sprite sheet.
7. Store high scores and realtime in-game metrics on a server.
We examine the preceding best practices in detail later in the book; for now, a
quick look at each of them introduces more of Snail Bait’s features.

1.2.1 Pause the Game When the Window Loses Focus

If an HTML5 game is running in a browser and you change focus to another tab
or browser window, most browsers severely clamp the frame rate at which the
1.2 HTML5 Game Development Best Practices 11

game’s animation runs so as to save resources such as CPU and battery power;
after all, why waste resources on a window or tab that’s not visible?
Frame-rate clamping wreaks havoc with most collision detection algorithms be-
cause those algorithms check for collisions every time the game draws an anima-
tion frame; if it takes too long between animation frames, sprites can move past
one another without detection. To avoid collision detection meltdowns resulting
from frame-rate clamping, you must automatically pause the game when the window
loses focus.
When Snail Bait pauses the game, it displays a toast to let the player know the
game is paused, as shown in Figure 1.5.

Figure 1.5 Snail Bait paused

NOTE: Pausing is more than stopping the game

When a paused game resumes, everything must be in exactly the same state
as it was when the game was paused; for example, in Figure 1.5, when play
resumes, the runner must continue her jump from exactly where she was when
the game was paused.

In addition to pausing and unpausing the game, therefore, you must also freeze
and thaw the game to ensure a smooth transition when the game resumes. We
discuss pausing and freezing the game in more detail in Chapter 4.
12 Chapter 1 Introduction

NOTE: Toasts
A toast—as in raising a glass to one’s health—is information that a game displays
to a player for a short time. A toast can be simple text, as in Figure 1.5, or it can
represent a more traditional dialog box, as in Figure 1.8 on p. 14.

1.2.2 Implement a Countdown When the Window Regains Focus

When your window regains focus, you should give the player a few seconds to
prepare for the game to restart. Snail Bait uses a three-second countdown when
the window regains focus, as shown in Figure 1.6.

Figure 1.6 Snail Bait’s countdown after the window regains focus

1.2.3 Use CSS for UI Effects

Figure 1.7 shows a screenshot taken a short time after the game loads.
Note especially two things about Figure 1.7. First, a toast containing simple
instructions is visible. That toast fades in when the game loads, and after ﬁve
seconds, it fades out.
Second, when the game starts, the checkboxes (for sound and music) and instruc-
tions (telling which keystrokes perform which functions) below the game’s canvas
1.2 HTML5 Game Development Best Practices 13

Figure 1.7 Snail Bait’s toasts

are fully opaque, whereas the lives indicators and scoreboard at the top of the
game are partially transparent, as shown in Figure 1.7. As the game’s instructions
toast fades, that transparency reverses; the lives indicator and scoreboard become
fully opaque, while the checkboxes and instructions become nearly transparent,
as they are in Figure 1.6.
Snail Bait dims elements and fades toasts with CSS3 transitions.

NOTE: Focus on what’s currently important

When Snail Bait starts, the instructions below the game’s canvas are fully
opaque, whereas the lives indicator and score above the game’s canvas are
partially transparent. Shortly thereafter, they switch opacities; the elements above
the canvas become fully opaque and the elements below become partially
transparent.

Snail Bait goes to all that trouble to focus attention on what’s currently important.
Initially, players should pay attention to the instructions below the game’s canvas;
once the game is underway, players will be more focused on their score and how
many lives are remaining.
14 Chapter 1 Introduction

1.2.4 Detect and React to Slowly Running Games

Unlike console games, which run in a tightly controlled environment, HTML5
games run in a highly variable, unpredictable, and chaotic one. Players can do
things directly that signiﬁcantly affect system performance, for example, running
YouTube videos in another browser tab or window. Other performance killers,
such as system backup software running in the background unbeknown to game
players, can easily make an HTML5 game run so slowly that it becomes
unplayable. And there’s always the possibility that your players will use a browser
that can’t keep up.
As an HTML5 game developer, you must monitor frame rate and react when it
dips below an unplayable threshold. When Snail Bait detects that an average of
the last 10 frame rates falls below 40 frames per second (fps), it displays the
running slowly toast shown in Figure 1.8.

Figure 1.8 Snail Bait’s running slowly toast

1.2.5 Incorporate Social Features

Many modern games incorporate social aspects, such as posting scores on Twitter
or Facebook. When a Snail Bait player clicks on the Tweet my score link that ap-
pears at the end of the game (see Figure 1.4 on p. 6), Snail Bait creates a tweet
announcing the score in a separate browser tab, as shown in Figure 1.9.
1.2 HTML5 Game Development Best Practices 15

Figure 1.9 Snail Bait’s Twitter integration

1.2.6 Put All the Game’s Images in a Single Sprite Sheet

You can do several things to make your HTML5 game (or any HTML5 application)
load more quickly, but the single most effective thing is to decrease the number
of HTTP requests you make to the server. One way to do that is to put all your
game’s images in a single image, known as a sprite sheet. Figure 1.10 shows Snail
Bait’s sprite sheet.

Figure 1.10 Snail Bait’s sprite sheet (the gray background is transparent)
16 Chapter 1 Introduction

When Snail Bait draws the game’s sprites, it copies rectangles from the sprite
sheet into the canvas.

NOTE: Sprite sheets on mobile devices

Some mobile devices place limits on the size of image ﬁles, so if your sprite
sheet is too large, you may have to split it into multiple ﬁles. Your game will load
more slowly as a result, but that’s better than not loading at all.

1.2.7 Store High Scores and Send Realtime, In-game Metrics to the Server
Most games interact with a server for a variety of reasons. Snail Bait stores high
scores on a server in addition to sending game metrics during gameplay. Snail
Bait does not use any third-party graphics frameworks; however, it does use two
JavaScript frameworks—Node.js and socket.io—to communicate between the
player’s computer and a server. See Chapter 19 for more details.

1.3 Special Features

Snail Bait has three noteworthy features that add polish to the game and make
playtesting more productive:

• Developer backdoor
• Time system
• Particle systems
Snail Bait reveals the developer backdoor, shown in Figure 1.11, when you press
CTRL-d. With the backdoor visible, you can control the rate at which time ﬂows
through the game, making it easy to run the game in slow motion to see how
game events such as collision detection take place. Conversely, you can run
the game faster than normal to determine the best pace for the game.
You can turn collision rectangles on for a better look at exactly how collisions
occur; if the smoking holes obscure your view, you can turn the smoke off by
deselecting the Smoke checkbox. You can also ﬁne-tune the threshold at which
Snail Bait displays the game’s running slowly warning, shown in Figure 1.8, or
you can turn it off entirely, which lets you playtest slow frame rates without Snail
Bait intervening at all.
When you playtest a particular section of the game, you can avoid playing through
the preceding sections every time you test: In addition to the controls at the top
of the game’s canvas, the developer backdoor displays a ruler at the bottom of
the canvas that shows how far the background has scrolled horizontally in pixels.
1.3 Special Features 17

Figure 1.11 Snail Bait’s developer backdoor

You use those values to restart the game at a particular horizontal location,
thereby avoiding the preceding sections of the game. For convenience, when the
developer backdoor is visible you can also simply drag the game, including
the background and all the sprites, horizontally to reposition the runner.
The developer backdoor lets you control the rate at which time ﬂows through the
game by virtue of Snail Bait’s time system. Everything that happens in Snail Bait
depends on the current game time, which is the elapsed time since the game
started; for example, when the runner begins a jump, the game records the current
game time, and thereafter moves the runner through the jump sequence frame
by frame, depending on how much time has elapsed since the runner began
the jump.
By representing the current game time as the real time, which is Snail Bait’s default
mode, the game runs at its intended rate. However, Snail Bait’s time system can
misrepresent the current game time as something other than the real time; for
example, the time system can consistently report that the current game time is
half of the actual time, causing the game to run at half speed.
Besides letting you control the rate at which time ﬂows through the game, Snail
Bait’s time system is also the source of special effects. When the runner collides
with a bad guy and explodes, Snail Bait slows time to a crawl while transitioning
18 Chapter 1 Introduction

to the next life. Once the transition is complete, Snail Bait returns time to normal,
indicating that it’s time to resume play.
Finally, Snail Bait uses two particle systems to create the illusion of smoke and
ﬁre in the background. In Chapter 16, we take a close look at those particle systems
so you can create similar effects of your own.
Now that you have a high-level understanding of the game, let’s take a look at
some code.

NOTE: Snail Bait’s code statistics (lines of code)

• JavaScript: 5,230
• CSS: 690
• HTML: 350

NOTE: A closer look at Snail Bait’s code

• snailbait.js: 3,740
• Supporting JavaScript code: 1,500
• Initializing data for sprites: 500
• Creating sprites: 400
• Sprite behavior implementations: 730
• Event handling: 300
• User interface: 225
• Sound: 130

1.4 Snail Bait’s HTML and CSS

Snail Bait is implemented with HTML, CSS, and JavaScript, the majority of which
is JavaScript. In fact, the rest of this book is primarily concerned with JavaScript,
with only occasional forays into HTML and CSS.
Figure 1.12 shows the HTML elements, outlined in white, and their corresponding
CSS for the top half of the game proper.
Everything in Snail Bait takes place in the arena, which is an HTML DIV element.
The arena’s margin attribute is 0, auto, which means the browser centers the
arena and everything inside it horizontally, as shown in Figure 1.13.
1.4 Snail Bait’s HTML and CSS 19

Figure 1.12 Snail Bait’s CSS for the top half of the game

Figure 1.13 Snail Bait stays centered horizontally in the window

20 Chapter 1 Introduction

When Snail Bait loads resources, it displays the animation shown in Figure 1.14.
During that animation, none of the game’s elements are visible, which is why all
the elements in Figure 1.12 have their display attribute set to none (with the
exception of snailbait-arena, which has no visible characteristics of its own).

Figure 1.14 Snail Bait at startup

After the game loads resources, it fades in the game’s elements by setting their
display attribute to block and subsequently setting their opacity to 1.0 (fully
opaque). Elements that have a transition associated with their opacity property,
like snailbait-lives, snailbait-score, and snailbait-game-canvas, transition
into view over a specified period of time.
The snailbait-lives element has an absolute position; otherwise, with its default
position of static, it will expand to fit the width of its enclosing DIV, forcing the
score beneath it.
The game canvas, which is an HTML5 canvas element, is where all the game’s
action takes place; it’s the only element in Figure 1.12 that’s not a DIV.
Figure 1.15 shows the HTML elements in the lower half of the game.
Like the lives and score elements in the upper half of the game, the browser does
not display the elements at the bottom during the game’s loading animation, so
those elements are initially invisible and have an opacity transition of five seconds,
1.4 Snail Bait’s HTML and CSS 21

Figure 1.15 Snail Bait’s CSS for the bottom of the game

which Snail Bait uses to fade them and all their contained elements in along with
the score and lives elements at the beginning of the game.
22 Chapter 1 Introduction

The snailbait-sound-and-music element, like the snailbait-lives element, has

an absolute position to prevent its width from expanding. The snailbait-keys
and snailbait-explanation DIVs have display attributes of inline so they ap-
pear horizontally inline with the other elements in their enclosing DIV, instead
of being stacked vertically.
Example 1.2 lists Snail Bait’s HTML proper, omitting a considerable amount of
HTML for things like the running slowly warning and developer backdoor.

Example 1.2 index.html (excerpt)

<!DOCTYPE html>

<head>
<title>Snail Bait</title>
...

<link rel='stylesheet' href='snailbait.css'>

</head>

<div id='snailbait-arena'>
...

<img id='snailbait-life-icon-right'
src='images/runner-small.png'/>
</div>
1.4 Snail Bait’s HTML and CSS 23

<div id='snailbait-score'>0</div>
...

<canvas id='snailbait-game-canvas' width='800' height='400'>

Your browser does not support HTML5 Canvas.
</canvas>
...

Sound <input id='snailbait-sound-checkbox'

type='checkbox' checked/>

</div>

<div class='snailbait-checkbox-div'>
Music <input id='snailbait-music-checkbox'
type='checkbox' checked/>
</div>
</div>

<div id='snailbait-instructions'>
<div class='snailbait-keys'>
← / d
<div class='snailbait-explanation'>move left</div>
→ / k
<div class='snailbait-explanation'>move right</div>
</div>

<div class='snailbait-keys'>
p <div class='snailbait-explanation'>pause</div>
</div>
</div>

<div id='snailbait-mobile-instructions'>
(Continues)
24 Chapter 1 Introduction

Example 1.2 (Continued)

<div class='snailbait-keys'>
Right
<div class='snailbait-explanation'>
Run right or jump
</div>
</div>
</div>

<div id='snailbait-copyright'> © 2012 David Geary</div>

</div>

The canvas element is where all the action takes place. The canvas comes with a
2D context with a powerful API for implementing 2D games, among other things,
as you will see in Section 3.1, “Draw Graphics and Images with the HTML5 canvas
Element,” on p. 64. The text inside the canvas element is fallback text that the
browser displays only if it does not support HTML5 canvas element.
One ﬁnal note about the game’s HTML and CSS: Notice that the width and height
of the canvas is set with canvas element attributes in the preceding listing. Those
attributes pertain to both the size of the canvas element and the size of the drawing
surface contained within that element.
On the other hand, using CSS to set the width and height of the canvas element
sets only the size of the element. The drawing surface remains at its default width
and height of 300 × 150 pixels, respectively. That means you will have a mismatch
between the canvas element size and the size of its drawing surface when you
1.5 Snail Bait’s Humble Beginning 25

set the element’s size to something other than the default 300 × 150 pixels, and
in that case the browser scales the drawing surface to ﬁt the element. Most of the time
that effect is unwanted, so it’s a good idea to set the size of the canvas element
with its width and height attributes, and not with CSS.
At this point, you’ve already seen the end of the Snail Bait story. Now let’s go
back to the beginning.

Draw into a small canvas and let CSS scale it?

Some games purposely draw into a small canvas and use CSS to scale the canvas
to a playable size. That way, the canvas is not manipulating as many pixels, and so
increases performance. You will take a performance hit for scaling the canvas, of
course, but scaling with CSS is typically hardware accelerated, so the cost of the
scaling can be minimal. Today, however, nearly all the latest versions of modern
browsers come equipped with hardware-accelerated Canvas, so it’s just as fast to
draw into a full-sized canvas in the ﬁrst place.

NOTE: Namespacing HTML elements and CSS classes

To avoid naming collisions with other HTML elements, Snail Bait starts each
HTML element and CSS classname with snailbait-.

1.5 Snail Bait’s Humble Beginning

Figure 1.16 shows Snail Bait’s initial set of files. Throughout this book we add
many more files, but for now all we need is an HTML file to define the structure
of the game’s HTML elements, a CSS file to define the visual properties for
those elements, a JavaScript file for the game’s logic, and two images, one for the
background and another for the runner.

Figure 1.16 Snail Bait’s initial ﬁles

26 Chapter 1 Introduction

Figure 1.17 shows the starting point for the game, which simply draws the back-
ground and the runner. To start, the runner is not a sprite; instead, the game
draws her directly.

Figure 1.17 Drawing the background and runner

Example 1.3 lists the starting point for the game’s HTML, which is just a distilled
version of the HTML in Example 1.2.

Example 1.3 The starting point for Snail Bait’s HTML

<!DOCTYPE html>
<html>
<head>
<title>Snail Bait</title>
<link rel='stylesheet' href='snailbait.css'/>
</head>

<body>
<div id='snailbait-arena'>
<canvas id='snailbait-game-canvas' width='800' height='400'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
1.5 Snail Bait’s Humble Beginning 27

Initially, the arena contains only the game’s canvas, which is 800 pixels wide by
400 pixels high and has a thin blue border. Example 1.4 shows the starting point
for Snail Bait’s CSS.

Example 1.4 The starting point for Snail Bait’s CSS

body {
background: cornflowerblue;
}

#snailbait-arena {
margin: 0 auto;
margin-top: 50px;
width: 800px;
height: 400px;
}

#snailbait-game-canvas {
border: 1.5px solid blue;
}

Example 1.5 shows the starting point for Snail Bait’s JavaScript.

Example 1.5 The starting point for Snail Bait’s JavaScript

var canvas = document.getElementById('snailbait-game-canvas'),
context = canvas.getContext('2d'),

background = new Image(),

runnerImage = new Image();

function initializeImages() {
background.src = 'images/background.png';
runnerImage.src = 'images/runner.png';

background.onload = function (e) {

startGame();
};
}
(Continues)
28 Chapter 1 Introduction

Example 1.5 (Continued)

function startGame() {
draw();
}

function draw() {
drawBackground();
drawRunner();
}

function drawBackground() {
context.drawImage(background, 0, 0);
}

function drawRunner() {
context.drawImage(runnerImage, 50, 280);
}

// Launch game.........................................................

initializeImages();

The preceding JavaScript accesses the canvas element and subsequently obtains
a reference to the canvas’s 2D context. The code then draws the background and
runner by using the three-argument variant of drawImage() to draw images at a
particular location in the canvas.
The game starts when the background image loads. For now, starting the game
entails simply drawing the background and the runner.

1.6 The Use of JavaScript in This Book

Proficiency in JavaScript is an absolute prerequisite for this book, as discussed in
the Preface. JavaScript, however, is a flexible and dynamic language, so there are
many ways to use it. The purpose of this section is to show you how this book
uses JavaScript; the intent is not to teach you anything at all about the language.
To get the most out of this book, you must already know everything that you are
about to read, or preferably skim, in this section.
This book defines several JavaScript objects that in more traditional languages
such as C++ or Java would be implemented with classes. Those objects range
from the games themselves (Snail Bait and Bodega’s Revenge) to objects they
contain, such as sprites and sprite behaviors. JavaScript objects are defined with
a constructor function and a prototype, as shown in Example 1.6, a severely
truncated listing of the SnailBait object.
1.6 The Use of JavaScript in This Book 29

Example 1.6 Deﬁning JavaScript objects

var SnailBait = function () {
// Constants and variables are declared here

this.LEFT = 1;
...
};

SnailBait.prototype = {
// Methods are defined here

draw: function(now) { // The draw method takes a single parameter

...
},
...
};

JavaScript objects are instantiated in this book with JavaScript’s new operator, as
shown in Example 1.7.

Example 1.7 Creating JavaScript objects

SnailBait.prototype = {
...

createSnailSprites: function () {
var snail,
snailArtist = new SpriteSheetArtist(this.spritesheet,
this.snailCells);

for (var i = 0; i < this.snailData.length; ++i) {

snail = new Sprite(’snail’,
snailArtist,

[
this.paceBehavior,
this.snailShootBehavior,

new CycleBehavior(
300, // 300ms per image
5000) // 1.5 seconds interlude
]);

snail.width = this.SNAIL_CELLS_WIDTH;
snail.height = this.SNAIL_CELLS_HEIGHT;
(Continues)
30 Chapter 1 Introduction

Example 1.7 (Continued)

snail.velocityX = snailBait.SNAIL_PACE_VELOCITY;

this.snails.push(snail);
}
},
...
};

The createSnailSprites() function, which we refer to as a method because it

resides in an object, creates a sprite sheet artist, a sprite, and an instance of
CycleBehavior. That cycle behavior resides in an array of behaviors that
createSnailSprites() passes to the Sprite constructor.

This book also deﬁnes objects using JSON (JavaScript Object Notation), as shown
in Example 1.8.

Example 1.8 Deﬁning JavaScript objects with JSON

var SnailBait = function () {
...

// A single object with three properties

this.fallingWhistleSound = {
position: 0.03, // seconds
duration: 1464, // milliseconds
volume: 0.1
};

// An array containing three objects, each of which has two properties

this.audioChannels = [
{ playing: false, audio: null, },
{ playing: false, audio: null, },
{ playing: false, audio: null, }
];
...
};

Finally, the JavaScript code in this book adheres closely to the subset of JavaScript
discussed in Douglas Crockford’s book JavaScript: The Good Parts. The code in
this book also follows the coding conventions discussed in that book.
1.8 Exercises 31

NOTE: The use of ellipses in this book

Most of the code listings in this book omit irrelevant sections of code. Those
irrelevant sections are identiﬁed with ellipses (…) so that you can distinguish
partial from full listings.

1.7 Conclusion
Snail Bait is an HTML5 platform game implemented with the canvas element’s
2D API. As you’ll see throughout the rest of this book, that API provides a
powerful and intuitive set of functions that let you implement nearly any 2D
game you can imagine.
In this chapter, we looked at Snail Bait from a high level to get a feel for its features
and to understand some of the best practices it implements. Although you can
get a good grasp of its gameplay from reading this chapter, you will have a
much better understanding of the game if you play it, which you can do at
corehtml5games.com.
At the end of this chapter, we looked at a starting point for Snail Bait that simply
draws the background and the runner. Before we build on that starting point and
begin coding in earnest, however, we’ll take a brief detour in the next chapter
to become familiar with the browser development environment and to see
how to access freely available graphics, sound, and music. If you’re already up
to speed on HTML5 development in general and you know how to access open
source assets online, feel free to skip ahead to Chapter 3.

1.8 Exercises
1. Use a different image for the background.
2. Draw the runner at different locations in the canvas.
3. Draw the background at different locations in the canvas.
4. In the draw() function, draw the runner first and then the background.
5. Remove the width and height attributes from the snailbait-game-canvas
element in index.html and add width and height properties—with the same
values of 800px and 400px, respectively—to the snailbait-game-canvas ele-
ment in the CSS file. When you restart the game, does it look the same as
before? Can you explain the result?
This page intentionally left blank
Index
A scaling games on, 370
add my score button size of image files on, 164
disabling, 534, 539 viewport directives on, 375–376
enabling, 527, 535–536 animate() function, 76–77, 86, 100
event handler for, 536 animate() method (SnailBait), 101, 106,
addBehaviors() method (SmokingHole), 417, 156–160
430–431 double buffering with, 63
addChangeListener() method (Slider), monitoring frame rate with, 464–465
493 naive implementation of, 100
addEventListener() method (window) using time system for, 258–259
during transitions, 327 animated GIFs
for developer backdoor, 483 creating, 54
for jumps, 209–210 for loading sequence, 135, 139
on size or orientation changes, 378 for winning sequence, 467–468
vs. onkeydown, 105 animation frames
addSpriteMethods() method (SmokingHole), drawing, 86–87
416, 421 last, time of, 108, 159
addSpriteProperties() method animation loop. See game loop
(SmokingHole), 415–416 animation timers
addSpritesToSpriteArray() method duration of, 235
(SnailBait), 168, 413 for jumps, 231–233
addTouchEventHandlers() method implementing, 233–235
(SnailBait), 396–397 redefining current time for, 264–265
adjustScore() method (collideBehavior), animations, 53–54, 61–90
441 implementing, 314–320
adjustVerticalPosition() method smooth, 63, 70–75
(BounceBehavior), 243–245 throttled heavily, 108–109
Adobe Illustrator, 64 AnimationTimer object
advance() method (SpriteSheetArtist), getElapsedTime() method, 234–235, 265
163–164 isExpired(), isPaused(), isRunning()
advanceCursor() method (SmokingHole), methods, 234, 265
431 makeEaseXXXEasingFunction() methods,
advanceSpeedSamplesIndex() method 232–233, 238–239, 242, 428
(SnailBait), 466 pause(), unpause() methods, 234, 263, 265
all.css, all.js files, 541–542 prototype object, 264–265
Android reset(), stop() methods, 234, 265
adding an icon to home screen on, 402 start() method, 234, 264
audio sprites on, 401 Apache 2.0 license, 50–51
HTML5 applications on, 364–367 appendFile() method (fs), 526
layout viewport on, 371 appendTo() method (Slider), 493–494, 498
mobile instructions on, 390 Apple, 64, 373
remote debugging for, 365 arc() method (canvas context), 64

595
596 Index

arena, 18 left and right edges of, 84

calculating size of, 379–380 loading, 28
HTML/CSS for, 18–24 starting game upon, 77
resizing, 381 scrolling, 78, 86–86, 187, 307
arguments variable (JavaScript), 133 direction of, 86
armSnails() method (SnailBait), 202–203 in developer backdoor, 502–513
artist property (sprites), 152 key event handlers for, 103–105
artists (for sprites), 9–10 slowing during transitions, 454
benefits of, 151 velocity of, 189–190
implementing, 160–167 setting offset of, 81, 86–90, 175–176
types of, 160–164 background property (CSS), 480
ascend() method (jumpBehavior), 221–222 BACKGROUND_VELOCITY constant, 189
ascendTimer property (runner), 218–219, backgroundLoaded() method (SnailBait),
232 139
aspect ratio backgroundOffset property (SnailBait),
cropping, 376–377 82–85
maintaining, 375 bats and bees, 4
assert() method (console), 38 colliding with, 285, 313–320, 442
assets. See coins, jewels exploding (bees only), 330–333
Audacity, 53 flapping wings, 197–199
creating audio sprite sheets in, 350–351 beginPath() method (canvas context), 64,
determining: 283
length of music in, 346–347 behaviors (for sprites), 8, 179–205
position and duration in, 351–352 and graphics context, 184
audio channels, 353–361 benefits of, 151
creating, 355–356 changing at runtime, 183
getting available, 359 combining, 183, 199–205
HTML for, 355–356 game-independent, 193–199
audio element (HTML) generalizing, 195
for audio channels, 355 implementing, 182–183
loop attribute, 344 iterating over, 8
on mobile devices, 400 pausing/unpausing, 225–227, 262–263
preload attribute, 340–341 randomizing, 245–247, 561
audio sprite sheets, 52–53, 350–351 stateless. See flyweights
on mobile devices, 401 triggers for, 212, 214
seeking for audio in, 339, 359–360 behaviors property (sprites), 152
audio.currentTime property, 360 bgVelocity property (SnailBait),
audioChannels array (SnailBait), 355, 359 189–190
audioSpriteCountdown property birds
(SnailBait), 357–358 adjusting position of, 578
authentication, 517 behaviors of, 575–579
creating, 560–562
B randomizing properties of, 561–562
backdoor, 16–17, 475–513 blue button, 8
handling events for, 483 creating, 335, 469
HTML/CSS for, 480 detonating, 330–331, 333–335, 469
visibility of, 480–484 pace behavior of, 190–193
background blueButtonDetonateBehavior, 334–335
drawing, 66, 81–85, 547–548 blur event handler, 105
Index 597

Bodega’s Revenge, 545–585 bounding volumes, 275

on mobile devices, 582 box-shadow property (CSS), 453
playing online, 3 Braid game, 6, 179, 181
BodegasRevenge object, 552 brighten() method (PulseBehavior),
createBirdCollideBehavior() method, 250–251
577–579 browsers
createBirdMoveBehavior() method, audio/video formats in, 339–340
575–577 clamping frame rates in, 10–12
createBirds() method, 560–562 conditional breakpoints in, 42–43
createBulletArtist() method, 558 errors/warnings in, 37
createBulletMoveBehavior() method, hardware acceleration in, 7, 50, 290
571–574 loop HTML attribute in, 344
createBullets() method, 556–558 profiling in, 49–50, 289–291
createExplosionBehavior() method, 579 refreshing automatically, 58–59
createTurret() method, 553–556 setting sizes in, 381
createTurretArtist() method, 554–555 specific functionality of, 72–75, 129
createTurretBarrelFireBehavior() throttling heavily, 108–109
method, 567–568 viewports in, 371–372
createTurretShootBehavior() method, Web Audio API support in, 339
569 bullet canvas, 580–582
drawBulletCanvas() method, 581–582 bullets
eraseBulletCanvas() method, 581 artist for, 558
getBullet() method, 570, 577 creating, 556–558
getBulletLocation() method, 572 drawing, 559
initializeBirdProperties() method, losing, 575–577, 580–581
561–562 moving, 557–558, 571–574
isBulletInsideBird() method, 578–579 shooting, 563
isBulletOutOfPlay() method, 572 buttons, 8
loseOneBullet() method, 575–577, creating, 335, 469
580–581 detonating, 330–331, 333–335,
lostBulletIndex property, 558, 570, 469–471
576–577, 582 pace behavior of, 190–193
polarToCartesian() method, 573
border-radius property (CSS), 453 C
bottom chrome. See instructions, Music C++, timestamps in, 217
checkbox, Sound checkbox calculateArenaSize() method (SnailBait),
BounceBehavior, 241–245 379–380
adjustVerticalPosition() method, calculateAverageSpeed() method
243–245 (SnailBait), 466
bouncing property, 243–244 calculateCollisionRectangle() method
constructor for, 242 (Sprite), 278–279, 487
execute() method, 243 calculateFps() function, 76–78
pause(), unpause() methods, 245 calculateFps() method (SnailBait),
resetTimer() method, 243–244 260–261
startBouncing() method, 243–244 calculateGameTime() method (TimeSystem),
bounding areas, 275–276 255, 258, 268–270
bounding boxes, 277–281 calculateVerticalDrop() method
refining, 286–288 (fallBehavior), 303–305
See also collision rectangles cannonSound object (SnailBait), 352
598 Index

Canvas CellSwitchBehavior, 314–320, 568, 579

2D context, 64 execute() method, 315–316
arc() method, 64 revert(), switchCells() methods,
beginPath() method, 64, 283 316–317
clearRect() method, 581 change event handler, 343, 361, 489–491
drawImage() method, 64–67, 162–163, checkboxes
559 fading in/out, 12
drawText() method, 79 implementing, 484–492
fill() method, 65 updating, 483–484, 491
fillRect() method, 64–65, 69 checkFps() method (SnailBait), 465
fillStyle attribute, 66 checkHighScores() method (SnailBait),
fillText() method, 391–393, 506 530
globalAlpha attribute, 66, 69, 155 chrome
isPointInPath() method, 65, 283, accessing in JavaScript, 122–123
578–579 defining, 120–123
lineTo(), moveTo() methods, 506 fading in/out, 119, 140, 143
lineWidth attribute, 66 focusing attention on, 445
rect() method, 65, 283 HTML for, 121–122
restore() method, 65, 69, 155 Chrome browser
rotate() method, 559 audio/video formats in, 339–340
save() method, 65, 69, 155 conditional breakpoints in, 42–43
stroke() method, 65 debugger in, 521
strokeRect() method, 64–65, 69 displaying timelines in, 46–47
strokeStyle attribute, 66 free developer tools in, 35
translate() method, 65, 80–81, 559 hardware acceleration in, 7, 50, 290
as immediate-mode graphics system, 63 live-editing JavaScript in, 42, 45–46
double buffering in, 63 look-and-feel of, 35
canvas element (HTML5), 20, 24 profiling in, 49–50, 289–291
CSS for, 19–20, 326 Chrome Canary, 40–42
dragging: clear() method (console), 38
accidentally, on mobile devices, 397–399 clearRect() method (canvas context), 581
in developer backdoor, 507–513 click event handler
drawing surface of, 66, 79 for add my score button, 536–537
hardware accelerated, 7, 50, 290 for new game button, 539
implementing sliders with, 492 for Play again link, 455
not focusable, 103 for running slowly warning, 466–467
preventing zooming in/out for, 370–371, for Show how to use the controls link, 389
376, 398–399 for Start link, 395–396
revealing, 143 for Start the game link, 388
saving/restoring context for, 389 clients
scaling, 25 creating sockets on, 522
CANVAS_WIDTH_IN_METERS constant, 302 emitting messages from, 524–525, 530–532,
Cartesian coordinates, 572 536
cells heads-up display on:
bounding boxes of, 165–167 creating, 534
defining, 164–167 displaying, 538
implementing animations with, 314–320 hiding, 539
separate arrays of, and performance, including socket.io, 519
167 clientX, clientY properties, 511
Index 599

Cocoa API, 64 debug() method, 36, 38

coins, 4, 8 dir(), dirxml() methods, 38
assigning values to, 440 error() method, 36–38
bouncing, 241–245 group(), groupXXX() methods, 38
colliding with, 284 info() method, 36, 38
and score, 438, 441 log() method, 36, 39–40
sound effects for, 347, 442 logging to, 36
throbbing, 197–199 online API reference to, 40
coinSound object (SnailBait), 352 profile(), profileEnd() methods, 39,
collideBehavior, 184–186, 279–281 50
adding to runner, 151 time(), timeEnd() methods, 39
adjustScore() method, 441 timeline(), timelineEnd() methods, 39,
didCollide() method, 282–283, 291, 45–46
293–294 timeStamp() method, 39
didRunnerCollideWithXXX() methods, warn() method, 36–37, 39
294–295 constants, 132
execute() method, 281 constructors (JavaScript), 28
isCandidateForCollision() method, coordinate system, 66
281–282, 288 translating, 65, 79–82, 104, 158, 559, 566
processAssetCollision() method, corehtml5games.com, 3, 165
284–285, 349, 441–442 count() method (console), 38
processBadGuyCollision() method, countdown, after regaining focus, 12, 45,
284–285, 320–321, 324–325 110–115
processCollision() method, 284, 333–334 countdown toast, 94, 110–112
processPlatformCollisionDuringJump() fading in/out, 123–132
method, 285, 348 HTML/CSS for, 111
collision detection, 273–295 countdownInProgress property (SnailBait),
and heavily throttled frame rates, 109 113–115
candidates for, 281–282 Cracker Jack, 71
debugging, 487–489 createAudioChannels() method
edge cases of, 291–295, 310 (SnailBait), 354–356
inverting, 293 createBatSprites() method (SnailBait),
optimizing, 286–289 168–170, 197
performance of, 288–291 createBeeSprites() method (SnailBait),
processing, 284–286 168, 197–198, 332
with platforms, 308–310 createBirdCollideBehavior() method
collision margins, 278–279, 287 (BodegasRevenge), 577–579
collision rectangles createBirdMoveBehavior() method
calculating, 278–279 (BodegasRevenge), 575–577
drawing, 487–489 createBirds() method (BodegasRevenge),
See also bounding boxes 560–562
color, nonlinear changes of, 247–251 createBubbleArtist() method
Commodore Amiga, 149 (SmokingHole), 427
CommonJS, 521 createBubbleSprite() method
connect() method (socket.io), 522 (SmokingHole), 425–426
console object, 35–40 createBubbleSpriteTimer() method
assert() method, 38 (SmokingHole), 428, 435
clear() method, 38 createBulletArtist() method
count() method, 38 (BodegasRevenge), 558
600 Index

createBulletMoveBehavior() method HTML for, 449–450

(BodegasRevenge), 571–574 Crockford, Douglas, 30
createBullets() method (BodegasRevenge), cross-site scripting (XSS), 536
556–558 CSS (Cascading Style Sheets)
createButtonSprites() method background properties in, 54–56
(SnailBait), 168, 190–193, 335, 469 color strings in, 66
createCoinSprites() method (SnailBait), minifying and obfuscating, 541–542
168, 198–199, 241–242, 245–247 namespacing in, 25
createDissipateBubbleBehavior() method pixels in, 374
(SmokingHole), 432 using for UI elements, 12–13
createElement() method (browser), 356 CSS Device Adaption, 376
createExplosionBehavior() method CSS3 Patterns Gallery, 54–56, 547
(BodegasRevenge), 579 CSS3 transitions, 13, 123–135
createFireParticle() method for credits, 447, 453
(SmokingHole), 419–420 for game canvas, 326–327
createFireParticleArtist() method for lives indicator, 444
(SmokingHole), 420–421 for running slowly warning, 462
createFireParticles() method for score indicator, 440
(SmokingHole), 418–419 for toasts, 128–129
createPlatformSprites() method CSVs (comma-separated values), 530
(SnailBait), 168–171, 248 current time, 75, 159, 258–259
createRubySprites() method (SnailBait), redeﬁning, 217, 264
168, 196–197 currentTime property
createRunnerSprite() method (SnailBait), of audio, 360
168–171, 287, 317 of musicElement, 345–346
createSapphireSprites() method cursor
(SnailBait), 168 changing type of, 481, 508–509
createServer() method (http), 520 recording original, 508–509
createSmokeBubbles() method restoring, 482
(SmokingHole), 424–425 CycleBehavior, 193–199, 201
createSmokingHoles() method (SnailBait),
412 D
createSnailSprites() method (SnailBait), debug() method (console), 36, 38
29–30, 168, 201 debugging, 42–43
createSprites() method adding breakpoints for, 35, 42–43
of BodegasRevenge, 553 on servers, 521
of SnailBait, 168, 173, 412 remotely, for mobile devices, 365
createTurret() method (BodegasRevenge), Decorator pattern, 235
553–556 deployment, 540–542
createTurretArtist() method descend() method (jumpBehavior), 223–224
(BodegasRevenge), 554–555 descendTimer property (runner), 218–219,
createTurretBarrelFireBehavior() 232
method (BodegasRevenge), 567–568 detectMobile() method (SnailBait), 368
createTurretShootBehavior() method detonating property
(BodegasRevenge), 569 of blue button, 334–335
Creative Commons license, 34–35 of gold button, 470–471
credits, 6, 448–455, 550 developer backdoor. See backdoor
CSS for, 451–453, 455 developer tools, 35–50
fading in/out, 123–132, 453–454 cost/beneﬁt ratio of, 166, 479
Index 601

free, in major browsers, 35 drawImage() method (canvas context), 28,

developerBackdoorVisible property 64–67, 162–163, 559
(SnailBait), 481–482 drawMobileDivider() method (SnailBait),
device pixels, 374 391–392
didCollide() method (collideBehavior), drawMobileInstructionsXXX() methods
282–283, 291, 293–294 (SnailBait), 389–394
didRunnerCollideWithXXX() methods drawPlatform() function, 68–69, 87–90
(collideBehavior), 294–295 drawPlatforms() function, 67–69, 87–90
dim() method (PulseBehavior), 250–251 drawPlatforms() method (SnailBait), 156
dimControls() method (SnailBait), 143 drawRulerXXX() methods (SnailBait),
dir(), dirxml() methods (console), 38 505–506
direction property (BodegasRevenge), drawRunner() function, 67
564–566 drawRunner() method (SnailBait), 156
disguiseAsSprite() method (SnailBait), drawSmokeBubbles() method (SmokingHole),
415–417 429
display property (CSS), 20–22, 111, 123–134 drawSprites() method (SnailBait), 158–159
dissipateBubble() method (SmokingHole), drawText() method (canvas context), 79
433–434 drop shadow, 453
distanceAlongTrajectory property duck typing, 435
(BodegasRevenge), 559 duration property (sound objects), 351–352
div element (HTML), 18
Do not show this warning again button, E
466–467 easing functions, 233–240
documentElement property (document), for falling, 239
378 for gravity, 308
DOM tree, 125–126 online sources for, 239
Donkey Kong game, 6 Easter eggs, 477
double buffering, 63 elapsed property (Stopwatch), 215, 266
dragGameCanvas() method (SnailBait), 512 elapsed time, 235, 243–244, 255
dragging property (SnailBait), 511 electricityFlowingSound object
Draw collision rectangles checkbox, 478, 489 (SnailBait), 352
accessing, 489 emit() method (socket.io), 524–526
HTML/CSS for, 485–486 emitSmokeBubble() method (SmokingHole),
draw() function, 70, 76, 82, 86–87, 89 431
draw() method end game sequence, 448–455
of Slider, 493 endLifeTransition() method (SnailBait),
of SmokingHole, 416–417, 421, 428 327–328
of SnailBait, 97, 100, 156, 160, 393–395, Epoch, in programming languages, 217
507 equipRunner() method (SnailBait),
of Sprite, 150, 154–155, 158, 160, 488 210–211, 299
of SpriteSheetArtist, 163–164 equipRunnerForFalling() method
of turretArtist, 555–556 (SnailBait), 286, 299–300
drawBackground() function, 66, 82, 86–87 equipRunnerForJumping() method
drawBulletCanvas() method (SnailBait), 211–212, 217–218, 231–232,
(BodegasRevenge), 581–582 264, 299
drawCollisionRectangle() method with easing functions, 239
(Sprite), 487 erase() method (Slider), 493
drawFireParticles() method eraseBulletCanvas() method
(SmokingHole), 421–422 (BodegasRevenge), 581
602 Index

eraseRuler() method (SnailBait), 506 for running slowly warning, 462

error() method (console), 36–38 for top chrome, 446
event handlers fadeOutElements() method (SnailBait),
blur, 105 132–135
change, 343, 361, 489–491 for credits, 447, 453–454
click, 388–389, 395–396, 455, 466–467, for developer backdoor, 482
536–537, 539 for high scores display, 539
keydown, 103–105, 209–210, 327, 482–483, for ruler, 504–505
564, 567 for running slowly warning, 462
keypress, 535 fall() method (runner), 299–301
keyup, 564 fallBehavior, 184–185, 302–308
mousedown, 509–511 adding to runner, 151
mousemove, 509–510, 512 calculateVerticalDrop() method,
mouseup, 510, 512 303–305
onload, 77, 98, 102–103, 139 creating runner sprite with, 299
touchend, 397–399, 585 execute() method, 302–303, 348
touchmove, 584 fallOnPlatform() method, 305, 348
touchstart, 397–399, 583 isOutOfPlay() method, 305
execute() method, 8, 154–155, 159, 182–184, moveDown() method, 302–306, 308
186–187 pause(), unpause() methods, 308
of blueButtonDetonateBehavior, 334–335 processCollision() method, 470–471
of BounceBehavior, 243 setSpriteVelocity() method, 303–305
of CellSwitchBehavior, 315–316 willFallBelowCurrentTrack() method,
of collideBehavior, 281 305
of fallBehavior, 302–303, 348 falling property (runner), 300
of goldButtonDetonateBehavior, 469–470 falls, 298–300
of jumpBehavior, 212 at the end of a jump, 298, 307
of PulseBehavior, 250 exploding during, 302
of runBehavior, 9, 187–189 pausing during, 308
of SmokingHole, 431–432 sound effects for, 347
of snailShootBehavior, 204, 349 through the bottom, 326, 442
explode() method (SnailBait), 319–320, 349 favicon.cc, 57
explodeBehavior, 332 favicons, 56–58
exploding property generating, 57, 547–548
of BodegasRevenge, 579 specifying in HTML, 58
of runner, 319–320 feature detection, 369
explosions, 313–320 fill() method (canvas context), 65
during a fall, 302 fillRect() method (canvas context), 64–65,
of bees, 330–333 69
sound effects for, 347 fillStyle attribute (canvas context), 66
explosionSound object (SnailBait), 352 fillText() method (canvas context),
391–393, 506
F finishAscent() method (jumpBehavior),
Facebook, posting scores in, 14 221–222
fadeInElements() method (SnailBait), finishDescent() method (jumpBehavior),
132–135, 143 223–224, 307
for credits, 447, 453 ﬁre particles, 417–422
for developer backdoor, 481 creating, 418–421
for ruler, 504–505 drawing and updating, 421–422
Index 603

no behaviors for, 422 gameTime property (TimeSystem), 268

randomly varied, 419 Gartner, 363–364
Firefox. See Mozilla Firefox genfavicon.com, 547
fitScreen() method (SnailBait), 378 Gertie the dinosaur, 149
ﬂip books, 71 getBullet() method (BodegasRevenge), 570,
ﬂyweights, 190–193, 320, 559 577
frame rate (fps), 61–62 getBulletLocation() method
calculating, 77–78, 258–261 (BodegasRevenge), 572
current, 159 getElapsedTime() method
displaying, 459 of AnimationTimer, 234–235, 265
monitoring, 14, 40–42, 464–466 of Stopwatch, 216, 267
throttled heavily, 10–12, 108–109 getElementById() method (document),
frame rate indicator, 120 122–123
HTML for, 121 getFirstAvailableAudioChannel() method
updating, frequency of, 106 (SnailBait), 354, 359–360
fs module (Node.js) getViewportSize() method (SnailBait),
appendFile() method, 526 378–379
readFile() method, 531 GIF (Graphics Interchange Format), 54
fuzzy objects, 406 GIMP, 51–52
globalAlpha attribute (canvas context), 66,
G 69, 155
game components. See behaviors gold button, 8
game engines, 149 creating, 469
game loop, 75–77 detonating, 4, 469
incorporating sprites into, 156–159 pace behavior of, 190–193
game object (BodegasRevenge) goldButtonDetonateBehavior, execute()
creating, 552 method, 469–470
turretRotation property, 556, 566 Google Nexus. See Android
gameOver() method (SnailBait), 328, 454, graphics
530–531 immediate- vs. retained-mode, 63
games loading, 357–358
behavior-based, 205 manipulating, 51–52
calibrating, 523 obtaining, 9–10, 50–51
deploying, 540–542 graphicsReady property (SnailBait),
developing new features of, 477 357–358
ending, 448–455 gravity, 297–310
level generators for, 70 GRAVITY_FORCE constant, 302, 307
pausing, 105–106, 261–264 group(), groupXXX() methods (console),
resuming, 12, 45, 105–106, 110–115, 38
261–264 gzip, 543
revealing, 140–144
running slowly, 14, 458–467 H
scaling, 369–381 hardware acceleration, 7, 50, 290
shaking, 321–323 hasMoreSmokeBubbles() method
starting, 77, 140–142, 357–358, 400–401, (SmokingHole), 431
539–540 heads-up display (HUD), 481, 526–540
on mobile devices, 376–381, 385 accessing, 529–530
gameStarted property (SnailBait), 138–140, creating, 534
357 displaying, 538
604 Index

heads-up display (HUD) (cont.) img element (HTML), 135

hiding, 539 info() method (console), 36, 38
HTML/CSS for, 527–529 in-game metrics
updating, 530 recording, 523–526
height directive (viewport), 375 retrieving, 519
height property storing on server, 16, 518
of arena, 380–381 initial toast
of sprites, 152 on mobile devices, 383
hideCredits() method (SnailBait), 453–454 revealing, 142
hideDeveloperBackdoor() method initializeBirdProperties() method
(SnailBait), 482–483, 504, 509 (BodegasRevenge), 561–562
hideHighScores() method (SnailBait), 539 initializeContextForMobileInstructions()
hideToast() method (SnailBait), 131, method (SnailBait), 391
134–135 initializeDeveloperBackdoorSliders()
high scores, 526–540 method (SnailBait), 497–498
displaying on client, 533–534, 538–539 initializeImages() function, 76
hiding, 539 initializeImages() method (SnailBait),
retrieving from server, 530 102, 138–139
storing on server, 16, 537–538 initializeSprites() method (SnailBait),
validating, 536–538 173–174, 202, 210–211, 440–441
high scores display. See heads-up display initial-scale directive (viewport),
highScoreNamePending property 375–376
(SnailBait), 530, 532–533, 535 instructions, 120
high-scores.txt, 530 CSS for, 21–22
hOffset property (sprites), 152–153, 158, 176, fading in/out, 12–13
278, 414 for mobile devices, 381–382
href property (SnailBait), 458 drawing, 389–394
HTML (HyperText Markup Language) HTML for, 121–122
favicons in, 58 instructionsElement property (SnailBait),
including JavaScript in, 75–76, 541 382
loading audio files in, 340–341 Internet Explorer browser
namespacing in, 25 audio formats in, 339
special symbols in, 122 free developer tools in, 35
HTML5 hardware acceleration in, 7
on mobile devices, 364–367 profiling in, 49, 289
specifications for standard components, iOS (iPad, iPhone, iPod)
494 adding an icon to home screen on, 402
unpredictability of environment for, and preload attribute, 341
458–459 downloading audio files on, 400–401
http module (Node.js), 520 HTML5 applications on, 364–367
HTTP requests layout viewport on, 371
reducing, 15–16, 51–52, 162, 339 remote debugging for, 365
when games are running, 539 viewport directives on, 375–376
HUD. See heads-up display isAscending() method (jumpBehavior),
221–222
I isBulletInsideBird() method
illusion of depth. See parallax effect (BodegasRevenge), 578–579
image artists, 161 isBulletOutOfPlay() method
images. See graphics (BodegasRevenge), 572
Index 605

isCandidateForCollision() method jump() method (runner), 210–214, 218, 264

(collideBehavior), 281–282, 288 jumpApex property (runner), 219
isDescending() method (jumpBehavior), jumpBehavior, 184–185
223–224 adding to runner, 151
isDoneAscending() method (jumpBehavior), animation timers for, 231–233
221–222 execute() method, 212
isDoneDescending() method finishDescent() method, 307
(jumpBehavior), 223–224 implementing, 213
isExpired() method (AnimationTimer), 234, invoking every animation frame, 214
265 pausing/unpausing, 225
isOutOfPlay() method (fallBehavior), 305 triggers for, 212, 214
isPaused(), isRunning() methods using game time in, 264
of AnimationTimer, 234, 265 using stopwatches for, 214, 217–220, 231
of Stopwatch, 216, 267 jumping property (runner), 212, 214, 219
isPointInPath() method (canvas context), jumps, 208–240
65, 283, 578–579 ascending, 221–223
isSpriteInView() method (SnailBait), descending, 223–224
157–158 event handlers for, 209–210
falling at the end of, 298, 307
J linear, 220–224
JavaScript nonlinear, 229–240
constructors in, 28
functions in, 100 K
global variables in, 95 keyboard
including in HTML, 75–76 controlling games with, 3
key codes of, 104 instructions for, 120
live-editing in, 42, 45–46 handling input from, 103–105
methods in, 97, 100 during life transitions, 328, 454
minifying and obfuscating, 541–542 keydown event handler, 564, 567
+new Date() construct, 75, 217, 261, disregarding during transitions, 327
263–264, 267, 269 for developer backdoor, 482–483
new operator in, 29, 552 for game window, 103–105
objects in, 28–29 for jumps, 209–210
proﬁling, 49–50, 289–291 vs. addEventListener(), 105
prototypes in, 28, 97 keypress event handler, 535
regular expressions in, 402 keyup event handler, 564
running on server, 517 Kindle Fire, HTML5 applications on, 367
timestamps in, 217 knobPercent property (SnailBait), 492–493,
variable-length argument lists in, 133 498–499, 501
jewels (rubies, sapphires), 4
assigning values to, 440 L
bouncing, 241–245 lastAnimationFrameTime property
colliding with, 284 (SnailBait), 77–78, 108
and score, 438, 441 lastSlowWarningTime property (SnailBait),
sound effects for, 347, 442 463
creating, 196–197 lastTimeTransducerWasSet property
sparkling, 195–197 (TimeSystem), 268
JSON (JavaScript Object Notation), 30 layout viewport, 371
JUMP_DURATION, JUMP_HEIGHT constants, 219 left property (sprites), 152–153, 278
606 Index

levels memory consumption, 559

generating, 70 Mickey Mouse, 149
restarting, 328–329 minimum-scale directive (viewport), 375
linear motion, 220–224 MKS Toolkit, 542
lineTo() method (canvas context), 506 mobile devices, 363–403
lineWidth attribute (canvas context), 66 adding an icon to home screen on, 402
link element (HTML), 57 changing orientation of, 378
listen() method (socket.io), 520–521 detecting, 368–369
Little Nemo, 149 dragging canvas in, 397–399
live-editing, 42, 45–46 feature detection on, 369
lives, 4 games without browser chrome on,
losing, 4, 325, 442, 444, 446 402–403
recording location of, 523–526 instructions for, 381–382
transitioning between, 17–18, 253, 323–329, drawing, 389–394
499 HTML for, 382
lives indicator, 120, 442–448 preventing zooming in/out on, 370–371,
CSS for, 19–20, 444 376, 398–399
fading in/out, 13, 444–445 resolution of, 374
HTML for, 443 scaling games on, 369–381
updating, 446–447 size of image ﬁles on, 16, 164
lives property (SnailBait), 325, 446 sound effects on, 400–402
lives-lost.txt, 524 start toast for, 394–396
loading animation, 20, 53, 549 welcome toast for, 386–388
fading in/out, 119, 123–132 mobile property (SnailBait), 368
generating, 548 mobileInstructionsVisible property
HTML/CSS for, 136–138 (SnailBait), 394–396
implementing, 135–140 Module pattern, 103
importance of, 117 motion
loadingAnimationLoaded() method horizontal, 65, 78–86, 104
(SnailBait), 139 linear, 220–224
log() method (console), 36, 39–40 nonlinear, 229–251, 308
loop attribute (HTML), 344 time-based, 85, 193
loseLife() method (SnailBait), 324–326, mouse vs. touch events, 399
446 mousedown event handler, 509–511
loseOneBullet() method (BodegasRevenge), mousemove event handler, 509–510, 512
575–577, 580–581 mouseup event handler, 510, 512
lostBulletIndex property moveBehavior (Bodega's Revenge),
(BodegasRevenge), 558, 570, 576–577, 582 557–558
moveDown() method (fallBehavior),
M 302–306, 308
makeEaseXXXEasingFunction() methods moveTo() method (canvas context), 506
(AnimationTimer), 232–233, 238–239, Mozilla Firefox browser
242, 428 audio formats in, 339
margin property (CSS), 18 free developer tools in, 35
Mario Bros. game, 6 hardware acceleration in, 7
Math.random() method, 246–247 Ogg Theora support in, 340
maximum-scale directive (viewport), 375–376 proﬁling in, 49, 289
McCay, Winsor, 149 mozRequestAnimationFrame() method
media queries, 369 (window), 72
Index 607

-moz-transition property (CSS). See O

transition property objects (JavaScript), 28–29
MP3 format, 339 Ogg format, 339
MPEG-4 format, 340 Ogg Theora format, 340
music (soundtrack), 337–362 Omni Graffle, 551
creating files for, 339–340 on() method (socket.io), 524–525
editing, 53 onblur property (window), 105
length of, 346–347 onload event handler, 77, 98, 102–103, 139
loading, 340–341 ontouchstart() method (window), 368
obtaining, 10, 52 opacity property (CSS), 20, 123–138
pausing, 343 for credits, 451
playing, 343–344 for game canvas, 326–327
turning on/off, 120 for lives indicator, 444, 446
Music checkbox for running slowly warning, 461
CSS for, 21–22 for score indicator, 440, 446
event handler for, 343 opacity property (sprites), 152
fading in/out, 12 OPAQUE constant, 447
HTML for, 121–122 Opera browser
specifying, 342 audio formats in, 339
musicCheckboxElement() method free developer tools in, 35
(SnailBait), 343–344 hardware acceleration in, 7
musicElement.currentTime property, Ogg Theora support in, 340
345–346 profiling in, 49, 289
musicElement() method (SnailBait), -o-transition property (CSS). See
343 transition property
musicOn property (SnailBait), 343–344
P
N paceBehavior, 190–193, 201
namespaces, 25 parallax effect, 87–90
+new Date() construct (JavaScript), 75, 217, particle systems, 405–435
261, 263–264, 267, 269 paths, drawing, 64–65
new game button, 539–540 pause() method, 262–263
new operator (JavaScript), 29, 552 of AnimationTimer, 234, 263, 265
Node Inspector, 521 of BounceBehavior, 245
Node.js, 517–521 of fallBehavior, 308
fs module, 526, 531 of jumpBehavior, 225
http module, 520 of PulseBehavior, 249, 263
installing, 517 of SmokingHole, 434–435
package manager of, 517 of Stopwatch, 215, 266
Passport module, 517 paused property
preventing hangups on, 521 of SnailBait, 105–109
validator module, 536 of Stopwatch, 215, 266
nohup command, 521 paused toast, 11
nonlinear color changes, 247–251 pauseStartTime property (SnailBait), 108
nonlinear motion pausing, 105–106
for bouncing, 241–245 during falls, 308
for gravity, 308 when window loses focus, 10–12,
for jumping, 229–240 108–110
npm package manager (Node.js), 517 while playing music, 344
608 Index

performance processAssetCollision() method

and canvas scaling, 25 (collideBehavior), 284–285, 349,
and hardware acceleration, 7 441–442
and large audio files, 339–340 processBadGuyCollision() method
and sprite sheet cells, 167 (collideBehavior), 284–285, 320–321,
monitoring, 44–49 324–325
of collision detection, 288–291 processCollision() method
vs. simplicity, 539 of collideBehavior, 284, 333–334
pianoSound object (SnailBait), 352 of fallBehavior, 470–471
picasion.com, 54, 548 processPlatformCollisionDuringJump()
PIXELS_PER_METER constant, 302, 307 method (collideBehavior), 285, 348
pixels:meter ratio, calculating, 301–302 processXXXTap() methods (SnailBait),
platformers (platform games), 3, 6 398–399
illusion of depth in, 87 profile(), profileEnd() methods
platformOffset property (SnailBait), 87 (console), 39, 50
platforms, 8 profilers, 49–50, 289–291
colliding with, 286, 298–300, 306–310 prototypes (JavaScript), 28, 97
sound effects for, 347 pulsate property (platforms), 248
drawing, 67–70, 160–161, 170–171 pulsating, 247–251
pulsating, 247–251 duration of, 248
putting sprites on, 174 PulseBehavior, 249–251
scrolling, 87–90 brighten(), dim() methods, 250–251
platformUnderneath() method (SnailBait), execute() method, 250
306 pause(), unpause() methods, 249, 263
Play again link, 450–451, 455 resetTimer() method, 250
playAudio() method (SnailBait), 354–361 startPulsing() method, 250
playing property putSpriteOnPlatform() method
for audio, 360–361 (SnailBait), 174
for keyboard input, 327–328 putSpriteOnTrack() method (SnailBait),
on mobile devices, 388, 396 285
playSound() method (SnailBait), 347–350,
354, 358–361 R
playtesting radial gradient, 138
from the middle of a level, 16, 502 random() method (Math), 246–247
in slow motion, 253, 498–499 ray casting, 275–276
polar coordinates, 572–573 readFile() method (fs), 531
polarToCartesian() method readouts
(BodegasRevenge), 573 accessing in JavaScript, 496–497
pollMusic() method (SnailBait), 345–346 updating, 483–484
polyfills, 72–75 rect() method (canvas context), 65, 283
port numbers, 522 rectangles, drawing, 65
position property (CSS), 20, 22 Replica Island game, 9–10, 50–52, 183, 551,
position property (sound objects), 351–352 571
positionSprites() method (SnailBait), requestAnimationFrame() method (window),
173–174 71–75
power-ups, 254, 477 requestNextAnimationFrame() method
preload attribute (HTML), 340–341 (window), 73–77, 385
preventDefault() method (SnailBait), waiting between calls to, 106
397–399, 511 require() method (Node.js), 520–521
Index 609

reset() method rounded corners, 453

of AnimationTimer, 234, 265 rubies. See jewels
of Stopwatch, 216, 267 Ruby scripts, 58–59
of TimeSystem, 269 ruler, 502–513
resetBubble() method (SmokingHole), drawing, 505–507
433–434 erasing, 506
resetTimer() method (BounceBehavior), HTML/CSS for, 503–504
243–244, 250 updating, 507
resizeElement() method (SnailBait), 381 visibility of, 504–505
resizeElementsToFitScreen() method RUN_ANIMATION_RATE constant, 189
(SnailBait), 380–381 runAnimationRate property (Sprite),
restartGame() method (SnailBait), 454 187–189, 319, 328
restartLevel() method (SnailBait), runBehavior, 9, 184–190
328–329 adding to runner, 151
restartMusic() method (SnailBait), execute() method, 9, 187–189
345–346 runner, 8
restore() method (canvas context), 65, 69, ascendTimer property, 218–219, 232
155 behaviors of, 184–187
resuming (after pause), 11, 105–106 colliding, 282–283
three-second countdown for, 12, 45, with bats and bees, 285, 313–320, 442
110–115 with snail bombs, 285, 291–295
revealBottomChrome() method (SnailBait), creating, 151, 170–171, 184–185, 317
143 descendTimer property, 218–219, 232
revealCanvas() method (SnailBait), 143 drawing, 67, 161
revealCredits() method (SnailBait), 453, exploding, 313, 319–320
458 fall() method, 299–301
revealDeveloperBackdoor() method falling property, 300
(SnailBait), 481–484, 491, 504, 509 horizontal position of, 307
revealGame() method (SnailBait), 142 JUMP_DURATION, JUMP_HEIGHT constants,
revealHighScores() method (SnailBait), 219
534 jump() method, 210–214, 218, 264
revealInitialToast() method (SnailBait), jumpApex property, 219
142–143 jumping property, 212, 214, 219
revealMobileStartToast() method keydown event listener for, 210
(SnailBait), 396 starting animation on, 189
revealRunningSlowlyWarning() method stopFalling() method, 299–300
(SnailBait), 463–464 stopJumping() method, 212
revealToast() method (SnailBait), verticalLaunchPosition property, 219
112–115, 129–131 RUNNER_LEFT constant, 67
revealTopChromeXXX() methods runnerArtist object, 9
(SnailBait), 143–144, 445–446 runnerExplodeBehavior, 184–185, 318–319
revealWinningAnimation() method adding to runner, 151
(SnailBait), 468, 471–472 running property (Stopwatch), 215, 266
revert() method (CellSwitchBehavior), Running slowly threshold slider, 493
316–317 event handler for, 498
rotate() method (canvas context), 559 running slowly warning, 14, 455, 458–467,
rotating property (BodegasRevenge), 548, 550
564–565 enabling/disabling, 489–490
rotation, 555–556 event handlers for, 466–467
610 Index

running slowly warning (cont.) setBubbleSpriteProperties() method

HTML/CSS for, 460–462 (SmokingHole), 426
initial invisibility of, 462 setInitialSmokeBubbleColor() method
modifying threshold of, 489 (SmokingHole), 425, 427
runningSlowlyThreshold property setInterval() function, 70–71
(SnailBait), 463 for interface effects, 106
for playing music, 345–346
S setOffsets() function, 89
Safari browser setOffsets() method (SnailBait), 175
audio/video formats in, 339–340 setPlatformXXX() functions, 89–90
debugging iOS games in, 365 setSpriteOffsets() method (SnailBait),
free developer tools in, 35 176, 414
hardware acceleration in, 7 setSpriteValues() method (SnailBait),
profiling in, 49, 289 440–441
Samsung Galaxy. See Android setSpriteVelocity() method
sapphires. See jewels (fallBehavior), 303–305
save() method (canvas context), 65, 69, 155 setTimeout() function, 70–71, 74
score indicator, 120 for interface effects, 106, 321–328
CSS for, 19–20, 439–440 for transitions, 125–127, 131
fading in/out, 13, 445 setTimeRate() method (SnailBait), 256,
HTML for, 121, 438–439 259–260, 499–500
initial invisibility of, 440 setTransducer() method (TimeSystem), 255,
updating, 441 259–260, 269–270
score property (SnailBait), 440, 532 shake() method (SnailBait), 321–323
scores, 4–5, 438–442 shim, shiv. See polyfills
incrementing, 438, 441–442 shooting property (BodegasRevenge), 563,
posting in social networks, 14–15, 567–569
455–458 Show how to use the controls link, 383,
storing on server, 16, 537–538 388–389, 396
script element (HTML), 519 showCollisionRectangle property (Sprite),
security, preventing breaches of, 536 488–489
seekAudio() method (SnailBait), 354, showSlowWarning property (SnailBait), 463,
359–360 467, 490
self reference (JavaScript), 103 showSmokingHoles property (SnailBait),
Separating Axis Theorem, 277, 289 491
servers side-scroller games, 6
connecting to, 522 sliders, 492–501
creating, 520 accessing, 496
creating sockets on, 520–521 creating, 497
debugging on, 521 HTML/CSS for, 494–496
emitting messages from, 531, 533 initializing, 497–498
processing messages on, 525, 532 manual redrawing, 500
running, 521 separate JavaScript file for, 492–493
updating files on, 537–538 updating, 483–484
uploading files to, 542–543 before revealing the backdoor, 500–501
validating messages on, 537–538 smoke bubbles, 422–434
setBackgroundOffset() function, 85–90 creating, 424–428
setBackgroundOffset() method dissipating, 432–434
(SnailBait), 175–176 drawing and updating, 428–429
Index 611

emitting, 430–431 Snail Bait, 3–543

expanding, speed of, 428 characters of, 4, 7–10
Smoke checkbox, 491 code statistics of, 18
accessing, 490 elements of, 3
HTML/CSS for, 486 HTML for, 22–27, 75–76
smoking holes, 406–417 JavaScript for, 27–28
and performance, 49–50 keyboard controlling of, 3
creating, 412 playing online, 3
defining, 411 stripped-down version of, 547
disguising as sprites, 413, 415–417 snail bombs, 4
JavaScript file for, 409–410 colliding with, 285, 291–295
pausing, 434–435 creating, 202
scrolling, 413–414 moving, 204
showing/hiding, 490–491 shooting, 203–204
SmokingHole object sound effects for, 347
addBehaviors() method, 417, 430–431 snail shooting sequence, 199–205
addSpriteMethods() method, 416, 421 SnailBait object
addSpriteProperties() method, 415–416 constructor of, 95–97
advanceCursor() method, 431 prototype of, 97–100
createBubbleArtist() method, 427 See also individual methods and properties
createBubbleSprite() method, 425–426 snailBait reference, 103
createBubbleSpriteTimer() method, 428, snailBombMoveBehavior, 202–204
435 snailShootBehavior, 203–204
createDissipateBubbleBehavior() execute() method, 204, 349
method, 432 social features, 14–15, 455–458
createFireParticle() method, 419–420 socket.io, 517–526
createFireParticleArtist() method, connect() method, 522
420–421 creating sockets with, 520–521
createFireParticles() method, 418–419 emit() method, 524–526
createSmokeBubbles() method, 424–425 including in Snail Bait, 518–520, 523
dissipateBubble() method, 433–434 installing, 517
draw() method, 416–417, 421, 428 listen() method, 520–521
drawFireParticles() method, 421–422 on() method, 524–525
drawSmokeBubbles() method, 429 sockets
emitSmokeBubble() method, 431 creating, 520–521
execute() method, 431–432 opening on clients, 522
hasMoreSmokeBubbles() method, 431 Sonic the Hedgehog game, 6
pause(), unpause() methods, 434–435 Sound checkbox, 361–362
resetBubble() method, 433–434 CSS for, 21–22
setBubbleSpriteProperties() method, event handler for, 362
426 fading in/out, 12
setInitialSmokeBubbleColor() method, HTML for, 121–122
425, 427 specifying, 342
update() method, 416–417, 428–430 sound effects, 337–362
updateSmokeBubbles() method, 429 creating files for, 339–340
snail editing, 53
arming with bombs, 202–203 loading, 340–341, 357–358
creating, 201 multichannel, 353–361
pace behavior of, 190, 201 obtaining, 10, 52
612 Index

sound effects (cont.) scrolling, 152–153, 174–176

on mobile devices, 400–402 setting offsets of, 176
playing, 347–350, 358–361 specifying type of, 150
turning on/off, 120, 361–362 updating, 157, 186
sound objects based on current time, 159
creating, 352 sprites array (SnailBait), 156–159, 167–171,
properties of, 351–353 409
soundclick.com, 52 adding:
soundLoaded() method (SnailBait), 354, runner to, 171
357 smoking holes to, 413
soundOn property (SnailBait), 361 deﬁning, 167
soundtrack. See music iterating over, 168
spatial partitioning, 288–289 SpriteSheetArtist object, 163
special effects, 320–329 spriteSheetLoaded() method (SnailBait),
splitCSV() method (String), 532 358, 400–401
sprite artists. See artists SQL injections, 536
sprite behaviors. See behaviors src attribute (HTML)
sprite containers, 411 of img, 135, 139
Sprite object, 150, 153 of script, 519
calculateCollisionRectangle() method, start game sequence, 117, 139–144
278–279, 487 on mobile devices, 385, 400–401
draw() method, 154–155, 488 Start link
drawCollisionRectangle() method, 487 event handler for, 395–396
runAnimationRate property, 187–189 playing coin sound for, 400
showCollisionRectangle property, Start the game link, 388
488–489 start toast, 548–549
update() method, 154–155, 157, 159, 186 for mobile devices, 394–396
sprite sheet artists, 150, 162–164 start() method
sprite sheet inspector, 165–167 of AnimationTimer, 234, 264
sprite sheets of Stopwatch, 215, 266
cells of, 164–167, 314–317 of TimeSystem, 255, 269
for audio, 52–53 startBouncing() method (BounceBehavior),
loading, 357–358 243–244
on mobile devices, 16, 164 startDraggingGameCanvas() method
single for all images, 15–16, 51–52 (SnailBait), 510–511
transparent background for, 551 startGame() function, 76–77
spriteOffset property (SnailBait), 174–175 startGame() method (SnailBait), 140–142,
sprites, 7–10, 147–176 257–258, 354, 357–358, 385
collision margins of, 278–279, 287 STARTING_BACKGROUND_OFFSET constant, 502
creating, 9, 150, 168–171 startLifeTransition() method
data-driven, 70 (SnailBait), 325–328
deﬁning with metadata, 171–174 startMusic() method (SnailBait),
disguising JavaScript objects as, 415–417 345–346
drawing, 150, 158 startPause property (Stopwatch), 215, 266
from a sprite sheet, 162 startPulsing() method (PulseBehavior),
in view, 157–158 250
incorporating into game loop, 156–159 startTime property (Stopwatch), 215, 266
properties of, 152 startToastTransition() method
putting on platforms, 174 (SnailBait), 130–131, 134–135
Index 613

stop() method time rate

of AnimationTimer, 234, 265 modifying, 17, 231, 253, 259–260
of Stopwatch, 215, 266 in developer backdoor, 478
stopDraggingGameCanvas() method setting, 256, 260, 498–500
(SnailBait), 512 slowing during transitions, 17, 253, 327,
stopFalling() method (runner), 299–300 499
stopJumping() method (runner), 212 Time rate slider, 498–500
Stopwatch object, 214–217 time systems, 17, 253–270
elapsed, paused, running, startXXX, creating, 257
totalPausedTime properties, 215, 266 implementing, 268–270
getElapsedTime() method, 216, 267 pausing/resuming games with, 261–264
isPaused(), isRunning(), reset() starting, 257–258
methods, 216, 267 using, 258–264
pause(), start(), stop() methods, 215, time(), timeEnd() methods (console), 39
266 time-based motion, 85, 193
unpause() method, 216, 266 timeline(), timelineEnd() methods
stopwatches, 214–217 (console), 39, 45–46
pausing, 225–227 timelines, 44–49
redefining current time for, 217, 265–267 starting/stopping programmatically, 45
resuming, 217, 225–227 timer property (TimeSystem), 268
using for jumps, 214, 217–220, 231 timeStamp() method (console), 39
Strategy design pattern, 9, 187 TimeSystem object
String.splitCSV() method, 532 calculateGameTime() method, 255, 258,
stroke and fill artists, 160–161 268–270
stroke() method (canvas context), 65 gameTime, lastTimeTransducerWasSet,
strokeRect() method (canvas context), timer, transducer properties, 268
64–65, 69 reset() method, 269
strokeStyle attribute (canvas context), 66 setTransducer() method, 255, 269–270
style change events, 126 start() method, 255, 269
SVG (Scalable Vector Graphics), 63 TOAST_TRANSITION_DURATION constant, 132,
switchCells() method 134–135
(CellSwitchBehavior), 316–317 toasts, 12, 111–112
CSS for, 128–129
T fading in/out, 12, 112, 123–132
target property (CSS), 457 HTML/CSS for, 111
Texas Instruments 9918A video-display togglePaused() method (SnailBait),
processor, 149 105–115, 225, 261–262
textAlign, textBaseline attributes (canvas for music, 344
context), 391 togglePausedStateOfAllBehaviors()
this reference (JavaScript), 97, 100–103 method (SnailBait), 225–227, 262
changing in the middle of a method, 102 top chrome. See score indicator, lives
thudSound object (SnailBait), 352 indicator
time, 207–270 top property (sprites), 152, 278
current, 75, 159, 258–259 totalPausedTime property (Stopwatch), 215,
redefining, 217, 264 266
elapsed, 235, 243–244 touch vs. mouse events, 399
modifying, 255 touchend event handler, 397–399, 585
of last animation frame, 108, 159 touchEnd() method (SnailBait), 398
time animations, 214–217 touchmove event handler, 584
614 Index

touchMove() method (SnailBait), 399 of SmokingHole, 416–417, 428–430

touchstart event handler, 397–399, 583 of Sprite, 154–155, 157, 159, 186
touchStart() method (SnailBait), 397, 399 updateDeveloperBackdoorCheckboxes()
track property, 304 method (SnailBait), 483–484, 491
trajectory property (BodegasRevenge), 559 updateDeveloperBackdoorReadouts()
transducer functions, 255–257 method (SnailBait), 483–484
duration of, 270 updateDeveloperBackdoorSliders()
transducer property (TimeSystem), 268 method (SnailBait), 483–484, 500–501
transition property (CSS), 123, 125, 128–129 updateLivesElement() method (SnailBait),
versions of, 129 446–447
transitions. See CSS3 transitions updateRunningSlowlySlider() method
translate() method (canvas context), 65, (SnailBait), 501
80–81, 559 updateScoreElement() method (SnailBait),
TRANSPARENT constant, 447 441
triggers, 315 updateSmokeBubbles() method
turnXXX() functions, 86 (SmokingHole), 429
turnXXX() methods (SnailBait), 104, updateSpeedSamples() method (SnailBait),
189–190 466
turret, 553–556 updateSprites() method (SnailBait),
artist for, 554–555 157–159
behaviors of, 564–570 updateTimeRateSlider() method
creating, 553–556 (SnailBait), 501
direction property, 564–566 user interface (UI), 437–472
drawing, 555–556 focusing attention on, 12–13, 445
rotating property, 564–566 latency of, 106
shooting property, 563, 567–569 user-scalable directive (viewport), 375–376
turretArtist.draw() method, 555
turretRotation property (game), 556, 566 V
Tweet my score link, 14–15, 450–451, 455–458 validator module (Node.js), 536–538
accessing in JavaScript, 457–458 velocity of falling objects, 301
HTML for, 457 initial, 306–307
TWEET_EPILOGUE, TWEET_PREAMBLE constants, velocityX, velocityY properties (sprites),
457–458 152
Twitter verticalLaunchPosition property (runner),
posting scores in, 14–15 219
Web Intents, 455–458 video formats, 340
type property (sprites), 152 viewport meta tag, 373–376
@viewport rule (CSS), 376
U visibility property (CSS), 128
unpause() method, 262–263 visible property (sprites), 152
of AnimationTimer, 234, 263, 265 visible viewport, 371
of BounceBehavior, 245 getting width and height of, 378
of fallBehavior, 308 volume property (sound objects), 351–353
of jumpBehavior, 225 VP8 format, 340
of PulseBehavior, 249, 263
of SmokingHole, 434–435 W
of Stopwatch, 216, 266 Warn when running slowly checkbox,
Unreal Engine, 149 489–491
update() method accessing, 490
Index 615

HTML/CSS for, 485–486 window object

warn() method (console), 36–37, 39 addEventListener() method, 105,
WASD keys, 7 209–210, 327
Web Audio API, 339 for developer backdoor, 483
web browsers. See browsers on size or orientation changes, 378
Web Intents, 455–458 keydown event handler, 564, 567
WebGL (Web Graphics Library), 290 keyup event handler, 564
WebKit, 64 ontouchstart() method, 368
webkitRequestAnimationFrame() method windowHasFocus property (SnailBait),
(window), 72 113–115
-webkit-transition property (CSS). See Windows, running UNIX scripts on,
transition property 542
webpages winning animation, 4–5, 467–472
background of, 54–56 revealing, 471
scaling to ﬁt, 371–372
welcome toast, 384–389 X
HTML for, 386–388 XSS (cross-site scripting), 536
width directive (viewport), 374–376
width property Y
of arena, 380–381 YUI Compressor, 540
of sprites, 152
willFallBelowCurrentTrack() method Z
(fallBehavior), 305 z-index property (CSS), 111, 455

Procedural Generation in Godot - Christopher Pitt
100% (2)
Procedural Generation in Godot - Christopher Pitt
257 pages
Learn Game Programming With Ruby Bring Your Ideas ... - (Cover)
No ratings yet
Learn Game Programming With Ruby Bring Your Ideas ... - (Cover)
6 pages
Core Techniques and Algorithms in Game Programming PDF
No ratings yet
Core Techniques and Algorithms in Game Programming PDF
745 pages
Teach Yourself Game Programming With DirectX in 21 Days
100% (3)
Teach Yourself Game Programming With DirectX in 21 Days
720 pages
Game Engines Assignment 1
No ratings yet
Game Engines Assignment 1
6 pages
Cross Platform Game Programming
100% (4)
Cross Platform Game Programming
481 pages
Game Audio Development with Unity 5.X
From Everand
Game Audio Development with Unity 5.X
Micheal Lanham
No ratings yet
2014 - 5stars - HTML5 Game Engines App Development and Distribution
No ratings yet
2014 - 5stars - HTML5 Game Engines App Development and Distribution
212 pages
Beginning Game Development with Godot (for John Malkovec): Learn to Create and Publish Your First 2D Platform Game Maithili Dhule all chapter instant download
100% (2)
Beginning Game Development with Godot (for John Malkovec): Learn to Create and Publish Your First 2D Platform Game Maithili Dhule all chapter instant download
41 pages
The Fundamentals of C - C++ Game Programming - Using Target-Based Development On SBC's (PDFDrive)
100% (1)
The Fundamentals of C - C++ Game Programming - Using Target-Based Development On SBC's (PDFDrive)
533 pages
Designing Arcade Computer Game Graphics by Ari Feldman
100% (5)
Designing Arcade Computer Game Graphics by Ari Feldman
539 pages
Math For Game Develop
100% (3)
Math For Game Develop
623 pages
Game Engine
No ratings yet
Game Engine
20 pages
Directx9 Graphics The Definitive Guide To Direct 3d
No ratings yet
Directx9 Graphics The Definitive Guide To Direct 3d
368 pages
Game Programmers Guide To Torque
100% (1)
Game Programmers Guide To Torque
1,265 pages
DirectX Tutorial
No ratings yet
DirectX Tutorial
128 pages
Windev Game Dev Guide Oct 2017
No ratings yet
Windev Game Dev Guide Oct 2017
43 pages
Gold - Object-Oriented Game Development
100% (2)
Gold - Object-Oriented Game Development
441 pages
DirectX Strategy Game Programming With DirectX 9.0
100% (2)
DirectX Strategy Game Programming With DirectX 9.0
558 pages
Michael Tanaya, Huaming Chen, Jebediah Pavleas, Kelvin Sung (Auth.) - Building A 2D Game Physics Engine - Using HTML5 and JavaScript-Apress (2017)
100% (1)
Michael Tanaya, Huaming Chen, Jebediah Pavleas, Kelvin Sung (Auth.) - Building A 2D Game Physics Engine - Using HTML5 and JavaScript-Apress (2017)
129 pages
Godot Game Development For Beginners PDF
100% (1)
Godot Game Development For Beginners PDF
198 pages
2D Game Development
No ratings yet
2D Game Development
78 pages
Optimize Your Game Performance For Mobile: Unity For Games E-Book
100% (1)
Optimize Your Game Performance For Mobile: Unity For Games E-Book
46 pages
1.2. Game Engine Architecture Overview
100% (1)
1.2. Game Engine Architecture Overview
40 pages
Unity Lander 1 - Serious Games
No ratings yet
Unity Lander 1 - Serious Games
48 pages
SFML Blueprints - Sample Chapter
No ratings yet
SFML Blueprints - Sample Chapter
20 pages
3d Game Development With LWJGL
No ratings yet
3d Game Development With LWJGL
344 pages
Godot Game Development For Beginners (099 198)
0% (1)
Godot Game Development For Beginners (099 198)
100 pages
The Definitive Guide To Lighting in The High Definition Render Pipeline Unity 2021 Lts Edition
100% (1)
The Definitive Guide To Lighting in The High Definition Render Pipeline Unity 2021 Lts Edition
100 pages
Create Modular Game Architecture in Unity With Scriptableobjects
No ratings yet
Create Modular Game Architecture in Unity With Scriptableobjects
76 pages
Beginning Math Concepts For Game Developers
100% (1)
Beginning Math Concepts For Game Developers
337 pages
Research Advances Toward Real-Time Path Tracing GTC 2022
No ratings yet
Research Advances Toward Real-Time Path Tracing GTC 2022
90 pages
Programming Games in Java 2 PDF
100% (1)
Programming Games in Java 2 PDF
817 pages
3D Graphics For Game Programming PDF
100% (1)
3D Graphics For Game Programming PDF
325 pages
Graphics Programming in C
100% (1)
Graphics Programming in C
13 pages
Game Programming Gems 6
No ratings yet
Game Programming Gems 6
603 pages
Gui Definitivo de Profilling Unity
No ratings yet
Gui Definitivo de Profilling Unity
75 pages
PascalGamerMagazine Issue03
No ratings yet
PascalGamerMagazine Issue03
56 pages
Procedural Content Generation For Unity Game Development - Sample Chapter
No ratings yet
Procedural Content Generation For Unity Game Development - Sample Chapter
35 pages
Creating Games With Stencyl
No ratings yet
Creating Games With Stencyl
38 pages
Blender Game Engine For Rapid Game Development Pycon 2010 Final
No ratings yet
Blender Game Engine For Rapid Game Development Pycon 2010 Final
51 pages
Game Development in Unity
No ratings yet
Game Development in Unity
2 pages
Graphics Programming Black Book
100% (15)
Graphics Programming Black Book
1,262 pages
C++ For Game Programming
100% (8)
C++ For Game Programming
434 pages
Game Engines
No ratings yet
Game Engines
28 pages
Introductions and Tutorials With DirectX 9
No ratings yet
Introductions and Tutorials With DirectX 9
393 pages
Mastering Cocos2d Game Development
From Everand
Mastering Cocos2d Game Development
Alex Ogorek
No ratings yet
Game Maker - Bejamin Andersen
100% (2)
Game Maker - Bejamin Andersen
174 pages
Unity Game Development Blueprints
From Everand
Unity Game Development Blueprints
John P. Doran
No ratings yet
DirectX Demystified: A Comprehensive Guide to Game Development Essentials
From Everand
DirectX Demystified: A Comprehensive Guide to Game Development Essentials
Kameron Hussain
No ratings yet
SFML Blueprints
From Everand
SFML Blueprints
Maxime Barbier
No ratings yet
GameMaker: Studio For Dummies
From Everand
GameMaker: Studio For Dummies
Michael Rohde
No ratings yet
GameMaker Essentials
From Everand
GameMaker Essentials
Nathan Auckett
1/5 (1)
NGUI for Unity
From Everand
NGUI for Unity
Charles Bernardoff
No ratings yet
Software Development Gems. A Small Handbook
From Everand
Software Development Gems. A Small Handbook
samiuddin samiuddin
No ratings yet
Unity 3D Game Development by Example Beginner's Guide
From Everand
Unity 3D Game Development by Example Beginner's Guide
Ryan Henson Creighton
2.5/5 (2)
Unity Game Development Scripting
From Everand
Unity Game Development Scripting
Kyle D'Aoust
No ratings yet
Mastering Unity: Advanced Techniques for Interactive Design: Unity Game Development Series
From Everand
Mastering Unity: Advanced Techniques for Interactive Design: Unity Game Development Series
Kameron Hussain
No ratings yet
Unity 5 Game Optimization: Master performance optimization for Unity3D applications with tips and techniques that cover every aspect of the Unity3D Engine
From Everand
Unity 5 Game Optimization: Master performance optimization for Unity3D applications with tips and techniques that cover every aspect of the Unity3D Engine
Chris Dickinson
5/5 (1)
Game Physics Cookbook
From Everand
Game Physics Cookbook
Gabor Szauer
No ratings yet
CSSMP
No ratings yet
CSSMP
12 pages
What Is An Online Examination System?: Examination Project in PHP Is Very Useful To Learn It
No ratings yet
What Is An Online Examination System?: Examination Project in PHP Is Very Useful To Learn It
3 pages
Rahat Mini - Project Documentation Adypu
No ratings yet
Rahat Mini - Project Documentation Adypu
23 pages
12 Practical Web Design
No ratings yet
12 Practical Web Design
16 pages
Cheat Sheet For The Razor Syntax: Object 2
No ratings yet
Cheat Sheet For The Razor Syntax: Object 2
35 pages
Internet Programming
No ratings yet
Internet Programming
31 pages
12th Commerce IT 80 Marks Paper 9 (2)
No ratings yet
12th Commerce IT 80 Marks Paper 9 (2)
9 pages
ICT 0417 P1 (2)
No ratings yet
ICT 0417 P1 (2)
58 pages
Shubham WD Final Assessment Test
No ratings yet
Shubham WD Final Assessment Test
7 pages
IBM WORKSHOP REPORT
No ratings yet
IBM WORKSHOP REPORT
5 pages
Internship Report On Web App Development
No ratings yet
Internship Report On Web App Development
37 pages
Website Design and Development by Eduzor Victor
No ratings yet
Website Design and Development by Eduzor Victor
25 pages
Javascript Notes
No ratings yet
Javascript Notes
15 pages
User Interface Design: Prashamsa Mishra
No ratings yet
User Interface Design: Prashamsa Mishra
64 pages
Student Mark List
No ratings yet
Student Mark List
6 pages
CSS Theory
No ratings yet
CSS Theory
21 pages
Palisetti Tejaswi: Portfolio: Https://tejapro - Github.io Mobile Email
No ratings yet
Palisetti Tejaswi: Portfolio: Https://tejapro - Github.io Mobile Email
1 page
PPT-2 CSS
No ratings yet
PPT-2 CSS
44 pages
Final Full Document
No ratings yet
Final Full Document
72 pages
Javascript - The Ultimate Guide For Javascript Programming
No ratings yet
Javascript - The Ultimate Guide For Javascript Programming
42 pages
DLL g7 Q3W2
100% (1)
DLL g7 Q3W2
3 pages
Java Full Stack Developer Syllabus
No ratings yet
Java Full Stack Developer Syllabus
17 pages
LC - Little Champs
No ratings yet
LC - Little Champs
28 pages
Summer Internship at RDSO
No ratings yet
Summer Internship at RDSO
45 pages
week4
No ratings yet
week4
10 pages
Sanjam Report-8sem
No ratings yet
Sanjam Report-8sem
57 pages
Window - DevicePixelRatio Property - Web APIs - MDN
No ratings yet
Window - DevicePixelRatio Property - Web APIs - MDN
4 pages
Ashu Registration and Login Form
No ratings yet
Ashu Registration and Login Form
16 pages
Mern Stack Brochure-compressed 1
No ratings yet
Mern Stack Brochure-compressed 1
10 pages
Day 4
No ratings yet
Day 4
12 pages