GG WORKSHOP GAMES & APPS IN JAVASCRIPT

GG Team Workshop GAMES & APPS IN JAVASCRIPT 2011 by Michal Budzynski

GG Team Workshop 2011 by Michal Budzynski Development of a game:
Preproduction
Prototype
Alpha
Beta
RC
Gold Master
Localization

GG Team Workshop 2011 by Michal Budzynski

GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending
Creating nodes & elements
Assembling them into DOM tree
Connecting created tree into main DOM structure

GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending

GG Team Workshop 2011 by Michal Budzynski DOM manipulation – document fragment
Creating documentFragment
Append all nodes & elements to it
Connecting documentFragment to the main DOM structure

GG Team Workshop DOM manipulation – document fragment

GG Team Workshop 2011 by Michal Budzynski Result:

GG Team Workshop 2011 by Michal Budzynski DOM manipulation – concatenation + innerHTML
Write HTML for each node & element
Put it directly into innerHTML of the parent node
Use methods like .childNodes() or .getElementsByTagName()

GG Team Workshop DOM manipulation – document fragment 2011 by Michal Budzynski

GG Team Workshop For single string using array buffer instead of += makes perfect sense – huge performance difference in older browsers and comparable results in newer ones. Doing join() on multiple arrays for concatenation is not a good idea. It takes way more time than simple +! http://kasia.drzyzga.pl/2011/04/never-concatenate-strings-with-really/ 2011 by Michal Budzynski

GG Team Workshop 2011 by Michal Budzynski

GG Team Workshop 2011 by Michal Budzynski Canvas API – 2d context
.beginPath()
.fillStyle = “”
.fillRect(a, b, c, d)
.moveTo(x, y)
.lineTo(x, y)
.bezierCurveTo()
.arc(x, y, radius, startAngle, endAngle, anticlockwise)
.stroke()
.fill()

GG Team Workshop 2011 by Michal Budzynski Canvas
Use .width & .height directly, not as 'style'
ctx.clearRect()
canvas.toDataURL();

GG Team Workshop 2011 by Michal Budzynski checker.draw('#f00') Result: checker.draw('#00f') Result:

GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern'
Avoid globals!
More specific position of variable – better performance

GG Team Workshop 2011 by Michal Budzynski Events
Inline method (DOM lvl 0)
Events by attributes (DOM lvl 1)
Event Listeners (DOM lvl 2)

GG Team Workshop 2011 by Michal Budzynski Events
Inline method (DOM lvl 0)
Events by attributes (DOM lvl 1)
Event Listeners (DOM lvl 2)
Removing event-handlers

GG Team Workshop 2011 by Michal Budzynski Removing event handlers

GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
Complex if() statements using questionmarks

Complex if() statements using comas

Complex if() statements using comas
http://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/

GG Team Workshop 2011 by Michal Budzynski Communication
XHR
Long polling
JSONP polling
Forever iframes
FlashSockets (tfuuuuuuuuuu!)
WebSockets

GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!

GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game?

GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game? We cannot.

GG Team Workshop 2011 by Michal Budzynski Communication
EasyWebSocket - a WebSocket client to broadcast messages to webpages
http://easywebsocket.org/

GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
Ask for players

Ask for players
Take players - if no free places – disconnect (?)

Ask for players
Say hello

Ask for players
Say hello
Show when you will be ready

Ask for players
Say hello
Show when you will be ready
Send & receive all the movements

GG Team Workshop 2011 by Michal Budzynski Touch devices
'tap' is the new 'click'
'touchstart' is the new 'mousedown'
Etc.
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/

GG Team Workshop 2011 by Michal Budzynski Touch devices
<meta name="viewport">
content="width=device-width, initial-scale=1, maximum-scale=1"
A pixel is not a pixel
“ The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi).”
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

GG Team Workshop 2011 by Michal Budzynski Social Networks APIs

GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
Javascript API
REST API with backend libraries
http://dev.gg.pl/api/pages/ggapi.html
http://developers.facebook.com/docs/reference/javascript/

GG Team Workshop 2011 by Michal Budzynski What's next?
http://michalbe.blogspot.com
http://twitter.com/michalbe
http://ongamestart.com
http://googlepolska.blogspot.com
http://falsyvalues.com

GG Team Workshop 2011 by Michal Budzynski What's next?
http://frontendday.com
http://jsday.it
http://braziljs.com.br
http://nodecamp.eu

http://michalbe.blogspot.com	1076
http://michalbe.blogspot.de	14
http://michalbe.blogspot.com.br	13
http://michalbe.blogspot.co.uk	12
http://michalbe.blogspot.in	11
http://michalbe.blogspot.com.es	10
http://michalbe.blogspot.com.ar	8
http://michalbe.blogspot.fr	7
http://michalbe.blogspot.se	4
http://www.michalbe.blogspot.com	3
http://michalbe.blogspot.it	3
http://michalbe.blogspot.com.au	3
url_unknown	3
http://michalbe.blogspot.pt	2
http://www.slideshare.net	2
http://michalbe.blogspot.mx	1
http://michalbe.blogspot.co.nz	1
http://michalbe.blogspot.ca	1
http://translate.googleusercontent.com	1
http://michalbe.blogspot.cz	1

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

by michalbu on Apr 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,176

Statistics

GG WORKSHOP GAMES & APPS IN JAVASCRIPT — Presentation Transcript