Coding Your First HTML5 Game Randy Hoyt @randyhoyt randyhoyt.com/launchgame @randyhoyt Overview • Code • HTML5 • Games @randyhoyt Overview • Games • HTML5 • Code @randyhoyt Games Games • Games are fun I love games! @randyhoyt A Theory of Fun (2004), by Ralph Koster Games • Games are fun • Games are everywhere I love games! @randyhoyt Homo Ludens (1938), by Johan Huizinga Games • Games are fun • Games are everywhere • Games exercise the brain I love games! @randyhoyt Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, memory, mental imagery, and incentive and reward processing. Brain Workout, Life Optimizer, http://trhou.se/WHkaR7 Brain Workout, Life Optimizer, http://trhou.se/WHkaR7 Games • Games are fun • Games are everywhere • Games exercise the brain • Games are practice for the real world I love games! @randyhoyt 7 TED Talks on Gaming, http://trhou.se/gamesTED Games And Me @randyhoyt HTML5 Buzzword Alert! HTML5 and Related Technologies • Canvas @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets • SVG @randyhoyt HTML5 Games It’s official: with HTML5 today the browser has become a full- fledged gaming platform. HTML5 Gaming, http://html5rocks.com/gaming Behind the Scenes, http://www.cuttherope.ie/dev/ HTML5 Games • Top 10 HTML5 games of 2012 http://trhou.se/gamesin2012 • Goko • Game Closure Devkit • Famo.us - http://tcrn.ch/ZfCuNh @randyhoyt Code Project Structure HTML CSS JavaScript @randyhoyt Project Structure HTML CSS JavaScript @randyhoyt Project Structure HTML CSS JavaScript @randyhoyt Project Structure HTML CSS JavaScript @randyhoyt HTML CSS Canvas Preview Canvas and Context Image in JavaScript requestAnimationFrame update function update function Game Logic: Init (Once), Update (Loop) init update fillRect One wall in the browser fillRect Five walls in the browser drawImage Frog variables Frog in the browser Five walls in the browser clearRect clearRect Game Logic: Init (Once), Update (Loop) init update Game Logic: Move update init Game Logic: Update, Render, Loop update init render Game Logic • Init - Place Frog - Place Obstacles • Update - Move • Render @randyhoyt Game Logic: Bind Events • Init - Bind Events - Place Frog - Place Obstacles • Update - Move • Render @randyhoyt Game Logic: Place Badges • Init - Bind Events - Place Frog - Place Obstacles - Place Badges • Update ... @randyhoyt Game Logic: Update ... • Update - Check for Movement - Check for Obstacles - Move - Check for Badges • Render @randyhoyt Game Logic: Check for Victory ... • Update ... ... • Render • Check for Victory @randyhoyt Game Preview HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure • CocoonJS ... and many more! @randyhoyt HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure • CocoonJS Game Engine Comparison, http://trhou.se/gamecompare@randyhoyt LimeJS • Free and Open Source • Uses DOM or Canvas • Built on Google Closure • Requires Python • Incompatible with CocoonJS @randyhoyt > bin/lime.py create treehouse HTML Starting JavaScript File Create Director Director Settings Scene Blank Canvas Comments Game Background Sprite appendChild Create Analog Stick Sprite Preview Game Preview Game With Inspector Preview Game With Console Add Four Button Sprites Frog Constructor Frog Properties Require Frog > bin/lime.py update Constants appendChild Frog Game Logic: Init, Render init render Create Walls and Badges appendChild: Walls and Badges Game Preview Add Event for UP Button Frog: startMovement Game Logic: Schedule Manager init update render Schedule Manager Game Logic: Check Movement update init ? render Add Events to All Buttons checkMovement Game Logic: Check Movement update init ? render Game Logic: Check Movement update init ? render Game Logic: Check for Obstacle update ? init ? render Determine all four corners Loop through all the walls Determine the wall’s corners If the frog’s right would be right of the wall’s left ... ... and if the frog’s left would be left of the wall’s right ... ... and if the frog’s top would be above the wall’s bottom ... ... and if the frog’s bottom would be below the wall’s top ... ... then the frog and the wall would overlap. Checking for a collision Early return on collision Game Logic: Check for Obstacle update ? init ? render Game Logic: Check for Obstacle update ? init ? render Game Logic: Check for Obstacle update ? init ? render Game Logic: Check for Badge update ? ? init ? render Keep track of badges earned Check for collision with badge Increment badges earned Game Logic: Check for Badge update ? ? init ? render Game Logic: Check for Badge update ? ? + init ? render Game Logic: Check for Victory update ? ? + init ? ? ` render Check for a victory Check for a victory Game Logic: Check for Victory update ? ? + init ? ? ` render Game Logic: Reset on Victory update ? ? + init ? ? ` render > bin/lime.py build treehouse -o treehouse/treehouse-min.js randyhoyt.com/launchgame @randyhoyt.