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;
{
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

function Animal()
{
Animal.prototype.evil = 1000;
{
return "Blood Red";
}
}
function Puppy()
{
}
new Animal(); //(GOTCHA!)
p.getColor();

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.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 x = passThruVar1;
// x is undefined!!!
}, 500, passThruVar1 , passThruVar2 );

OO JS for AS3 Devs

by Jason Hanson on Apr 03, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

OO JS for AS3 Devs Presentation Transcript