HTM

L5 G

ame

Engi

nes

DanNagle.com 1

Write Once.Run Anywhere.

DanNagle.com 2

HTML

5 St

anda

rd

HTML4 – 1997HTML5 – 2012 (Living)

DanNagle.com 3

HTML

5 St

anda

rd

HTML4 – 1997HTML5 – 2012 (Living)

DanNagle.com 4

New

Feat

ures

DanNagle.com 5

• Audio• Canvas• CSS3• Device API• File API• Geolocation• Microdata• SVG• Web SQL Database• Web Sockets• Web Storage• Web Workers• WebGL

<audio></audio>

DanNagle.com 6

<audio></audio>

DanNagle.com 7

<audio></audio>

DanNagle.com 8

Browser Ogg Vorbis MP3 WAV

Firefox 19 Yes Yes

Chrome 25 Yes Yes Yes

Safari 6 Yes Yes

Opera 12 Yes Yes

IE 9 Yes

Wro

ng!

DanNagle.com 9

if ($.browser.webkit) { }

if ($.browser.mozilla) { }

if ($.browser.msie) { }

Feat

ure

Dete

ct

DanNagle.com 10

if(Modernizr.audio) { if (Modernizr.audio.mp3) { }

if (Modernizr.audio.ogg) { }

if (Modernizr.audio.wav) { }}

<canvas></canvas>

DanNagle.com 11

EaselJS

Preload

DanNagle.com 12

var manifest = [

{src:"sprites.png", id:"sprites"}

];

var loader = new createjs.LoadQueue(false);loader.onComplete = handleComplete;loader.loadManifest(manifest);

Collision

DanNagle.com 13

Crafty.e("gameBall, 2D, Canvas, Collision")

.onHit(gamePaddle', function () { //handle hit

})

Sprit

e sh

eets

DanNagle.com

var fireBallsheet ={ "animations": { rolling: [0, 3] }, "images": [“sprites.png"], "frames": { "height": 16, "width": 16}}; var firess = new

createjs.SpriteSheet(fireBallsheet );

14

Keyboard

DanNagle.com 15

Crafty.e("bottomPaddle, 2D, Canvas, Multiway").multiway(4, { LEFT_ARROW: 180, RIGHT_ARROW: 0

})

Touch / Mouse

DanNagle.com 16

goog.events.listen(mainScene, ['mousedown', 'touchstart'], function(e){

//handle touch });

Tick

DanNagle.com 17

update: function() { //every frame

this.parent();},

Leve

ls

DanNagle.com 18

Leve

ls

DanNagle.com 19

Further Reading

DanNagle.com 20

CraftyJS.com HTML5Test.com

whatwg.org/html

Modernizr.com

developer.mozilla.org

ImpactJS.com

CreateJS.comLimeJS.com