oo js for as3 devs
DESCRIPTION
TRANSCRIPT
OO JS for AS3 Devs
Object-Oriented JavaScript for ActionScript 3 Developers
Pirates vs Ninjas
Pirate Ninja
JS vs AS3
1.Object2.Number3.String4.Boolean5.Object6.Object7.Array (Object) 8.Date9.Function10.Function11.Prototype12.<Script src=""/>13.Function
1.Object2.Number | int | unit3.String4.Boolean5.Array6.Dictionary7.Array8.Date9.Function10.Class11.Prototype12.Import13.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:Objectpublic myVarpublic function myFunct():Stringfunction myFunct():Stringpackage {}, 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 / Settersfunction Puppy(){ var _evil = 1000; this.getEvil = function() { return _evil; }; this.setEvil = function(value) { _evil = value; }}var evilPuppy = new Puppy();evilPuppy.getEvil();
Self Executing Functionsfunction 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 wayNo "extends" in JSCompletely different way of thinking about itSpecial property on Object named Prototype
function Animal(){ Animal.prototype.evil = 1000; Animal.prototype.getColor = function() { return "Blood Red"; }}function Puppy() {}
Puppy.prototype = Animal.prototype;var p = new Puppy();p.getColor();
function Animal(){ Animal.prototype.evil = 1000; Animal.prototype.getColor = function() { return "Blood Red"; }}function Puppy() {}new Animal(); //(GOTCHA!)Puppy.prototype = Animal.prototype;var p = new Puppy();p.getColor();
function Animal(){ Animal.prototype.color = "Blood Red"; Animal.prototype.getColor = function() { return "Evil " + this.color; }};var a = new Animal();console.log("Animal Color: " + a.getColor());function Puppy() { this.color = "Blue";}Puppy.prototype = Animal.prototype;var p = new Puppy();console.log("Puppy Color: " + p.getColor());
HTML5 <canvas> tag
<body><canvas id="gameCanvas" width="600" height="600"></canvas></body>
Get Pointer to <canvas> from JS
// javaScriptvar canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
Draw on <canvas> with JS
// javaScriptcontext.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);