Upload
vag-kats
View
27
Download
4
Tags:
Embed Size (px)
DESCRIPTION
html 5 game
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
Its 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 walls corners
If the frogs right would be right of the walls left ...
... and if the frogs left would be left of the walls right ...
... and if the frogs top would be above the walls bottom ...
... and if the frogs bottom would be below the walls 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