Register your product to gain access to bonus material or receive a coupon.
Core HTML5 2D Game Programming
- By David Geary
- Published Jul 11, 2014 by Pearson. Part of the Core Series series.
Book
- Sorry, this book is no longer in print.
About
Features
- Detailed step-by-step explanations and complete code samples teach all aspects of implementing an arcade-style game, from start to finish
- Covers the Canvas 2D API, animation timing controls, audio, CSS3 transitions, sound and music, physics and collision detection, Heads-Up Displays, and more
- Explains how to make games run on mobile devices
- Walks through deploying the game to a server and communicating with it to transmit high scores and in-game statistics
Description
- Copyright 2015
- Dimensions: 7" x 9-1/8"
- Edition: 1st
- Book
- ISBN-10: 0-13-356424-X
- ISBN-13: 978-0-13-356424-2
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.
Sample Content
Online Sample Chapter
Introduction to Core HTML5 2D Game Programming
Sample Pages
Download the sample pages (includes Chapter 1 and Index)
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
More Information
Other Things You Might Like
- Online Video $319.99