html5game presentation
TRANSCRIPT
![Page 1: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/1.jpg)
@randyhoyt
Randy Hoyt
Coding Your First HTML5 Game
![Page 2: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/2.jpg)
@randyhoyt
randyhoyt.com/launchgame
![Page 3: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/3.jpg)
@randyhoyt
• Code
• HTML5
• Games
Overview
![Page 4: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/4.jpg)
@randyhoyt
• Games
• HTML5
• Code
Overview
![Page 5: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/5.jpg)
Games
![Page 6: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/6.jpg)
@randyhoyt
• Games are fun
Games
I love games!
![Page 7: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/7.jpg)
A Theory of Fun (2004), by Ralph Koster
![Page 8: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/8.jpg)
@randyhoyt
• Games are fun
• Games are everywhere
Games
I love games!
![Page 9: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/9.jpg)
Homo Ludens (1938), by Johan Huizinga
![Page 10: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/10.jpg)
@randyhoyt
• Games are fun
• Games are everywhere
• Games exercise the brain
Games
I love games!
![Page 11: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/11.jpg)
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
![Page 12: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/12.jpg)
Brain Workout, Life Optimizer, http://trhou.se/WHkaR7
![Page 13: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/13.jpg)
![Page 14: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/14.jpg)
@randyhoyt
• Games are fun
• Games are everywhere
• Games exercise the brain
• Games are practice for the real world
Games
I love games!
![Page 15: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/15.jpg)
7 TED Talks on Gaming, http://trhou.se/gamesTED
![Page 16: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/16.jpg)
@randyhoyt
Games And Me
![Page 17: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/17.jpg)
HTML5
![Page 18: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/18.jpg)
Buzzword Alert!
![Page 19: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/19.jpg)
@randyhoyt
• Canvas
HTML5 and Related Technologies
![Page 20: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/20.jpg)
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
HTML5 and Related Technologies
![Page 21: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/21.jpg)
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
• WebSocket http://trhou.se/introwebsockets
HTML5 and Related Technologies
![Page 22: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/22.jpg)
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
• WebSocket http://trhou.se/introwebsockets
• SVG
HTML5 and Related Technologies
![Page 23: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/23.jpg)
HTML5 Games
![Page 24: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/24.jpg)
It’s official: with HTML5 today the
browser has become a full-
fledged gaming platform.
HTML5 Gaming, http://html5rocks.com/gaming
![Page 25: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/25.jpg)
![Page 26: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/26.jpg)
Behind the Scenes, http://www.cuttherope.ie/dev/
![Page 27: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/27.jpg)
@randyhoyt
• Top 10 HTML5 games of 2012 http://trhou.se/gamesin2012
• Goko
• Game Closure Devkit
• Famo.us - http://tcrn.ch/ZfCuNh
HTML5 Games
![Page 28: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/28.jpg)
Code
![Page 29: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/29.jpg)
@randyhoyt
Project Structure
CSS JavaScriptHTML
![Page 30: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/30.jpg)
@randyhoyt
Project Structure
CSS JavaScriptHTML
![Page 31: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/31.jpg)
@randyhoyt
Project Structure
CSS JavaScriptHTML
![Page 32: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/32.jpg)
@randyhoyt
Project Structure
CSS JavaScriptHTML
![Page 33: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/33.jpg)
HTML
![Page 34: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/34.jpg)
CSS
![Page 35: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/35.jpg)
Canvas Preview
![Page 36: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/36.jpg)
Canvas and Context
![Page 37: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/37.jpg)
Image in JavaScript
![Page 38: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/38.jpg)
requestAnimationFrame
![Page 39: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/39.jpg)
update function
![Page 40: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/40.jpg)
update function
![Page 41: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/41.jpg)
Game Logic: Init (Once), Update (Loop)
init update
![Page 42: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/42.jpg)
fillRect
![Page 43: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/43.jpg)
One wall in the browser
![Page 44: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/44.jpg)
fillRect
![Page 45: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/45.jpg)
Five walls in the browser
![Page 46: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/46.jpg)
drawImage
![Page 47: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/47.jpg)
Frog variables
![Page 48: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/48.jpg)
Frog in the browser
![Page 49: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/49.jpg)
Five walls in the browser
![Page 50: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/50.jpg)
![Page 51: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/51.jpg)
clearRect
![Page 52: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/52.jpg)
clearRect
![Page 53: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/53.jpg)
![Page 54: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/54.jpg)
Game Logic: Init (Once), Update (Loop)
init update
![Page 55: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/55.jpg)
Game Logic: Move
updateinit
![Page 56: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/56.jpg)
Game Logic: Update, Render, Loop
render
initupdate
![Page 57: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/57.jpg)
@randyhoyt
• Init
- Place Frog
- Place Obstacles
• Update
- Move
• Render
Game Logic
![Page 58: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/58.jpg)
@randyhoyt
• Init
- Bind Events
- Place Frog
- Place Obstacles
• Update
- Move
• Render
Game Logic: Bind Events
![Page 59: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/59.jpg)
@randyhoyt
• Init
- Bind Events
- Place Frog
- Place Obstacles
- Place Badges
• Update
...
Game Logic: Place Badges
![Page 60: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/60.jpg)
@randyhoyt
...
• Update
- Check for Movement
- Check for Obstacles
- Move
- Check for Badges
• Render
Game Logic: Update
![Page 61: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/61.jpg)
@randyhoyt
Game Logic: Check for Victory
...
• Update
...
...
• Render
• Check for Victory
![Page 62: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/62.jpg)
Game Preview
![Page 63: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/63.jpg)
@randyhoyt
• Impact
• LimeJS
• Crafty
• GameClosure
• CocoonJS
HTML5 Game Frameworks
... and many more!
![Page 64: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/64.jpg)
@randyhoyt
• Impact
• LimeJS
• Crafty
• GameClosure
• CocoonJS
HTML5 Game Frameworks
Game Engine Comparison, http://trhou.se/gamecompare
![Page 65: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/65.jpg)
@randyhoyt
• Free and Open Source
• Uses DOM or Canvas
• Built on Google Closure
• Requires Python
• Incompatible with CocoonJS
LimeJS
![Page 66: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/66.jpg)
> bin/lime.py create treehouse
![Page 67: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/67.jpg)
HTML
![Page 68: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/68.jpg)
Starting JavaScript File
![Page 69: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/69.jpg)
Create Director
![Page 70: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/70.jpg)
Director Settings
![Page 71: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/71.jpg)
Scene
![Page 72: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/72.jpg)
Blank Canvas
![Page 73: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/73.jpg)
Comments
![Page 74: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/74.jpg)
Game Background Sprite
![Page 75: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/75.jpg)
appendChild
![Page 76: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/76.jpg)
Create Analog Stick Sprite
![Page 77: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/77.jpg)
Preview Game
![Page 78: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/78.jpg)
Preview Game With Inspector
![Page 79: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/79.jpg)
Preview Game With Console
![Page 80: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/80.jpg)
Add Four Button Sprites
![Page 81: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/81.jpg)
Frog Constructor
![Page 82: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/82.jpg)
Frog Properties
![Page 83: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/83.jpg)
Require Frog
![Page 84: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/84.jpg)
> bin/lime.py update
![Page 85: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/85.jpg)
Constants
![Page 86: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/86.jpg)
appendChild Frog
![Page 87: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/87.jpg)
Game Logic: Init, Render
render
init
![Page 88: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/88.jpg)
Create Walls and Badges
![Page 89: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/89.jpg)
appendChild: Walls and Badges
![Page 90: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/90.jpg)
Game Preview
![Page 91: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/91.jpg)
Add Event for UP Button
![Page 92: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/92.jpg)
Frog: startMovement
![Page 93: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/93.jpg)
Game Logic: Schedule Manager
render
init update
![Page 94: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/94.jpg)
Schedule Manager
![Page 95: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/95.jpg)
Game Logic: Check Movement
update
render
?init
![Page 96: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/96.jpg)
Add Events to All Buttons
![Page 97: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/97.jpg)
checkMovement
![Page 98: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/98.jpg)
Game Logic: Check Movement
update
render
?init
![Page 99: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/99.jpg)
![Page 100: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/100.jpg)
Game Logic: Check Movement
update
render
?init
![Page 101: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/101.jpg)
Game Logic: Check for Obstacle
?
update
render
?init
![Page 102: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/102.jpg)
Determine all four corners
![Page 103: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/103.jpg)
Loop through all the walls
![Page 104: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/104.jpg)
Determine the wall’s corners
![Page 105: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/105.jpg)
If the frog’s right would be right of the wall’s left ...
![Page 106: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/106.jpg)
... and if the frog’s left would be left of the wall’s right ...
![Page 107: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/107.jpg)
... and if the frog’s top would be above the wall’s bottom ...
![Page 108: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/108.jpg)
... and if the frog’s bottom would be below the wall’s top ...
![Page 109: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/109.jpg)
... then the frog and the wall would overlap.
![Page 110: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/110.jpg)
Checking for a collision
![Page 111: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/111.jpg)
Early return on collision
![Page 112: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/112.jpg)
Game Logic: Check for Obstacle
?
update
render
?init
![Page 113: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/113.jpg)
Game Logic: Check for Obstacle
?
update
render
?init
![Page 114: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/114.jpg)
![Page 115: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/115.jpg)
Game Logic: Check for Obstacle
?
update
render
?init
![Page 116: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/116.jpg)
Game Logic: Check for Badge
?
update?
render
?init
![Page 117: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/117.jpg)
Keep track of badges earned
![Page 118: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/118.jpg)
Check for collision with badge
![Page 119: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/119.jpg)
Increment badges earned
![Page 120: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/120.jpg)
![Page 121: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/121.jpg)
Game Logic: Check for Badge
?
update?
render
?init
![Page 122: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/122.jpg)
Game Logic: Check for Badge
?
update?
render
?
+
init
![Page 123: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/123.jpg)
init
Game Logic: Check for Victory
?
update?
`
render
+
? ?
![Page 124: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/124.jpg)
Check for a victory
![Page 125: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/125.jpg)
Check for a victory
![Page 126: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/126.jpg)
init
Game Logic: Check for Victory
?
update?
`
render
+
? ?
![Page 127: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/127.jpg)
init
Game Logic: Reset on Victory
?
update?
`
render
+
??
![Page 128: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/128.jpg)
> bin/lime.py build treehouse -o treehouse/treehouse-min.js
![Page 129: Html5game presentation](https://reader033.vdocuments.net/reader033/viewer/2022060115/5575e38ad8b42af74e8b47c0/html5/thumbnails/129.jpg)
@randyhoyt
randyhoyt.com/launchgame