JavaScript and HTML5 Games

A Presentation by Kyle Kelly For the Windows 8 Store JavaScript and HTML5 Games

Required features • Privacy policy • Snapped view • Download the HTML5 Game Starter Kit – has empty code for all the required items

Perform Game Logic & Update • Game logic • Move objects • Determine collisions • Update scores • etc • stage.Update() • Redraws the screen

Time-based, not event-based • Everything happens in the Update event of the Stage object • stage = new createjs.Stage(canvas); • Time is controlled by the Ticker • createjs.Ticker.setInterval(window.requestAnimationFrame); • createjs.Ticker.addListener(gameLoop);

#1 Games Need Graphics • In Initialize, must put graphics info in manifest:var manifest = [{ id: "logoScreen", src: "images/GFX/LogoScreen.png" } ]; • preload.loadManifest(manifest); • Images are loaded later

Loading Images • logoScreenImage = preload.getResult("logoScreen").result; • logoScreenBitmap = new createjs.Bitmap(logoScreenImage); • logoScreenBitmap.scaleX = scaleW; • logoScreenBitmap.scaleY = scaleH; • stage.addChild(logoScreenBitmap); • UNTIL SCALE IS SET, NO HEIGHT / WIDTH CAN BE READ (isCollision code)

#2 Event Listeners • Can add to canvas • canvas.addEventListener("MSPointerUp", pointerUp, false); • Or HTML object • document.getElementById("cmdHome").addEventListener("click", showMenu, false); • And can remove • accelerometer.removeEventListener("shaken", onShakenAccel);

#3 The Actual Game Code! • Logic must work like a film frame • What’s different • Where is the object now • Can use + or – current location or set new location • Is the object visible • Is it *currently* interacting with another object • Event logic gives you info, but the information is acted upon in the game code

#4 Attach Events to Objects • In this case, the “event” is the touch location. xRange and yRange are the checks to see if the touch interacts with an object (for this game, a bowling ball) • if ((event.x >= xRange1) && (event.x <= xRange2)) AND • if ((event.y >= yRange1) && (event.y <= yRange2)) • Means the ball has been grabbed

#5 Create the game objects • Game objects often need the following • Reference to their images (gfx) • Current scale • Relative size • Starting position • Exposed properties (height, width, size, positionX, positionY) • Exposed functions (move, fire, explode)

#6 Execute Game Logic • This is what the game does. For the bowling game, it determines if the pins have been hit • If pin is hit, hide pin and increase score. Turn off ability to increase score until pin is unhid • Remember, if an object is just invisible (not destroyed), it will be hit many, many times as the screen refreshes 30 or 40 times a second. • How else could I score 4000+ while bowling?

Q&A & Reference Links • ??? • Code available at: https://bitbucket.org/kyleskelly/uberbowl • easeljs.com • github.com/bebraw/jswiki/wiki/game-engines • http://www.techtronic.us/technology/remote-debugging-with-visual-studio-2012-and-a-surface/ • Gestures: http://msdn.microsoft.com/en-us/library/windows/apps/jj709933.aspx

JavaScript and HTML5 Games