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

s!
e
m
a
g
I love
@randyhoyt

A Theory of Fun (2004), by Ralph Koster

Games

Games are fun

Games are everywhere

s!
e
m
a
g
I love
@randyhoyt

Homo Ludens (1938), by Johan Huizinga

Games

Games are fun

Games are everywhere
Games exercise the brain
s!
e
m
a
g
I love
@randyhoyt

Play engages the prefrontal cortex,

responsible for your highest-level
cognitive functions including selfknowledge, 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

s!
e
m
a
g
I love
@randyhoyt

7 TED Talks on Gaming, http://trhou.se/gamesTED

Games And Me

@randyhoyt

HTML5

rt!
e
l
A
d
r
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

Its official: with HTML5 today the

browser has become a fullfledged 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

init

update

Game Logic: Update, Render, Loop

init

update

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

... a

re!
o
m
y
n
nd ma

@randyhoyt

HTML5 Game Frameworks

Impact
LimeJS
Crafty
GameClosure
CocoonJS
@randyhoyt
Game Engine Comparison, http://trhou.se/gamecompare

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 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
?

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