www.it-ebooks.info www.it-ebooks.info PROFESSIONAL HTML5 Mobile Game Development Pascal Rettig www.it-ebooks.info Professional HTML5 Mobile Game Development Published by John Wiley & Sons, Inc 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2012 by Pascal Rettig Published by John Wiley & Sons, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-1-118-30132-6 ISBN: 978-1-118-30133-3 (ebk) ISBN: 978-1-118-42144-4 (ebk) ISBN: 978-1-118-43394-2 (ebk) Manufactured in the United States of America 10 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600 Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 7486008, or online at http://www.wiley.com/go/permissions Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose No warranty may be created or extended by sales or promotional materials The advice and strategies contained herein may not be suitable for every situation This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services If professional assistance is required, the services of a competent professional person should be sought Neither the publisher nor the author shall be liable for damages arising herefrom The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002 Wiley publishes in a variety of print and electronic formats and by print-on-demand Some material included with standard print versions of this book may not be included in e-books or in print-on-demand If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport wiley.com For more information about Wiley products, visit www.wiley.com Library of Congress Control Number: 2012942105 Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc and/or its affiliates, in the United States and other countries, and may not be used without written permission All other trademarks are the property of their respective owners John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book www.it-ebooks.info This book is dedicated to my wife, business partner, best friend, and all-around support system, Martha Thank You www.it-ebooks.info CREDITS EXECUTIVE EDITOR VICE PRESIDENT AND EXECUTIVE GROUP PUBLISHER Carol Long Richard Swadley PROJECT EDITOR Jennifer Lynn VICE PRESIDENT AND EXECUTIVE PUBLISHER Neil Edde TECHNICAL EDITOR Chris Ullman ASSOCIATE PUBLISHER Jim Minatel PRODUCTION EDITOR Christine Mugnolo PROJECT COORDINATOR, COVER Katie Crocker COPY EDITOR San Dee Phillips COMPOSITOR Jeff Lytle, Happenstance Type-O-Rama EDITORIAL MANAGER Mary Beth Wakefield PROOFREADER Nancy Carrasco FREELANCER EDITORIAL MANAGER Rosemarie Graham INDEXER Johnna VanHoose Dinse ASSOCIATE DIRECTOR OF MARKETING David Mayhew COVER DESIGNER Ryan Sneed MARKETING MANAGER Ashley Zurcher COVER IMAGE © Daniel Schweinert / iStockPhoto BUSINESS MANAGER Amy Knies PRODUCTION MANAGER Tim Tate www.it-ebooks.info ABOUT THE AUTHOR PASCAL RETTIG  is a lifelong programmer who got his start program- ming by writing BASIC games on the Apple II at the ripe age of Pascal has a Bachelor of Science and a Master of Engineering in computer science and electrical engineering from the Massachusetts Institute of Technology ’02 and has been hacking and building stuff on the web since 1995 Pascal built the HTML5 game-based language learning system GamesForLanguage.com in 2011 and is currently a partner at the interactive web agency Cykod He organizes one of the country’s oldest monthly HTML5 Game Development meetups in Boston each month and runs the HTML5 Game Development news site html5gamedevelopment.org ABOUT THE TECHNICAL EDITOR CHRIS ULLMAN  is a senior software developer at MIG, specializing in NET, and a technical editor/author, who has spent many years stewing in webrelated technologies, like a teabag left too long in the pot Coming from a computer science background, he gravitated toward MS solutions during the summer of ASP (1997) He cut his teeth on Wrox Press ASP guides, and since then he has edited or contributed to more than 30 books, most notably as lead author for Wrox’s bestselling Beginning ASP/ASP.NET 1.x/2 series These days he lives out on the moors of Cornwall and spends his non-computing time running, writing music, and attempting with his wife, Kate, to curb the enthusiasm of three very boisterous children www.it-ebooks.info www.it-ebooks.info ACKNOWLEDGMENTS I’D LIKE TO THANK MY WIFE,  Martha, who not only had to put up with me spending every moment of free time I had writing this book (while working on two startups) but also was gracious enough to design all the custom game art used in this book, ensuring that readers aren’t stuck with the dreaded curse of programmer art I’d also like to thank my family for supporting me in this endeavor and continuing to accept me as a family member despite my best efforts to lock myself away for the duration I’d like to particularly thank my editors, Carol Long, Jennifer Lynn, and San Dee Phillips, for helping a newbie author through the process of turning some pages of code into a cohesive book; and technical reviewer Chris Ullman, who did his best to ensure this book made it to print as error-free as possible Lastly, I’d like to thank the Boston HTML5 Game Development community Boston has an incredible technology community, and being around such motivated, smart people keeps me learning, energized, and constantly hacking away at new projects www.it-ebooks.info www.it-ebooks.info home icons – iPhone home icons, iOS devices, 104–105 Homebrew, 135 hosted apps, 484 creating, 484–486 hosting service, social games, 403–405 HTML, wrapper files, CSS3 RPG, 240–241 HTML5 best uses, 70–74 boilerplate, browser support, 72 Canvas, 74–75 engine history, 471–472 future, 68 history, 68 mobile devices and, 76 performance vagaries, 16 sniffing browsers, 70–71 standards, 69 HTTP-based multiplayer games, 388 Cow Clicker, 388–389 hud stage, 258–259 I IDE engines, 474 tag, SVG, 262 IIFE (immediately invoked function expression), 145 Image object, 188 tag, 266 ImageData object, 340–343 createImageData method, 346 getImageData method, 343 putImageData method, 346 image-rendering property (CSS), 299 images Canvas element, 301–302 drawing, 8–9 Canvas element, 306–307 server-side Canvas, 146–147 embedding, 266 opacity, 306 patterns, 303–304 retro games, 299 sprite sheets, startup, iOS devices, 103–104 upsampling, 299 tag Canvas element, 301–302 SVG, 262 Immediate mode, Impact engine, 473–474 implementation, Game object, 13–15 indexes, MongoDB, 401 in-game scrolling, 100 in-game zooming, 100 inheritance Class method, 160 component/entity model, 157–158 JavaScript, 10, 158–160 class functionality, 161 prototypical, 10 Quintus, 157–158 this._super( ) method, 160 innerHeight parameter, 59 innerWidth parameter, 59 input, cannon shooter game, 292–293 handling, 22–23 Quintus, 174–175 joypad controls, 181–184 keyboard events, 176–178 keypad controls, 178–181 onscreen, 184–186 testing, 186–188 touch controls, 178–181 input_test.html file, 187 installable web apps, 484 installation MongoDB, 396–397 Node, 134 Linux, 135 modules, 136 OS X, 135 Windows, 135 XDK (AppMobi), 490–491 interact event, 252 interact method, 249 interactive maps, 446–447 I/O, nonblocking, 134 iOS devices, 60 debugging, 129 home icons, 104–105 home screen configuration, 103–105 startup images, 103–104 web-app-capable, 103 iPhone browser resizing, 100 pixels, 101 viewport, 100–101 510 www.it-ebooks.info iterate method – LimeJS engine iterate method, 28 iteration object list, 27–28 projectiles, 334–335 jshint, 136–137 js/quintus_editor.js, 376–378 K J JavaScript, 10 callbacks, 85–86 compressing, 107 debugging, Chrome developer tools, 121–125 function( ) keyword, 86 functions, calling, 86 hinting code, jshint, 136–137 inheritance class functionality, 161 classical, 158–160 prototypical, 10 libraries, 82 scripts, creating, 137–141 SVG and, element creation, 271–272 this keyword, 86 uglify-js, 137 Join module, 142 join.when callback, 143 joypad input, 175 Quintus, 181–184 joypadControls method, 183 joypadTouch method, 183 jQuery library, 82 $ object, 83–84 AJAX, calls, 90–91 CDN (Content Delivery Network), 82–83 documentation, 85 DOM (Document Object Model), manipulating, 84–85 event handlers, binding, 87–90 hide( ) method, 84 loading on page, 82–83 methods, 84–85 getters, 84 setters, 84 proxy function, 87 remote servers, 90–91 Underscore.js accessing, 92 collections, 92–93 utility functions, 93–94 Zepto.js, 85 keyboard events, 176–178 keyboardControls, 178 keydown event, 14 keypad controls, Quintus, 178–181 keyup event, 14 keywords function( ), 86 this, 86 var, 107 KHTML, 78 KJS (KDE JavaScript engine), 78 L Lander game, 331 bootstrapping, 336–337 cave walls, 339–340 collisions, particle wall, 346–347 Explosion class, 343–345 physics engines, 332 pixels, 339–340 drawing, 345–346 projectiles, 333–334 iteration, 334–335 ship, building, 337–339 Ship class, 337–338 lander.html, 336–337 latency, 415–416 legend property, 244 level class, 44–47 Level object implementation, 47–49 step method, 47–48 level saving, 383–384 levels data, 45–46 enemies definition, 44–45 libcairo2-dev package, 139 libraries JavaScript, 82 jQuery, 82 Underscore.js, 82 LimeJS engine, 476–478 511 www.it-ebooks.info linear gradients – methods linear gradients, 303 lineWidth property, 306 Linux Node installation, 135 VMPlayer, 135 listeners, addEventListener method, loadedCallback, 194 loadImages method, 143, 144–146 loading, resource loading problems, 120 Local Storage, Developer Tools, 119 location plotting, geolocation, 444–445 locking device screen, 499 login, Blob Clicker, 393–395 login.ejs view file, 393–395 long polling server, 408 loops, GameBoard object, 26–27 ltr enemy, 45 M MacVim, 116 manifest file, offline play, 109–111 mass, 332 math, 332 matrix property, 267 methods added, 378 added method, 284 addEventListener, 4, 14 _addTile, 239 asset loading, 190–191 bind, 163–165 button, 378 calculateSize, 146 canPlayType, 458 canvas.toBuffer( ), 139 centerOn, 248 changeDirection, 364 changedTouches, 55 checkCollision, 341–343 Class, 160 clickUser, 400 collection.findOne, 400 collide, 30 computeDistanceBetween, 448 createImageData, 346 createShape, 275–276 debind, 165 detect, 27–28, 30 disableTouchControls, 180–181 DOMSprite, 223 DOMStage, 223 drag, 380 draw, 12 draw( ), 11 drawBlock, 355 drawImage, 8–9 nine-parameter version, 18 drawImages, 147–148 drawLine, 415 enableMobileSound, 464–466 Enemy step, 42–43 events, 379–381 extend, 160 fbAsyncInit, 394 fillRect, 17 fillText, 309 fire, 292 firePercentage, 62 fs.WriteFilSync, 139 Function.call, 211 GameBoard object, 28–29 Game.loop, 15 getContext, 7, 301 getCurrentPosition, 443–444 getImageData, 339 getTouch, 415 handleGuess, 436 handleResize( ), 99 heal, 252 hide( ), 84 hit, 41–42, 43 interact, 249 iterate, 28 joypadControls, 183 joypadTouch, 183 jQuery, 84–85 getters, 84 setters, 84 loadImages, 143, 144–146 newWord, 435 _normalizeArg, 153 Object.create, 47 onload, 145 Overlap, 208–209 overlap, 29 512 www.it-ebooks.info Microdata – mobile devices pause, 155 playGame, 30 positionError, 443 prerenderBlock, 355 putImageData, 346 Q.assetType, 189 Q.audioSprites, 465 Q.audio.start, 465 Q.audio.timer, 465 Q.gameLoop method, 155 Q.loadAssetImage, 191 Q.loadAssetOther, 191 Q.pauseGame, 156 Q.stageGameLoop, 213 Q.svgOnly, 277 Q.transitionDOM, 257 Quintus, 152 Quintus( ), 280 Q.unpauseGame, 156 randomSnowflake, 313 release, 380 reload, 62 reloadTime, 62 requestAnimationFrame, 15 resetRemoved, 27 sendGameUpdate, 435–436 setAttribute, 272 setAttributeNS, 272 setBoard, 53 setImage, 229 setTile, 351 _setTile, 239 setTimeout, 15 setTransform, 229, 275–276 setupDOM, 224 setupIntent( ), 14 setupMobile, 58–59 setupTiles, 382 socket.send, 409 spriter, 140–141, 143 StartGame, 12 startGame, 16 startGame( ), step, 19, 378 Level object, 47–48 step( ), 11 strokeText, 309 this._super( ), 160 tilePOS, 380 tilePos, 379–381 timer methods, 15 tool, 379–381, 380 topTen, 400 touch, 380 touchControls, 180–181 touchDispatch, 180 touchLocation, 180–181 trackTouch, 55 translate3d( ), 224–226 translateBuilder, 226 trigger, 164 unbind, 164–165 unfog, 255 unpause, 155 validTile, 240 watchPosition, 445–446 Microdata, 69 missiles colliding with enemies, 41–42 firing, 30 bullet sprite, 31–32 connecting to PlayerShip, 32–33 miterLimit property, 306 mobile audio, limitations, 459 mobile browsing, 77 Firefox, 79 Opera, 78–79 tablets, 79 WebKit, 78 WP7 Internet Explorer 9, 79 mobile devices Canvas, HTML5 and, 74–75 canvas, resizing, 97–98 CSS3, DOM and, 75 debugging, 129–131 DOM, CSS3 and, 75 frames per second rendering, 105 HTML5 and, 76 APIs, new, 77 WebAPI, 77 iPhone, browser resizing, 100 performance, 105 bandwidth optimization, 106–109 screen address bar removal, 101–103 fixed aspect ratio, 96 maximizing real estate, 96–103 SVG (Scalable Vector Graphics), 76 513 www.it-ebooks.info mobile support – objects mobile support, 51 iOS devices, 60 points, 60–61 score, 60–61 screen size and, 57–60 testing on devices, 56–57 Modernizr, 73 modules Express, 372–373 Futures, 141–142 Join, 142 Node, installation, 136 node-paperboy, 372–373 node-static, 372–373 Quintus.Editor, 376–379 Quintus.Input, 174–175 MongoDB Blob Clicker integration, 398–401 clickUser method, 400 collection.findOne method, 400 connecting to, command line, 397–398 indexes, 401 installation, 396–397 record creation, 398 topTen method, 400 moving enemies, 33–34 MovingSprite class, 335–336 Mozilla APIs, 500 AreWeFunYet, 500 multiplayer games HTTP-based, 388 Cow Clicker, 388–389 pong, Socket.io, 415–425 N navigator.geolocation.getCurrentPosition, 442–443 Network tab (Chrome developer tools), 119 resource loading problems, 120 slow requests, 120–121 new operator, 12 newWord method, 435 Node callbacks, 134 exports object, 140 fs.WriteFilSync method, 139 installation, 134 Linux, 135 OS X, 135 Windows, 135 modules, installation, 136 overview, 134 versions, 136 node-canvas, 135 canvas.toBuffer( ) method, 139 Node.js Development mode, 373 editors, 371 Express module, 372–373 node_modules directory, 373 Production mode, 373 server, 390–393 blob_clicker, 390–391 static assets and, 372–373 Twitter, connection, 429–431 node_modules directory, 136, 373 node-paperboy module, 372–373 node-static module, 372–373 nonblocking I/O, 134 _normalizeArg method, 153 Notepad++, 116 ntime, 108 ntwitter module, 429–430 client.stream method, 431 O tag, SVG, 262 object types, collisions and, 40–41 Object.create method, 47 objects $, 83–84 adding/removing, Quintus, 211 arguments, 28 Audio, game audio tags, 460 Box2D.Dynamics.b2World, implementing, 281–284 Deferred, 91 Enemy, 34–35 draw function, 35–36 refactoring, 39–40 step function, 35–36 EnemyMissile, 61–64 Explosion, 43 exports, 140 Game, 11 implementing, 13–15 GameBoard, 11 purpose, 26 GamePoints, 60–61 514 www.it-ebooks.info offline play – PositionError object Image, 188 ImageData, 340–343 iteration over, 27–28 Level, implementation, 47–49 PlayerMissiles, 31–32 refactoring, 39 PlayerShip, 22 connecting missiles, 32–33 refactoring, 38–39 PositionError, 443 Q.assetTypes, 189 socket, 411 Sprite, 37–38 SpriteSheet, 11 TouchControls, 52–53 offline play checking for browser online, 111 manifest file, 109–111 offset variable, 19 onload method, 145 onscreen input, Quintus, 184–186 OOP (object-oriented programming), 10 opacity of images, 306 open source engines Crafty.js, 475–476 EaselJS, 478–480 LimeJS, 476–478 OpenGL ES, 497–498 Opera, 78–79 operators, new, 12 optimizing code, 125–126 object creation, 128–129 orientation of devices, 449 orientationchange event, 102, 450 OrientationEvent, 451 OS X, Node installation, 135 Overlap method, 208–209 overlap method, 29 P packaged apps, 484, 486 package.json file, 138 editor and, 372 parallax scrolling, 328–330 tag, 265 paths, 265 drawing, 307–308 patterns, images, 303–304 pause method, 155 performance requirements, technology choices and, 222–223 performancing on mobile devices, 105 bandwidth optimization, 106–109 physics engines Box2D, 280–287 cannon shooter, 288–289 fire method, 292 Q.Cannon class, 291 Q.CannonBall sprite, 289 sprites, 290–292 user input, 292–293 description, 281 Lander-style game, 332 pixels Canvas element, 331 image upsampling, 299 ImageData object, 340–343 iPhone, 101 Lander-style game, 339–340 drawing, 345–346 size, CSS and, 298–300 platform.html, 352 platform.js file, 374–376 PlatformStage class, 360–361 Player class, 248–249 Player sprite, 366–368 player sprite, animated, 319 player_input component, 248 PlayerMissiles object, 31–32 refactoring, 39 PlayerShip object, 22 connecting missiles, 32–33 refactoring, 38–39 step function, 22–23 playGame function, 30 playing offline, manifest file, 109–111 points, 60–61 polling server, 388 long polling, 408 polyfill, 74 polygons, 265–266 polylines, 265–266 pong multiplayer game, Socket.io, 415–425 pong.js file, 420–421 positionError method, 443 PositionError object, 443 515 www.it-ebooks.info prerenderBlock method – Quintus prerenderBlock method, 355 primitives, SVG, 264 Production mode, 373 profiles, code optimization, 126–128 Profiles tab (Chrome Developer Tools), 126–128 programming, evented, 134 progressive enhancement, 73–74 projectiles, 333–334 iteration, 334–335 Promises, 138 sprite map generator, 142 properties fillStyle, 302–303 globalAlpha, 17, 306 image-rendering, 299 legend, 244 lineWidth, 306 miterLimit, 306 Q._animations, 322 referencing, 203 reload, 32–33 reloadTime, 32–33 strokeStyle, 302–303 touch events, 54 transform, 223, 264, 267 window.devicePixelRatio, 300 window.orientation, 450 protagonist, adding, 21 PlayerShip object, 22 proxy function, 87 publishing apps, 486–487 putImageData method, 346 Q Q.animations, 318 Q.audioSprites method, 465 Q.audio.start method, 465 Q.audio.timer method, 465 Q.CannonBall sprite, 289 Q.Component class, 167–168 Q.Enemy class, 363–364 Q.EnemyPaddle, 424 Q.Fountain class, 250–251 Q.gameLoop method, 155 Q.GameObject, 168–169 Q.Level class, 243–244, 253–255 Q.Loot class, 250–251 Q.options.sound, 465 Q.Paddle, 423 Q.PlayerHealth sprite, 258–259 Q.scene, 374 Q.Stat sprites, 257–258 Q.SVGStage class, 276–277 Q.Target object, 289 Q.transitionDOM method, 257 Quintus, 150 animation module, 320–323 play method, 322 quintus_anim.js, 323 step method, 322 testing, 323–325 asset loading, 188–189 Audio asset, 189–190 Image asset, 189–190 methods, 190–191 Other asset, 189–190 preload support, 194–195 specific assets, 189–191 type defining, 189 assets, referencing, 203 Audio loader, 191 audio system, 460–461 basic API, 150–151 bindKey, 177 Blockbreak, 203–207 Q.Block class, 215–216 quintus_scenes.js, 214–215 Scenes module, 214 canvas_test.html file, 173–174 clear method, 172–173 collision methods, 211–212 components, 165 API design, 166–167 implementing system, 167–169 defaults, 192 detect method, 211 disableTouchControls method, 180–181 DOM, 223 module bootstrapping, 223–224 each method, 211 eachInvoke method, 211 enableKeyboard, 178 engine structure, 152 Evented class, 162–165 Function.call method, 211 516 www.it-ebooks.info Quintus – Quintus.Sprites extension game loop testing, 155–157 timer, 153–154 adding, 154–155 inheritance, 157–158 input joypad controls, 181–184 keyboard events, 176–178 keypad controls, 178–181 onscreen, 184–186 subsystem, 174–175 testing, 186–188 touch controls, 178–181 joypadControls method, 183 joypadTouch method, 183 keyboardControls, 178 loadedCallback, 194 MovingSprite class, 335–336 _normalizeArg method, 153 objects, adding/removing, 211 Overlap method, 208–209 pause method, 155 properties, referencing, 203 Q._animations property, 322 Q.assetType method, 189 Q.assetTypes object, 189 Q.audioMimeTypes, 191 Q.collide method, 211 Q.gameLoop method, 155 Q.GameObject, 168–169 Q.InputSystem, 176–178 Q.load, 189 Q.loadAssetImage, 191 Q.loadAssetOther, 191 Q.Paddle sprite, 207 Q.pauseGame method, 156 Q.preload, 195 Q.scaleDOM method, 226 Q.sheets object, 198–200 Q.SVGSprite class, 274–275 Q.SVGStage class, 276–277 Quintus.DOM module Blockbreak test, 232–233 Canvas equivalents, 231–232 DOMSprite class, 228–230 DOMStage class, 230–231 DOMTileMap class, 236–240 implementing sprites, 227–230 starting, 223–224 transition support, 227 Quintus.Input module, 174–175 bootstrapping, 175–176 Q.unpauseGame method, 156 requirements, 150–151 Scenes module, 212 Blockbreak, 214 creating, 207–208 Q.scene helper method, 213 Q.Scene object, 207 Q.Stage class, 208–212 Q.Stage object, 207 Q.stageGameLoop method, 213 quintus_scenes.js file, 207–208 setup method, 172–173 setupDOM method, 224 Sprite class, writing, 201–203 sprite sheets loading, 199–200 SpriteSheet class, 198–199 tracking, 199–200 sprites, referencing, 203 SpriteSheet class, testing, 200–201 SVG module creating, 273 Q.svgOnly method, 277 sprites, 274–276 stage creation, 276–278 testing SVG class, 278–280 SVG support, 272 touchControls method, 180–181 touchDispatch method, 180 touchLocation method, 180–181 touchmove handler, 184 unpause method, 155 Quintus( ) method, 280 Quintus method, 152 Quintus.Editor module, 376–379 added method, 378 _bind.All method, 378 button method, 378 select method, 378 setFile method, 378 step method, 378 quintus_editor.js, 374, 379–381 Quintus.Input extension, 151 Quintus.Physics bootstrap, 282 Quintus.Scenes extension, 151 Quintus.Sprites extension, 151 517 www.it-ebooks.info radial gradients – scripts interact method, 249 Player class, 248–249 player_input component, 248 Q.Fountain class, 250–251 Q.Level class, 243–244, 253–255 Q.Loot class, 250–251 Q.PlayerHealth sprite, 258–259 Q.Stat sprite, 257–258 Q.transitionDOM method, 257 scrolling tile maps, 235–240 step event handler, 247 tiled component, 245–248 transition component, 247 R radial gradients, 303 randomSnowflake method, 313 real-time apps, 416–417 real-time communications, 499–500 records, creating, MongoDB, 398 tag, 265 rectangles, 265, 306 refactoring Enemy object, 39–40 PlayerMissile object, 39 PlayerShip object, 38–39 sprite classes, 37–40 release method, 380 reload method, 62 reload property, 32–33 reloadTime method, 62 reloadTime property, 32–33 Remote Debugging, 129 remote servers, calling, 90–91 rendering, sprites, frames per second, mobile devices, 105 Repeater sprite, 328–339 requestAnimationFrame API, 153–154 requestAnimationFrame method, 15 resetRemoved method, 27 resize.html, 98–99 resizing screen, 98–99 iPhone, 100 resource loading problems, 120 resources books, 501 web, 502 Resources tab (Chrome developer tools), 118–119 Retained mode, retro games, 299 reusable classes, extracting, 335–336 reusable script, 140–141 RLTiles, 241–242 rotate property, 267 RPG, CSS3 2-D tile frames, 238–239 bootstrapping, 241–242 camera component, 247–248 DOMTileMap class, 242–244 game setup, 241–242 health bar, 255–260 HTML wrapper file, 240–241 hud stage, 258–259 S save method, 383–384 scale, Box2D, 284 scale property, 267 scene graphs, selecting, 221–223 Scenes module (Quintus), 212 Blockbreak game, 214 creating, 207–208 Q.scene helper method, 213 Q.Stage class, 208–212 Q.stageGameLoop method, 213 score, 60–61 screen address bar, 101–103 full-screen APIs, 499 iOS devices, configuration, 103–105 locking, 499 mobile devices, 57–60 fixed aspect ratio, 96 maximizing real estate, 96–103 resizing, 98–99 scrolling, preventing, 99–100 title screen, zooming, preventing, 99–100 Screen Orientation API, 455–456 scribble client (Socket.io), 413–415 scribble server (Socket.io), 411–412 script, reusable, 140–141 Script tab (Chrome developer tools), 123–125 scripts creating, 137–141 package.json files, 138 running, 148 updating, 148 518 www.it-ebooks.info scrolling – spriter method scrolling background, 16–19 in-game, 100 parallax, 328–330 preventing, 99–100 tile maps, CSS3, 235–240 Secure WebSockets, 409 select method, 378 sendGameUpdate method, 435–436 servers auto-matching, 417–419 Node.js, 390–393 blob_clicker, 390–391 polling, 388 remote, calling, 90–91 scribble server (Socket.io), 411–412 server-side Canvas, 139–140 images, drawing, 146–147 setAttribute method, 272 setAttributeNS method, 272 setBoard method, 53 setFile method, 378 setImage method, 229 setInterval function, 153–154 setter methods, 84 setTile method, 351 _setTile method, 239 setTimeout method, 15, 153–154 setTransform method, 229, 275–276 setup method, Quintus, 172–173 setupDOM method, 224 setupIntent( ) method, 14 setupMobile function, 58–59 setupTiles method, 382 shadows, 314 Ship class, Lander-style game, 337–338 size, Canvas, calculating, 146 skewX property, 267 skewY property, 267 smartphones, Alien Invasion, sniffing, 70–71 snowflake generator, 311–313 social games Blob Clicker Facebook application generation, 389–390 Facebook authentication, 395–396 game.ejs file, 401–403 login, 393–395 MongoDB integration, 398–401 Node.js server, 390–393 Facebook authentication, 389 authentication testing, 395–396 blob_clicker, 390–391 channel.html file, 395 fbAsyncInit method, 394 FB.init method, 395 generating application, 389–390 login.ejs view, 393–395 Node.js server, 390–393 hosting service, 403–405 planning, 388–389 socket object, 411 Socket.io, 411 connection events, 411 pong multiplayer game, 415–425 scribble client, 413–415 scribble server, 411–412 socket object, 411 socket.emit, 411 socket.send method, 409 sound tag, 457, 458 Blockbreak game, 461–463 desktop sound engine, 459–463 formats supported, 458–459 mobile audio, limitations, 459 playback, basic, 458 Quintus audio system, 460–461 sprites, 463–466 audiosprites.json, 466–467 file generation, 466–468 Web Audio API, 498–499 Spaceport.io engine, 474 SpaceWords, 73 Sprite class, writing, 201–203 sprite classes Enemy, movement, 33–34 refactoring, 37–40 sprite map generator Futures module, 141–142 top down, 142–143 Sprite object, 37–38 Blockbreak, 203–207 spriteData parameter, 12 spriter method, 140–141 rewriting, 143 519 www.it-ebooks.info spriter.js file – SVG (Scalable Vector Graphics) spriter.js file, 139 exported, 140 sprites animation, 319 bullets, 31–32 DOM, implementing, 227–230 enemy_missile, 62 Player, 366–368 Q.CannonBall, 289 Q.PlayerHealth, 258–259 Q.Stat, 257–258 referencing, 203 Repeater, 328–339 sound sprites, 463–466 audiosprites.json, 466–467 file generation, 466–467 sprite sheets, loading, 11–13 Quintus, 198–200 SVG module (Quintus), adding, 274–276 tile map, extending, 253–255 tiled environment, 245–248 SpriteSheet class, 11–12, 198–199 testing, 200–201 SpriteSheet object, 11 sprite_sheet/index.html, 12 SpriteSheet.load, 12 spritesheet_test.html, 200–201 squares, 265 StarField class, 17, 18–19 starfields, drawing, 16 startGame( ) method, startGame function, 12 dummy, 16 startup images, iOS devices, 103–104 static assets, Node.js and, 372–373 step( ) method, 11 step enemy, 45 step event handler, 247 step function, 19, 378 Enemy object, 35–36 Level object, 47–48 PlayerShip object, 22–23 stroke properties (SVG), 267–270 stroke property, 268 stroke-linejoin property, 268 stroke-opacity property, 268 strokes Canvas element, 305–306 lineWidth property, 306 miterLimit property, 306 strokeStyle property, 302–303 strokeText method, 309 stroke-width property, 268 style.css file, 394 SVG (Scalable Vector Graphics), 69, 76, 261 attributes, 272 Canvas element, viewport, 325–327 tag, 265 circles, 265 element, 171 elements, grouping, 266–267 tag, 265 tag, 262 file example, 263 fill properties, 267–270 tag, 266 gradients, 268–269 tag, 262 tag, 266 images, embedding, 266 tag, 262 JavaScript, element creation, 271–272 tag, 262 tag, 265 paths, 265 physics and, 287–288 polygons, 265–266 polylines, 265–266 primitives, 264 Quintus, 272 tag, 265 rectangles, 265 setAttribute method, 272 setAttributesNS method, 272 squares, 265 stroke properties, 267–270 SVG module (Quintus) creating, 273 Q.svgOnly method, 277 sprites, adding, 274–276 stage, creating, 276–278 testing SVG class, 278–280 520 www.it-ebooks.info tag – transition support tag, 262 text, 266 tag, 266 transform property, 264, 267 viewBox, 264 tag, SVG, 262, 264–265 T tablets, mobile browsing and, 79 tags, , Canvas element, 301–302 targetTouches array, 54 TCP sockets, 408 technical debt, 37 technology choices, 221–223 testing CocoonJS on Android, 489 game loop (Quintus), 155–157 input, Quintus, 186–188 mobile devices, 56–57 SpriteSheet class, 200–201 text on canvas, drawing, 19–21 Canvas element, 308–309 fonts, 20–21 SVG, 266 text editors, 116 tag, 266 TextMate, 116 this keyword, JavaScript, 86 this._super( ) method, 160 tile frames 2-D, 238–239 _addTile method, 239 _setTile, 239 validTile, 240 tile maps extending, sprites and, 253–255 scrolling, 235–240 tiled component, 245–248 TileLayer class, 350–352 tilePos method, 379–381, 380 tiles 2-D platformer, TileLayer class, 350–352 functionality, 381–383 legend property, 244 prerendering, 354–355 sprites and, 245–248 TileSprite class, 245–248 timer methods, 15 timers loop timer, 153–154 Quintus, 154–155 setInterval function, 153–154 setTimeout function, 153–154 title screen, text on canvas, drawing, 19–21 TitleScreen class, 20–21 to-data-url.html, 301–302 tool method, 379–381, 380 touch controls changedTouches array, 54 drawing controls, 52–54 Quintus, 178–181 responding to events, 54–56 targetTouches array, 54 trackTouch method, 55 touch method, 380 TouchControls class touch tracking, 54–55 trackTouch method, 55 touchControls method, 180–181 TouchControls object, 52–53 draw method, 53 drawSquare method, 53 touchDispatch method, 180 touchend event, 54 touchLocation method, 180–181 touchmove event, 54 touchscreens, 51 touchstart event, 54 trackTouch method, 55 transform property, 223, 264, 267 transformation, Canvas element, 310–311 ctx.transform, 310 randomSnowflake method, 313 reset, 311 restore, 311 save, 311 snowflake generator, 311–313 transition component, 247 transition support, CSS3, Quintus, 227 521 www.it-ebooks.info translate ( ) method – wrapper files translate( ) method, 224–226 translate property, 267 translate3d( ) method, 224–226 translateBuilder method, 226 trigger method, 164 Twitter application creation, 427–428 Hangman game, 427–429 12dicts, 431–432 code, 433–435 handleGuess method, 436 newWord method, 435 random word generation, 431–432 sendGameUpdate method, 435–436 word.js, 432 incoming messages, 430–431 Node app connection, 429–431 ntwitter module, 429–430 client.stream method, 431 updateStatus, 430 user stream, 430–431 verifyCredentials, 430 typing, Duck, 10–11 U uglify-js, 137 unbind method, 164–165 Underscore.js accessing, 92 collections, 92–93 library, 82 utility functions, 93–94 unfog method, 255 unpause method, 155 updateStatus, 430 upsampling images, 299 US sniffing, 70–71 user stream, Twitter, 430–431 users, input, handling, 22–23 V variables, offset, 19 verifyCredentials, 430 versions, Node, 136 Vibration API, 500 viewBox, 264 viewport browser resizing, iPhone, 100–101 mobile devices, 57 viewport component, 325–327 VMPlayer, 135 VMWare, 135 W WAMP, testing and, mobile devices, 56–57 watchPosition method, 445–446 Web Audio API, 498–499 web resources, 502 Web SQL Database, 69 Web Storage, 69 Web Workers, 69 WebAPI, 77 web-app-capability for iOS devices, 103 WebGL, 7, 69, 497–498 web.js application stub, 391–392 WebKit, 78, 115 WebRTC, 499–500 WebSocket API, 408–411 echo.html file, 409–410 socket.send method, 409 websocket.org, 409 WebSockets, 69, 407–408 Flash and, 408 Secure WebSockets, 409 Socket.io, 411 Weinre, 129–131 WHATWG (Web Hypertext Application Technology Working Group), 68 width, wiggle enemy, 45 window.devicePixelRatio property, 300 window.orientation property, 450 Windows, Node installation, 135 wrapper files, CSS3 RPG, 240–241 validTile method, 240 var keyword, 107 522 www.it-ebooks.info XDK (AppMobi) – zooming X–Y–Z XDK (AppMobi) app creation, 491 installation, 490–491 XHTML 2.0, 68 Zepto.js, 85 zones, zooming in-game, 100 preventing, 99–100 523 www.it-ebooks.info Try Safari Books Online FREE for 15 days + 15% off for up to 12 Months* Read this book for free online—along with thousands of others— with this 15-day trial offer With Safari Books Online, you can experience searchable, unlimited access to thousands of technology, digital media and professional development books and videos from dozens of leading publishers With one low monthly or yearly subscription price, you get: • Access to hundreds of expert-led instructional videos on today’s hottest topics • Sample code to help accelerate a wide variety of software projects • Robust organizing features including favorites, highlights, tags, notes, mash-ups and more • Mobile access using any device with a browser • Rough Cuts pre-published manuscripts START YOUR FREE TRIAL TODAY! Visit my.safaribooksonline.com/wrox53 to get started *Available to new subscribers only Discount applies to the Safari Library and is valid for first 12 consecutive monthly billing cycles Safari Library is not available in all countries www.it-ebooks.info ...www.it-ebooks.info PROFESSIONAL HTML5 Mobile Game Development Pascal Rettig www.it-ebooks.info Professional HTML5 Mobile Game Development Published by John Wiley & Sons,... one of the country’s oldest monthly HTML5 Game Development meetups in Boston each month and runs the HTML5 Game Development news site html5gamedevelopment.org ABOUT THE TECHNICAL EDITOR CHRIS... II: MOBILE HTML5 CHAPTER 4: HTML5 FOR MOBILE 67 Introduction 67 Capturing a Brief History of HTML5 68 Understanding How HTML5 Grew Up “Different” Looking Toward HTML6? HTML7? Nope, Just HTML5