SPIL GAMES

YU JIANRONG
Zlong games

SPIL GAMES

10 HTML5 Tips

SPIL GAMES

Zlong HTML5 games

Bubble Hit

Castle Solitaire

Blocker Mover

More details : http :// m . agame . com

Tip 1

Desktop & Mobile

Choose <Canvas> for games

Canvas + Widely supported + No compatibility problems

CSS

+ nice effects via CSS 3D, iphoneonly - Compatibility problems on CSS - Crash on iOS - Flickering on Android l

SPIL GAMES

Tip 2

Desktop & Mobile

Use <audio> tag for Background Music

Audio support is very limited Mobile: only one Music can be played at the same time

SPIL GAMES

Tip 3

Mobile

Use touch events for Mobile

Mouse events works different on Mobile Desktop : Mouse events (e.g. onmouseup) Mobile : Touch events (e.g. ontouchstart) Note: multi-touch events supported by iOS only For more details: visit http://developer.apple.com/devcenter/safari/index.action

SPIL GAMES

Tip 4

Mobile
Use Dirty Rectangles for Canvas to improve framerate

l Better performance Example of game Bubble Hit

Tip 5

Mobile

Match button size on Mobile to finger

40 pixels is recommended for Mobile

l

l
SPIL GAMES

Tip 6

Mobile

setTimeout instead of setInterval for game loop

setInterval: DOM may not be refresh on Android

l l

SPIL GAMES

Tip 7

Mobile

Watch out for Memory limitations on iOS

10MB max for one browser tab Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image. Remove the image from memory by resetting the attribute "src":

img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAA AAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";

SPIL GAMES

Tip 8

Desktop & Mobile

Use localStorage for saving data

LocalStorage is widely supported and better than cookies More details: http://dev.w3.org/html5/webstorage/

SPIL GAMES

Tip 9

Desktop & Mobile

Use YUI Compressor to compress your code

YUI compressor for size reduction and basic obfuscation JSMin: only reduces size

SPIL GAMES

Tip 10

Mobile

Tools for mobile debugging and tuning

Use aCatLog (android market app) or adb logcat (Android Debug Bridge) to read the browser log on Android Bookmarklet (javascript: URI) is useful

javascript:Game.PlayerSpeed=prompt("Player Speed:")

For desktop: use chrome to debug and trace

SPIL GAMES

Getting started

DIVE INTO HTML5: http://diveintohtml5.org/ Safari Reference Library: http://developer.apple.com/library/safari/navigation/ https://developer.mozilla.org/en/HTML/HTML5 http://m.agame.com/

SPIL GAMES