Transcription

Praise for The Web GameDeveloper’s Cookbook“The Web Game Developer’s Cookbook is a fun hands-on introduction both to building gamesand to web technologies. Learning through making is an empowering, exciting first step.”—Jonathan BeilinDIY.org“It is not only a book about libraries: it teaches how web pages work, how games work, andhow to put everything together. Study one, learn three: best deal ever.”—Francesco “KesieV” CottoneWeb Alchemist, and Technical Advisor at Vidiemme Consulting“A wonderful overview of the HTML5 Game Development landscape, covering a wide range oftools and 10 different game genres.”—Pascal RettigAuthor of Professional Mobile HTML5 Game Development“With a friendly and reassuring tone, Burchard breaks down some of the most well-knowngaming genres into their basic ingredients. The Web Game Developer’s Cookbook transformsa seemingly daunting task into an approachable crash course even for those who’ve neverwritten a line of code before.”—Jason Tocci, Ph.D.Writer, Designer, and Researcher

This page intentionally left blank

The Web GameDeveloper’s Cookbook

This page intentionally left blank

The Web GameDeveloper’s CookbookUsing JavaScript and HTML5 to Develop GamesEvan BurchardUpper Saddle River, NJ Boston Indianapolis San FranciscoNew York Toronto Montreal London Munich Paris MadridCapetown Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their productsare claimed as trademarks. Where those designations appear in this book, and thepublisher was aware of a trademark claim, the designations have been printed with initialcapital letters or in all capitals.The author and publisher have taken care in the preparation of this book, but make noexpressed or implied warranty of any kind and assume no responsibility for errors oromissions. No liability is assumed for incidental or consequential damages in connectionwith or arising out of the use of the information or programs contained herein.The publisher offers excellent discounts on this book when ordered in quantity for bulkpurchases or special sales, which may include electronic versions and/or custom coversand content particular to your business, training goals, marketing focus, and brandinginterests. For more information, please contact:U.S. Corporate and Government Sales(800) [email protected] sales outside the United States, please contact:International [email protected] us on the Web: informit.com/awLibrary of Congress Cataloging-in-Publication Data is on file.Copyright 2013 Pearson Education, Inc.All rights reserved. Printed in the United States of America. This publication is protectedby copyright, and permission must be obtained from the publisher prior to any prohibitedreproduction, storage in a retrieval system, or transmission in any form or by any means,electronic, mechanical, photocopying, recording, or likewise. To obtain permission touse 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 youmay fax your request to (201) 236-3290.Editor-in-ChiefMark TaubAcquisitions EditorLaura LewinDevelopment EditorSonglin QiuManaging EditorKristy HartProject EditorAndy BeasterCopy EditorApostrophe EditingServicesIndexerCheryl LenserProofreaderSarah KearnsTechnical ReviewersJonathan BeilinRich JonesJason TocciEditorial AssistantOlivia BasegioInterior DesignerKim ScottISBN-13: 9780321898388ISBN-10: 0321898389Cover DesignerChuti PrasertsithText printed in the United States on recycled paper at RR Donnelley, Crawfordsville, IN.First printing: March 2013CompositorNonie Ratcliff

For Jade

This page intentionally left blank

ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvAbout the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviIntroduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Audience for This Book. . . . . . . . . . . . . . .Coding Style Conventions Used In This Book.How This Book Is Organized . . . . . . . . . . .How To Use This Book . . . . . . . . . . . . . . .22341 Quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Recipe: Making the Questions . . . . . .Recipe: Hiding and Showing Your QuizRecipe: Getting Your Questions Back. .Recipe: The Shopping List. . . . . . . . .Recipe: Which Answers Are Correct? . .Summary . . . . . . . . . . . . . . . . . . .612141621242 Interactive Fiction (Zork, Choose Your OwnAdventure Books) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Recipe: Styled Pages . . . . . . . . . . . . . . . . . . .Recipe: Goto Page . . . . . . . . . . . . . . . . . . . . .Recipe: Adding an Inventory with Drag and Drop.Recipe: Adding Complex Interactions . . . . . . . .Recipe: Breadcrumb Trail . . . . . . . . . . . . . . . .Recipe: A Dramatic Ending . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . .283235435356583 Party (Rock Band, Mario Party) . . . . . . . . . . . . . . . . . . . . . . 59Recipe: Creating a Sample Game in atom.jsRecipe: Drawing with Canvas. . . . . . . . . .Recipe: Drawing Holes . . . . . . . . . . . . . .Recipe: Drawing a Mole . . . . . . . . . . . . .Recipe: Putting the Moles in the Holes. . . .Recipe: Dynamic Mole Peeking . . . . . . . .606567707377

Recipe: Bopping Moles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Wallowing in Despair with HTML5’s audio tag . . . . . . . . . . . . 82Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 844 Puzzle (Bejeweled) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Recipe: Rendering with easel.js . . . . . . . . .Recipe: Rendering More Than One Thing . . .Recipe: Creating Pairs . . . . . . . . . . . . . . .Recipe: Matching and Removing Pairs . . . . .Recipe: Hiding and Flipping the Pictures . . .Recipe: Winning and Losing . . . . . . . . . . .Recipe: Caching and Performance . . . . . . .Recipe: Matching Pairs Instead of DuplicatesSummary . . . . . . . . . . . . . . . . . . . . . . . 87. 91. 95. 97.100.102.106.109. 1155 Platformer (Super Mario Bros, Sonic the Hedgehog) . . . . . . 117Getting Started with melon.js . . . . . . . .Recipe: Creating a Tiled Map . . . . . . . . .Recipe: Starting the Game . . . . . . . . . .Recipe: Adding a Character . . . . . . . . . .Recipe: Building a Collision Map . . . . . . .Recipe: Walking and Jumping . . . . . . . .Recipe: Title Screen . . . . . . . . . . . . . . .Recipe: Adding Collectables . . . . . . . . .Recipe: Enemies . . . . . . . . . . . . . . . . .Recipe: Powerups . . . . . . . . . . . . . . . .Recipe: Losing, Winning, and InformationSummary . . . . . . . . . . . . . . . . . . . . . 118. 118.120.124.127.128.129.131.133.135.136.1386 Fighting (Street Fighter II) . . . . . . . . . . . . . . . . . . . . . . . . 141Recipe: Getting Started with game.js. . . . . . . . . . . . .Recipe: Accessing Individual Sprites from a Spritesheet.Recipe: Handling Input from Two Players . . . . . . . . . .Recipe: Moving and Changing Forms . . . . . . . . . . . .Recipe: Nonblocking Input . . . . . . . . . . . . . . . . . . .Recipe: Implementing Bitmasks . . . . . . . . . . . . . . . .Recipe: Masking Collisions . . . . . . . . . . . . . . . . . . .Recipe: Giving and Taking Damage . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xCONTENTS.142.145.147.150.154.157.161.164.170

7Shooter (Gradius) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Some Background Info on Rendering . . .Recipe: Getting Started with gameQuery .Recipe: Adding “Enemies”. . . . . . . . . . .Recipe: Making Your Ship . . . . . . . . . . .Recipe: Enemy Collisions . . . . . . . . . . .Recipe: Shooting. . . . . . . . . . . . . . . . .Recipe: Powerups . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . .172. 174.176.180.183.184.187.1908 FPS (Doom). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193Recipe: Getting Started with Jaws. . . . . . . . . . . .Recipe: Creating a 2-D Map . . . . . . . . . . . . . . . .Recipe: Adding a Player . . . . . . . . . . . . . . . . . .Recipe: Raycasting Top View . . . . . . . . . . . . . . .Recipe: Fake 3D with Raycasting. . . . . . . . . . . . .Recipe: Adding a Camera . . . . . . . . . . . . . . . . .Recipe: Making the World a More Photogenic PlaceRecipe: Adding a Friend or Foe. . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . .194.196.199203208.212.216.2212299 RPG (Final Fantasy) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Recipe: Getting Started with enchant.js . . . . . . . . . . . . .Recipe: Creating a Map. . . . . . . . . . . . . . . . . . . . . . . .Recipe: Adding the Player . . . . . . . . . . . . . . . . . . . . . .Recipe: Adding a Collision Layer . . . . . . . . . . . . . . . . . .Recipe: Status Screen . . . . . . . . . . . . . . . . . . . . . . . .Recipe: Talking to NPCs . . . . . . . . . . . . . . . . . . . . . . .Recipe: Creating an Inventory . . . . . . . . . . . . . . . . . . .Recipe: Creating a Shop . . . . . . . . . . . . . . . . . . . . . . .Recipe: Creating a Battle Interface . . . . . . . . . . . . . . . .Recipe: Saving Your Game with HTML5’s Local Storage APISummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232.233.237.243244248.251254.263.274.27710 RTS (Starcraft). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279We Need a Server . . . . . . . . . . . . . . . . . . . .Recipe: Getting Node. . . . . . . . . . . . . . . . . .Recipe: Real Time with Socket.io . . . . . . . . . .Recipe: Creating an Isometric Map with crafty.js.280282285288CONTENTSxi

Recipe: Drawing the Units. . . . . . . . . . . . . . . .Recipe: Moving Units . . . . . . . . . . . . . . . . . . .Recipe: Player Specific Control and Visibility . . . .Recipe: Collisions for Destruction and Revelation.Summary . . . . . . . . . . . . . . . . . . . . . . . . . .291295299305.31011 Leveling Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313What Happened? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314What’s Next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314A JavaScript Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317Main Types of APIs in JavaScript .The Native API . . . . . . . . . .The Implementation API. . . .A Library API . . . . . . . . . . .Your API . . . . . . . . . . . . . .Statements . . . . . . . . . . . . . .Variables . . . . . . . . . . . . . . . .Strings . . . . . . . . . . . . . . . . .Numbers. . . . . . . . . . . . . . . .Arrays. . . . . . . . . . . . . . . . . .Functions . . . . . . . . . . . . . . .Objects. . . . . . . . . . . . . . . . .Conditionals . . . . . . . . . . . . .Loops . . . . . . . . . . . . . . . . . .Comments . . . . . . . . . . . . . 23.323.324B Quality Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Browser Debugging Tools. . . . . . . . . . . . . . . . . . . . . . . . . . .326Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328Collaboration for Better Code . . . . . . . . . . . . . . . . . . . . . . . .329C Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331Game Engines . . . .Text Editors . . . . . .Browsers . . . . . . . .Assorted Tools . . . .Art Creation/FindingxiiCONTENTS.332.333334334.335

Demos and Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336Books . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339CONTENTSxiii

PREFACEWhen I was little, I learned that fun comes in plastic cartridges from Japan, stamped with the“Official Nintendo Seal of Quality,” and smelling of Styrofoam. Challenge, discovery, and companionship were all bundled together in a magical box that output entertainment when youput these littler boxes