Core HTML5 2D Game Programming

by David Geary

Overview

Game programming offers a wealth of creative and business opportunities, and it’s never been more accessible. In Core HTML5 2D Game Programming, best-selling author David Geary shows you how to use freely available browser tools and open source resources to create video games that run in desktop browsers and on mobile devices.

 

Geary walks you step by step through every aspect of implementing a sophisticated arcade-style game entirely from scratch, without using proprietary game frameworks. Packed with code, this full-color tutorial gives you the in-depth understanding you need to design and build any kind of HTML5 2D game on your own, whether you use a framework or not.

 

A clearly written, accessible, and exhaustive guide to implementing games, this book leaves no stone unturned, showing you how to

• Create smooth, flicker-free animations
• Implement motion that’s unaffected by your game’s underlying animation frame rate
• Animate sprites (graphical objects) to make them sparkle, explode, etc.
• Layer multi-channel sound effects on top of a soundtrack
• Warp time to create nonlinear effects, such as jumping or bouncing
• Control the flow of time through your game with a time system
• Implement particle systems that simulate natural phenomena
• Efficiently detect collisions between sprites
• Create a developer backdoor containing special features
• Use Node.js and socket.io to transfer real-time metrics to a server
• Employ a heads-up display to show high scores stored on a server
• Understand the nuances of implementing HTML5 games for mobile devices

Through expertly written code that’s easy to understand, and prose that cuts to the chase, Geary illuminates every corner of game development. Everyone from novice game programmers to professional game developers will find this book invaluable as both a tutorial and a reference.

 

All of the book’s source code, including chapter-specific versions of the game discussed in the book, are available at corehtml5games.com.

Product Details

ISBN-13:	9780133564266
Publisher:	Pearson Education
Publication date:	06/30/2014
Series:	Core Series
Sold by:	Barnes & Noble
Format:	eBook
Pages:	640
File size:	49 MB
Note:	This product may take a few minutes to download.
Age Range:	18 Years

About the Author

David Geary, a prominent author, speaker, and consultant, is a leading expert on advanced web application development. He’s the author of eight Java books, including the industry’s best-selling guides to Swing and JavaServer Faces, and he co-founded the HTML5 Denver User’s Group. A three-time JavaOne Rock Star, he speaks frequently at conferences. Follow him on Twitter at @davidgeary.

Table of Contents

Preface xv

Acknowledgments xxi

About the Author xxiii

 

Chapter 1: Introduction 1

1.1 Snail Bait 3

1.2 HTML5 Game Development Best Practices 10

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.2 Obtain Assets 50

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.2 Implement Smooth HTML5 Animations 70

3.3 Implement a Game Loop 75

3.4 Calculate Frame Rates 77

3.5 Scroll the Background 78

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.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

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.8 Conclusion 115

4.9 Exercises 116

 

Chapter 5: Loading Screens 117

5.1 Define Snail Bait’s Chrome 120

5.2 Fade Elements In and Out with CSS Transitions 123

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.2 Incorporate Sprites into a Game Loop 156

6.3 Implement Sprite Artists 160

6.4 Create and Initialize a Game’s Sprites 167

6.5 Define Sprites with Metadata 171

6.6 Scroll Sprites 174

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.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 Refine the Jump Behavior 217

8.6 Implement Linear Motion 220

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

9.8 Implement Nonlinear Color Changes with Animation Timers and Easing Functions 247

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.4 Redefine 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.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.8 Monitor Collision Detection Performance 289

11.9 Implement Collision Detection Edge Cases 291

11.10 Conclusion 295

11.11 Exercises 296

 

Chapter 12: Gravity 297

12.1 Equip the Runner for Falling 298

12.2 Incorporate Gravity 300

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.3 Choreograph Effects 329

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.7 Turn Sound On and Off 361

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.4 Change Instructions Underneath the Game’s Canvas 381

15.5 Change the Welcome Screen 383

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.3 Implement Smoking Holes 414

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.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.6 Incorporate the Developer Backdoor Sliders 492

18.7 Implement the Backdoor’s Ruler 502

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.9 Deploy Snail Bait 540

19.10 Upload Files to a Server 542

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.5 Implement Sprite Behaviors 563

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