@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