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

ga m es!
I love

@randyhoyt
A Theory of Fun (2004), by Ralph Koster
 Games

• Games are fun

• Games are everywhere

ga m es!
I love

@randyhoyt
Homo Ludens (1938), by Johan Huizinga
 Games

• Games are fun

• Games are everywhere
• Games exercise the brain

ga m es!
I love

@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 ga m es!
I love

@randyhoyt
7 TED Talks on Gaming, http://trhou.se/gamesTED
Games And Me

@randyhoyt
HTML5
 rd A l ert!
Buzzwo
 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 ny m ore!
... a nd ma

@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