Want to start building great web games with HTML5 and JavaScript? Moving from Flash or other game platforms? Already building HTML5 games and want to get better and faster at it? This guide brings together everything you need: expert guidance, sample projects, and working code!
Evan Burchard walks you step-by-step through quickly building 10 popular types of games. Each chapter implements a game within a well-understood genre; introduces a different free, open source, and easy-to-use HTML5 game engine; and is accompanied with full JavaScript source code listings.
Each game recipe uses tested and well-proven patterns that address the development challenges unique to that genre, and shows how to use existing tools and engines to build complete substantial game projects in just hours. Need a quick JavaScript primer? Evan Burchard provides that, too!
Coverage includes
• Mastering an essential HTML5/JavaScript game development toolset: browser, text editor, terminal, JavaScript console, game engine, and more
• Accelerating development with external libraries and proven patterns
• Managing browser differences between IE, Firefox, and Chrome
• Getting up to speed on web development with a QUIZ game built with JavaScript, HTML, CSS, and JQuery
• Creating INTERACTIVE FICTION “gamebooks” that leverage new CSS3 features and impress.js
• Building PARTY games around the lightweight atom.js engine
• Developing PUZZLE games with the easel.js graphics rendering engine
• Writing PLATFORMERS with melon.js and its integrated tilemap editor
• Coding intense 2-player FIGHTING games for web browsers with game.js
• Building a SPACE SHOOTER with the jQuery-based gameQuery game engine
• Implementing pseudo-3D techniques like ray casting for an FPS (First Person Shooter) style game
• Producing a 16 bit RPG (Role Playing Game) complete with interfaces for dialog, inventories, and turn-based battles with enchant.js
• Building an isometric RTS (Real Time Strategy) game that incorporates server components along with node.js, socket.io, and crafty.js
• Engaging players with content that encourages exploration
Turn to The Web Game Developer’s Cookbook for proven, expert answers–and the code you need to implement them. It’s all you need to jumpstart any web game project!
Table of Contents:
Preface xiv
Acknowledgments xv
About the Author xvi
Introduction 1
Audience for This Book 2
Coding Style Conventions Used In This Book 2
How This Book Is Organized 3
How To Use This Book 4
1 Quiz 5
Recipe: Making the Questions 6
Recipe: Hiding and Showing Your Quiz 12
Recipe: Getting Your Questions Back 14
Recipe: The Shopping List 16
Recipe: Which Answers Are Correct? 21
Summary 24
2 Interactive Fiction (Zork, Choose Your Own Adventure Books) 27
Recipe: Styled Pages 28
Recipe: Goto Page 32
Recipe: Adding an Inventory with Drag and Drop 35
Recipe: Adding Complex Interactions 43
Recipe: Breadcrumb Trail 53
Recipe: A Dramatic Ending 56
Summary 58
3 Party (Rock Band, Mario Party) 59
Recipe: Creating a Sample Game in atom.js 60
Recipe: Drawing with Canvas 65
Recipe: Drawing Holes 67
Recipe: Drawing a Mole 70
Recipe: Putting the Moles in the Holes 73
Recipe: Dynamic Mole Peeking 77
Recipe: Bopping Moles 78
Wallowing in Despair with HTML5’s
Summary 84
4 Puzzle (Bejeweled) 85
Recipe: Rendering with easel.js 87
Recipe: Rendering More Than One Thing 91
Recipe: Creating Pairs 95
Recipe: Matching and Removing Pairs 97
Recipe: Hiding and Flipping the Pictures 100
Recipe: Winning and Losing 102
Recipe: Caching and Performance 106
Recipe: Matching Pairs Instead of Duplicates 109
Summary 115
5 Platformer (Super Mario Bros, Sonic the Hedgehog) 117
Getting Started with melon.js 118
Recipe: Creating a Tiled Map 118
Recipe: Starting the Game 120
Recipe: Adding a Character 124
Recipe: Building a Collision Map 127
Recipe: Walking and Jumping 128
Recipe: Title Screen 129
Recipe: Adding Collectables 131
Recipe: Enemies 133
Recipe: Powerups 135
Recipe: Losing, Winning, and Information 136
Summary 138
6 Fighting (Street Fighter II) 141
Recipe: Getting Started with game.js 142
Recipe: Accessing Individual Sprites from a Spritesheet 145
Recipe: Handling Input from Two Players 147
Recipe: Moving and Changing Forms 150
Recipe: Nonblocking Input 154
Recipe: Implementing Bitmasks 157
Recipe: Masking Collisions 161
Recipe: Giving and Taking Damage 164
Summary 170
7 Shooter (Gradius) 171
Some Background Info on Rendering 172
Recipe: Getting Started with gameQuery 174
Recipe: Adding “Enemies” 176
Recipe: Making Your Ship 180
Recipe: Enemy Collisions 183
Recipe: Shooting 184
Recipe: Powerups 187
Summary 190
8 FPS (Doom) 193
Recipe: Getting Started with Jaws 194
Recipe: Creating a 2-D Map 196
Recipe: Adding a Player 199
Recipe: Raycasting Top View 203
Recipe: Fake 3D with Raycasting 208
Recipe: Adding a Camera 212
Recipe: Making the World a More Photogenic Place 216
Recipe: Adding a Friend or Foe 221
Summary 229
9 RPG (Final Fantasy) 231
Recipe: Getting Started with enchant.js 232
Recipe: Creating a Map 233
Recipe: Adding the Player 237
Recipe: Adding a Collision Layer 243
Recipe: Status Screen 244
Recipe: Talking to NPCs 248
Recipe: Creating an Inventory 251
Recipe: Creating a Shop 254
Recipe: Creating a Battle Interface 263
Recipe: Saving Your Game with HTML5’s Local Storage API 274
Summary 277
10 RTS (Starcraft) 279
We Need a Server 280
Recipe: Getting Node 282
Recipe: Real Time with Socket.io 285
Recipe: Creating an Isometric Map with crafty.js 288
Recipe: Drawing the Units 291
Recipe: Moving Units 295
Recipe: Player Specific Control and Visibility 299
Recipe: Collisions for Destruction and Revelation 305
Summary 310
11 Leveling Up 313
What Happened? 314
What’s Next? 314
A JavaScript Basics 317
Main Types of APIs in JavaScript 318
The Native API 318
The Implementation API 318
A Library API 318
Your API 319
Statements 319
Variables 319
Strings 320
Numbers 320
Arrays 321
Functions 321
Objects 322
Conditionals 323
Loops 323
Comments 324
B Quality Control 325
Browser Debugging Tools 326
Testing 328
Collaboration for Better Code 329
C Resources 331
Game Engines 332
Text Editors 333
Browsers 334
Assorted Tools 334
Art Creation/Finding 335
Demos and Tutorials 336
Books 336
Websites 337
Index 339
