abusing javascript for fun and profit
Post on 18-Oct-2014
2.385 views
DESCRIPTION
In this talk I outline some of the cool things you can do with JavaScript - including writing a old skool 2d side scrolling platformer!TRANSCRIPT
What I do
www.madpilot.com.au www.88miles.net
JavaScript: A brief history
Developed by Brendan Eich
Mocha: A brief history
Developed by Brendan EichAt Netscape
LiveScript: A brief history
Developed by Brendan EichAt Netscape
Around the time Java was added
JavaScript: A brief history
Developed by Brendan EichAt Netscape
Around the time Java was addedWas implented in IE 3.0
JScript: A brief history
Developed by Brendan EichAt Netscape
Around the time Java was addedWas implented in IE 3.0
Became an official ECMA standard
ECMAScript: A brief history
MouseoversStatus bars
Annoying PopupsGet’s a bad name
JavaScript in the 90s
90’s 2000 2002 2004 2006 Today
Microsoft invents XMLRequest
Make server requestswithout refreshing
AJAX
90’s 2000 2002 2004 2006 Today
Move stuff aroundDynamic Menus
Show/hide elements
DHTML and the DOM
90’s 2000 2002 2004 2006 Today
Three browsers – three technologiesCreate vector graphicsThink outside the box
Canvas/SVG/VML
90’s 2000 2002 2004 2006 Today
Separate JS from the HTMLCreates Business Logic layer
Unobstrusive JavaScript
90’s 2000 2002 2004 2006 Today
User interface widgetsFrameworks a go-go
Closer to desktop appsCool Experiments
We ♥ JavaScript
90’s 2000 2002 2004 2006 Today
How far can HTML CSS and JavaScript be pushed?
Pretty far actually…
We are losing interest…
Make it think it is an 8-bit video console
Fool your browser
Prototype JavaScript LibraryXHTML + CSS + Unobtrusive JS
DOM manipulationJS Events
Our tools
JavaScript supports classes
Almost supports inheritance
Create sprite classes
Oh, so classy
Need to create animation loopsetInterval(interval, function);
Check collisionsRender animations
JS isn’t threaded!
Using timers
Pointless without User InputEvent.observe(element, event, handler);
Listen to keypress, window loadCreate some pseudo events
Input Events
An old game techniqueMove background image
…then mask
el.style.backgroundPosition = '0px 0px';
Animation strips
Basic squareUses vectors
Check distanceAnd direction
Collision Detection
Fixed view pointMove the background
Capture arrow events (ignore)Move character – background scrolls
Sideways scrolling
ENDE.