OO JS for AS3 Devs

OO JS for AS3 Devs Object-Oriented JavaScript for ActionScript 3 Developers

Pirates vs Ninjas Pirate Ninja

JS vs AS3 Object Number String Boolean Object Object Array (Object) Date Function Function Prototype <Script src=""/> Function Object Number | int | unit String Boolean Array Dictionary Array Date Function Class Prototype Import Getter / Setter

No Strong Types in JS var myVar1; var myVar1 = 10; var myVar1, myVar2, myVar3; var myVar = []; myVar.push("foo"); const EVENT_NAME = "name" var myVar:Object public myVar public function myFunct():String function myFunct():String package {}, class {} extends, implements, final, internal, public, private GOOD PUPPY BAD PUPPY

'Classes' in JS Everything is an Object or Function Functions are pushed to the limits A JS Class is just a Function Function 'scope' rules are used for to create public, private spaces Inheritance is wacky ( will get to this later ) Prototype is wacky ( will get to this later )

function myClass() { this.add = function(a, b) { return a + b; }; } var c = new myClass(); c.add(1, 1); TEST IN FIREBUG

Getters / Setters function Puppy() { var _evil = 1000; this. getEvil = function() { return _evil; }; this. setEvil = function(value) { _evil = value; } } var evilPuppy = new Puppy(); evilPuppy. getEvil() ;

Self Executing Functions function Puppy() { var _evil = 999; this.getEvil = function() { return _evil; }; (function init(value) { _evil = v; })(45) } var evilPuppy = new Puppy(); evilPuppy.getEvil();

Scope is a Pain! function level_1() { var good = 20; this.evil = 99; var timeout = setTimeout(function() { console.log(good); console.log(evil); console.log(this.evil); }, 500); } var x = new level_1();

Scope is a Pain - Part 2 function level_1() { var good = 20; this.evil = 99; var scope = this; var timeout = setTimeout(function() { console.log(good); console.log(scope.evil); }, 500); } var x = new level_1();

Inheritance Tons of ways to do Inheritance I will only cover one way No "extends" in JS Completely different way of thinking about it Special property on Object named Prototype

HTML5 <canvas> tag <body> <canvas id="gameCanvas" width="600" height="600"></canvas> </body>

Get Pointer to <canvas> from JS // javaScript var canvas = document.getElementById('gameCanvas'); var context = canvas.getContext('2d');

Draw on <canvas> with JS // javaScript context.beginPath(); context.moveTo(0,0); context.lineTo(0,100); context.lineTo(100,100); context.lineTo(100,0); context.closePath(); context.strokeStyle = "#000000"; context.fill(); context.fillStyle = "#CCCCCC"; context.fill();

"Animation" (in quotes) var intervalId = setInterval(drawCanvas, 1000 / 30); function drawCanvas(){ // clear everything context.clearRect(0,0, myWidth, myHeight); // redraw everything // Yes, you better know exactly // where every pixel is at all times so // you can redraw it at 30 FPS // :( }

"Animation" (in quotes) var intervalId = setInterval(smartDrawCanvas, 1000 / 30); function smartDrawCanvas() { // Clear only part of the canvas context.clearRect(25, 25, 50, 50); // redraw SOME of the canvas // TODO .... }

Mouse Events on <canvas> Cannot listen to events on any children on the <canvas> Think of <canvas> as AS3 Bitmap You can only listen on the main <canvas> object You need to know where every 'interactive' object is the <canvas> at all times. For clicks you need to calculate what was under the pixel that was clicked on Observer pattern helps with this work

Gotchas **JS** (for each works in FF, but not Chrome) for (var x in myArray) { var obj = myArray[x]; obj.selected = false; } **AS3** for each (var x:Object in myArray) { x.selected = false; }

Gotchas var timeout = setTimeout(function() { var x = passThruVar1; // x is undefined!!! }, 500, passThruVar1 , passThruVar2 );

OO JS for AS3 Devs

Recommended

More Related Content

What's hot (20)

Similar to OO JS for AS3 Devs (20)

More from Jason Hanson (6)

Recently uploaded (20)

OO JS for AS3 Devs

Editor's Notes