MDN Hackday London - Open Web Games with HTML5 & JavaScript

ES
M t
A rip
G
B avaSc
E
W L5 & J es

EN TM bH
aw
k

OP ing H Ro

s U

Hi, I’m Rob Hawkes and I’m here today to talk about creating games on the open Web using
HTML5 and JavaScript.

I work at Mozilla, a non-proﬁt ﬁghting for a better Web. The guys who make Firefox.

Unsure about how much I like Mozilla? This here is a beautiful chicken and leek pie with extra
Firefox goodness.

It was made by my talented girlfriend and it was delicious.

I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in
person after the talk or on Twitter.

These slides will go online after this talk.

I’ll put all the details up at the end.

Before we move on I just have a quick disclaimer.

This whole talk is about HTML5 and JavaScript as technologies for the creation of games.

They’re technologies that are intrinsically linked to each other by nature, but saying HTML5
and JavaScript every single time makes my head hurt.

So instead I’ll just be saying HTML5.

Just bear in mind that whenever I mention HTML5 I’m also referring to JavaScript as well.

So let’s go back in time for a moment.

Now I don’t actually remember when I ﬁrst started playing computer games, although I know
that I started with consoles.

My ﬁrst experience was with the ZX Spectrum and its amazing noises and epic loading times,
which I sorely miss…

Then there was the SNES, which really got me addicted to gaming.

Although it turns out my SNES was stolen when I was a kid. I did wonder where it went…

My parents replaced it with the Megadrive which, although not quite as awesome, was just as
fun.

From there it has been a constant stream of consoles, each smashing the performance and
functionality of its predecessor.

The N64, the Gamecube, the Dreamcast, the Playstation, the xBox.

You get the idea…

And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…

And Megarace.

Who remembers this one?

And playing multiplayer Doom at my Dad’s Internet cafe.

What I’m getting at here is that gaming has been a big part of my life growing up, as it has
been with a lot of other people as well.

They’re fun to play, and they’re surprisingly fun to make.

ow
is n
e cool
tim thing
he om
e
T do
fs
ol
resh
Th

Today we’re now on the threshold of something cool; being able to create awesome and
addictive games with nothing more than the technologies that we normally use to make
websites, namely HTML5 and JavaScript.

Since I began developing on the Web I really can’t remember a time when so many people are
working together to achieve something like this.

es
g a m
ing ples
ist exam
Ex he
be
st
ft
eo
Som

The number of HTML5 games out there is growing every day.

I’d show you a selection of my favourites, just a tiny amount of what’s out there.

Quake II

Fully-functional multiplayer Quake II port.

http://code.google.com/p/quake2-gwt-port/

Cut The Rope

Cut The Rope, ported from iOS.

http://www.cuttherope.ie

Bejeweled

Bejeweled is a massively popular game on a whole variety of platforms.

Popcap recently released a purely HTML5 version.

http://bejeweled.popcap.com/html5

Command & Conquer

Command & Conquer: Tiberium Alliances is a HTML5 game from EA that is part real-time
strategy, part Farmville.

http://alliances.commandandconquer.com

GT Racing

GT Racing: Motor Academy is a 3D racing game by Gameloft and Mandreel.

http://www.mandreel.com/?page_id=1312

BrowserQuest

BrowserQuest is a massively-multiplayer RPG that Mozilla recently launched to the public.

It works great on mobile and desktop devices but what’s even better is that, aside from being
an addictive game, the entire source code is on GitHub.

http://browserquest.mozilla.org
https://github.com/mozilla/BrowserQuest
http://hacks.mozilla.org/2012/03/browserquest/

It’s clear that HTML5 is something that is really becoming a contender for games on the Web.

It’s an open technology stack that is plugin-less, doesn’t require compilation, and works the
same across devices and platforms.

g y
o lo
chn es
Te L5g
am
TM
fH
so
cene
s
he
dt
hin
Be

There are a few key technologies that are involved in the development of HTML5 games.

Here are some of my favourites.

vas
an
C tfo
rm
pla
ics
raph
g
2D

Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.

It’s quite amazing what can be done with such simple drawing and image manipulation tools.

https://developer.mozilla.org/en/HTML/Canvas

Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.

http://weavesilk.com

Canvas

<canvas id='myCanvasElement' width='400' height='400'></canvas>

Using canvas is very straight forward.

The ﬁrst thing you need to do is add a canvas DOM element to your HTML page.

Canvas

var canvas = document.getElementById('myCanvasElement');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);

From there you can then access the canvas through JavaScript to draw on it and do other cool
stuff.

This is small canvas demo that draws a solid red square underneath a blue one with half
transparency.

‘myCanvasElement’ refers to a HTML <canvas> element that you’ll need to place in your
HTML ﬁle somewhere. In this example, I’m assuming that you’ve already done that.

GL
eb
W form
lat
sp
hic
grap
3D

WebGL brings the ability to provide advanced 3D graphics directly within the browser.

https://developer.mozilla.org/en/WebGL

HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a
beautiful example of WebGL in action.

http://helloracer.com/webgl/

Rome is a music video created with WebGL. It’s an amazing example of what the technology
can achieve in a real-world situation given a large team.

http://ro.me

Tinkercad is probably the best use of WebGL that I’ve seen in a production situation.

It’s a Web app that allows you to create 3D objects in your browser using WebGL, then get
them printed and sent to your doorstep in just a few simple clicks. It’s seriously awesome.

https://tinkercad.com

Both Google Maps and Nokia have recently added support for WebGL. The Nokia version is
particularly impressive because they fully render and texture 3D shapes of buildings.

http://support.google.com/maps/bin/answer.py?hl=en&answer=1630790
http://maps.nokia.com/webgl/

I’m not going to lie, WebGL isn’t the easiest thing to learn. Then again, no raw 3D code is
that simple.

Instead, I recommend checking out a library called three.js which abstracts WebGL and makes
it much easier to implement.

https://github.com/mrdoob/three.js/

m e
Fra
on ps
ati ati
on
loo

nim d anim
estA timise
qu Op
re

requestAnimationFrame is the new, better way of managing animation in JavaScript.

Instead of constantly running a setTimeout or setInterval function, which lack performance
and spike CPU usage, requestAnimation frame puts the browser in control of things and
keeps things running smoothly.

Right now you can’t easily set a speciﬁc framerate when using requestAnimationFrame but so
long as you use time-based updates (not frame-based) in your game then you’ll be ﬁne.

requestAnimationFrame

function update(timestamp) {
// DO SOMETHING

window.mozRequestAnimationFrame(update);
}

window.mozRequestAnimationFrame(update);

In this example, I’m only using the Mozilla preﬁxed version of requestAnimationFrame. In
reality, there’s a really good shim by Paul Irish that handles cross-browser
requestAnimationFrame.

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

d io
a u
L5 usic
TM nd
m
H grou
ck
ba
nd
ctsa
effe
nd
Sou

HTML5 audio allows for plugin-less game sound effects and background music.

Audio data APIs implemented by Mozilla and Google allow for manipulation of audio and
much more ﬁne-grained control.

https://developer.mozilla.org/en/HTML/Element/audio

This is something I made especially for the ASSEMBLY 2011 event in Finland.

It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.

http://robhawkes.github.com/webgl-html5-audio-visualiser/

Audio

<audio id='myAudioElement' controls>
<source src='audiofile.ogg' type='audio/ogg'>
</audio>

Like canvas, using audio is also straight forward.

The ﬁrst thing you need to do is add an audio DOM element to your HTML page.

Audio

var audio = document.getElementById('myAudioElement');

audio.play();

audio.pause();

From there you can then access the audio element through JavaScript to control it.

e ts
ock
bS ation
e
W omm un
ic

yerc
ltipla
Mu

WebSockets can be used for the real-time communication between a player and the game
server.

With WebSockets you can create multiplayer games with relative ease.

https://developer.mozilla.org/en/WebSockets

WebSockets

var ws = new WebSocket('http://example.com/socketserver');

ws.send('This message is sent to the WebSocket server');

ws.onmessage = function (event) {
console.log(event.data);
}

WebSockets are created entirely from JavaScript without the need to add elements to the
HTML page.

A new WebSocket connection can be opened by calling the ‘new WebSocket’ constructor and
passing it the URL to the WebSocket server.

From there you can call the ‘send’ method to push data to the server.

Or listen for the ‘onmessage’ event to handle data pushed to you from the server.

PI
n A
re e ul
Sc we
rf
ull et
po
F im
ple
,y
S

The Full Screen API allows you to expand any HTML element to ﬁll the users screen, even if
the browser isn’t running full screen itself.

For games, this is great because you can make the small canvas element ﬁll the entire screen.

Outside of games, this is useful for video elements and Web applications.

https://bugzilla.mozilla.org/show_bug.cgi?id=545812
http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html
https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

Full Screen API


canvas.mozRequestFullScreen();

The Full Screen API can be requested from any DOM element.

In this example you’re asking a canvas element to expand to ﬁll the screen.

One thing to note is that you can’t just make any element ﬁll the screen whenever you want.
Right now, the user has to click or press a key to initiate the Full Screen API.

P I
A
o ck ace
r L pl
te ne
oin rso
rino
P cu
he
gt
ockin
L

The Pointer Lock API is an attempt at improving the mouse as an input device.

It would be used in situations like games and 3D visualisations where the mouse position
rotates or moves you around a 3D space.

As it stands there’d still be a cursor moving around the screen causing all sorts of trouble
when you want to click on something in your game.

With the new API you can lock your mouse position and stop it from getting in the way and
being a nuisance.

Both Google and Mozilla are working on an implementation of this right now, it’s available in
a custom build of Firefox.

https://developer.mozilla.org/en/API/Pointer_Lock_API

Full Screen API


canvas.mozRequestPointerLock();

The Pointer Lock API can be requested from any DOM element that is already in full screen.

P I
d A
p a eb
me he
W
Ga et
ot
ol
ns co
he
gt
gin
Brin

The Gamepad API is one of the major improvements to input that is coming.

Both Mozilla and Google are working an an implementation of this and there is actually an
experimental build of Firefox available to the public that has it working. The API is also in the
dev build of Chrome.

What I ﬁnd most interesting about the Gamepad API is that it might be just the thing we need
to ﬁnally justify HTML5 gaming on a TV or console.

Who wants to use a keyboard and mouse while sitting on the sofa?

https://wiki.mozilla.org/GamepadAPI
http://www.gamepadjs.com
https://github.com/jbuck/input.js

Gamepad API demo
I’d like to show you a quick demo of the Gamepad API working in Firefox Nightly and Google
Chrome.

In this example I’ve connected my Logitech controller to my Mac, but I could also use a PS3
controller or practically any other USB controller.

This is another little demo that I put together to show off the Gamepad API implemented in
my game Rawkets.

Connection

function onGamepadConnected(e) {
var controller = e.gamepad;
console.log("Gamepad connected", controller.id);
}

window.addEventListener("MozGamepadConnected",
onGamepadConnected);

MozGamepadConnected

It passes an event object that itself contains a gamepad object in reference to the connected
gamepad.

Disconnection

function onGamepadDisconnected(e) {
var controller = e.gamepad;
console.log("Gamepad disconnected", controller.id);
}

window.addEventListener("MozGamepadDisconnected",
onGamepadDisconnected);

MozGamepadDisconnected

It passes an event object that itself contains a gamepad object in reference to the
disconnected gamepad.

Button events
function onGamepadButtonDown(e) {
var button = e.button;
console.log("Gamepad button pressed", button);
}

function onGamepadButtonUp(e) {
var button = e.button;
console.log("Gamepad button released", button);
}

window.addEventListener("MozGamepadButtonDown", onGamepadButtonDown);
window.addEventListener("MozGamepadButtonUp", onGamepadButtonUp);

MozGamepadButtonDown
MozGamepadButtonUp

Each pass an event object that contains a button property.

The button property is the index number of the speciﬁc button, respective to the entire array
of buttons on the gamepad.

Axis events

function onGamepadAxisMove(e) {
var axis = e.axis;
var value = e.value;

console.log("Gamepad axis move", axis, value);
}

window.addEventListener("MozGamepadAxisMove", onGamepadAxisMove);

MozGamepadAxisMove is fired on movement of a joystick or analogue trigger.

Passes an event object that contains axis and value properties.

The axis property is the index number of the specific axis that was moved, respective to the
entire array of axes on the gamepad.

The value property is a -1.0 to 1.0 float. For example, an x-axis on a joystick when fully
pressed to the left would have a -1.0 value.

Gamepad state

function checkState() {
for (var i = 0; i < controller.buttons.length; i++) {
console.log("Button state", i, controller.buttons[i]);
}

for (var j = 0; j < controller.axes.length; j++) {
console.log("Axis state", j, controller.axes[j]);
}
}

If you don’t want to use events you can also poll the entire gamepad state whenever you
want.

The only pre-requisite is that a gamepad is already connected and you’ve stored a reference
to it somewhere, perhaps in a variable or array.

Once you have reference to a gamepad you get the state by reading its buttons and axes
objects. These are both arrays that contain data about every single button and axis available.

The value of each button in the buttons array is a boolean that tells you whether the button is
pressed down (true) or not (false).

The value of each axis in the axes array is a -1.0 to 1.0 ﬂoat that tell you exactly where a
joystick is or how far a trigger has been pulled.

P I
n A
a t io es
n t de
vic
ri e ob
ile
n O on
m

ree ha
ve
Sc M ust-

The Screen Orientation API allows you to do things like changing and locking, you guessed it,
the orientation of the screen.

Before now, it’s been incredibly difficult to lock orientation on a website or game using
nothing but JavaScript.

http://dvcs.w3.org/hg/screen-orientation/raw-ﬁle/default/Overview.html

Screen Orientation API

screen.mozLockOrientation('landscape');

The Screen Orientation API is another relatively simple one.

It just landed in Firefox Nightly on mobile.

All you need to do is call the ‘lockOrientation’ method of the screen object and pass it a
orientation string.

It’s important to note that you also need to be using the Full Screen API for the orientation
lock to work.

n s
tio
plica bsite
ap yw
e
eb ta
fanc
W ot jus
N

The concept of Web apps is something that is gaining a lot of traction at the moment.

HTML5 games are effectively gloriﬁed Web apps.

It’s no doubt this this traction is as a result of the success of native applications and games
on the desktop and mobile, particularly with iOS and Android.

It’s something we’re spending a lot of time on at Mozilla.

We envisage Web apps to run on any device, any browser, and to be distributed through any
store or website.

https://apps.mozillalabs.com
https://developer.mozilla.org/en/OpenWebApps

nce
erie
exp scre
en

like ho
me
p- op
or
Ap eskt
thed
from
ch
un
La

Something that needs to be tackled with Web apps is how to make them feel like real
applications rather than gloriﬁed websites.

One way that is being considered is completely removing the browser chrome and running
the application in it’s own window.

This will effectively mean that you have full control of the app UI and it won’t look like it’s
being run in a browser.

At Mozilla we call this WebRT, which stands for Web Run-Time.

By using WebRT you can install a Web app directly into the OS just like you would a native
application.

The WebRT app will look and feel like a native application when launched but will actually be
running a browser rendering engine behind the scenes.

e s
gin
e n ay
e
m game st
od
Ga
ML5
HT
te
Crea

If you haven’t already then I encourage you to give HTML5 game development a go.

And you don't have to create an entire game infrastructure from scratch, you can use some of
the existing engines that are proving popular.

Impact. A 2D game engine.

I used this recently, and it’s really well made and has a good level editor and development
tools.

The documentation is great and the author is active and very helpful.

http://impactjs.com/

Crafty. Another 2D game engine.

It’s a free engine and is doing much better than other free engines out there.

http://craftyjs.com/

Isongenic Engine. A 2D to 2.5D game engine.

One of the most promising engines out there today.

Massively multiplayer networking built in, uses Node and MongoDB, and has canvas or DOM-
based graphics.

http://www.isogenicengine.com

u p
g
in zon
eep ri
K e ho
th
ff on
tu
uchs
m
So

I’ve really only touched the tip of the iceberg here.

There is much more coming in the near future.

Here are a few ways to keep up with things and get yourself prepared, particularly the things
happening at Mozilla.

Are We Fun Yet?

https://wiki.mozilla.org/Platform/AreWeFunYet

Firefox Aurora

“Get a ﬁrst look at the latest developer tools, security features and innovative HTML5 and
other Web technologies.”

http://www.mozilla.org/en-US/ﬁrefox/channel/#aurora

Firefox Nightly

Bleeding edge functionality.

Testing only.

http://nightly.mozilla.org

Rob Hawkes
@robhawkes

Rawkes.com
Personal website and blog

RECENT PROJECTS MORE COOL STUFF

Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla

Rawkets.com Slides
HTML5 & WebSockets game slideshare.net/robhawkes

Get in touch with me on Twitter: @robhawkes

Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
rawkes.com

I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
blog/2011/05/05/people-love-a-good-smooch-on-a-balcony

Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com

These slides are online at slideshare.net/robhawkes

MDN Hackday London - Open Web Games with HTML5 & JavaScript

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to MDN Hackday London - Open Web Games with HTML5 & JavaScript

Similar to MDN Hackday London - Open Web Games with HTML5 & JavaScript (17)

More from Robin Hawkes

More from Robin Hawkes (15)

Recently uploaded

Recently uploaded (20)

MDN Hackday London - Open Web Games with HTML5 & JavaScript