Embed Size (px)
Citation preview
@randyhoyt
Randy Hoyt
Coding Your First HTML5 Game
@randyhoyt
randyhoyt.com/launchgame
@randyhoyt
• Code
• HTML5
• Games
Overview
@randyhoyt
• Games
• HTML5
• Code
Overview
Games
@randyhoyt
• Games are fun
Games
I love games!
A Theory of Fun (2004), by Ralph Koster
@randyhoyt
• Games are fun
• Games are everywhere
Games
I love games!
Homo Ludens (1938), by Johan Huizinga
@randyhoyt
• Games are fun
• Games are everywhere
• Games exercise the brain
Games
I love games!
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
@randyhoyt
• Games are fun
• Games are everywhere
• Games exercise the brain
• Games are practice for the real world
Games
I love games!
7 TED Talks on Gaming, http://trhou.se/gamesTED
@randyhoyt
Games And Me
HTML5
Buzzword Alert!
@randyhoyt
• Canvas
HTML5 and Related Technologies
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
HTML5 and Related Technologies
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
• WebSocket http://trhou.se/introwebsockets
HTML5 and Related Technologies
@randyhoyt
• Canvas
• WebGL http://trhou.se/whyWebGL
• WebSocket http://trhou.se/introwebsockets
• SVG
HTML5 and Related Technologies
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/
@randyhoyt
• Top 10 HTML5 games of 2012 http://trhou.se/gamesin2012
• Goko
• Game Closure Devkit
• Famo.us - http://tcrn.ch/ZfCuNh
HTML5 Games
Code
@randyhoyt
Project Structure
CSS JavaScriptHTML
@randyhoyt
Project Structure
CSS JavaScriptHTML
@randyhoyt
Project Structure
CSS JavaScriptHTML
@randyhoyt
Project Structure
CSS JavaScriptHTML
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
updateinit
Game Logic: Update, Render, Loop
render
initupdate
@randyhoyt
• Init
- Place Frog
- Place Obstacles
• Update
- Move
• Render
Game Logic
@randyhoyt
• Init
- Bind Events
- Place Frog
- Place Obstacles
• Update
- Move
• Render
Game Logic: Bind Events
@randyhoyt
• Init
- Bind Events
- Place Frog
- Place Obstacles
- Place Badges
• Update
...
Game Logic: Place Badges
@randyhoyt
...
• Update
- Check for Movement
- Check for Obstacles
- Move
- Check for Badges
• Render
Game Logic: Update
@randyhoyt
Game Logic: Check for Victory
...
• Update
...
...
• Render
• Check for Victory
Game Preview
@randyhoyt
• Impact
• LimeJS
• Crafty
• GameClosure
• CocoonJS
HTML5 Game Frameworks
... and many more!
@randyhoyt
• Impact
• LimeJS
• Crafty
• GameClosure
• CocoonJS
HTML5 Game Frameworks
Game Engine Comparison, http://trhou.se/gamecompare
@randyhoyt
• Free and Open Source
• Uses DOM or Canvas
• Built on Google Closure
• Requires Python
• Incompatible with CocoonJS
LimeJS
> 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
render
init
Create Walls and Badges
appendChild: Walls and Badges
Game Preview
Add Event for UP Button
Frog: startMovement
Game Logic: Schedule Manager
render
init update
Schedule Manager
Game Logic: Check Movement
update
render
?init
Add Events to All Buttons
checkMovement
Game Logic: Check Movement
update
render
?init
Game Logic: Check Movement
update
render
?init
Game Logic: Check for Obstacle
?
update
render
?init
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
render
?init
Game Logic: Check for Obstacle
?
update
render
?init
Game Logic: Check for Obstacle
?
update
render
?init
Game Logic: Check for Badge
?
update?
render
?init
Keep track of badges earned
Check for collision with badge
Increment badges earned
Game Logic: Check for Badge
?
update?
render
?init
Game Logic: Check for Badge
?
update?
render
?
+
init
init
Game Logic: Check for Victory
?
update?
`
render
+
? ?
Check for a victory
Check for a victory
init
Game Logic: Check for Victory
?
update?
`
render
+
? ?
init
Game Logic: Reset on Victory
?
update?
`
render
+
??
> bin/lime.py build treehouse -o treehouse/treehouse-min.js
@randyhoyt
randyhoyt.com/launchgame
