1 / 12

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

ash
Download Presentation

JavaScript and HTML5 Games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  4. 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);

  5. #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

  6. 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)

  7. #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);

  8. #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

  9. #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

  10. #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)

  11. #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?

  12. 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

More Related