Extending EaselJS Display Objects - Beginning HTML5 Games with CreateJS - page 179

Listing 8-4. PulsingOrb.js , The PulsingOrb Class
(function () {
var PulsingOrb = function (color,size) {
this.initialize(color,size);
}
var p = PulsingOrb.prototype = new createjs.Shape();
p.count = 0;
p.Shape_initialize = p.initialize;
p.initialize = function (color,size) {
this.Shape_initialize();
size = size != undefined ? size : 20;
color = color != undefined ? color : '#F00';
this.alpha = Math.random();
this.graphics.beginFill(color).drawCircle(0, 0, size);
this.on('tick', this.pulse);
}
p.pulse = function () {
this.alpha = Math.cos(this.count++ * 0.1) * 0.4 + 0.6;
}
window.PulsingOrb = PulsingOrb;
}());
This class is constructed similar to the Orb object you built earlier, only with a few different behaviors. You can
optionally pass in a color and size into each orb instance, and it begins to animate after it's been created. Note that the
object's prototype was set to the variable p . This is done to prevent you from having to write out PulsingOrb . prototype
every time you want to create new properties. This makes it a lot easier to read as well. We will be using this approach
throughout the rest of the topic.
If no size or color is passed into the instance, some default values are set before drawing the orb. Lastly, a listener
is set on tick to create the pulsing animation. The orb is now ready to use in the application, which is implemented in
the pulsingOrbs script (see Listing 8-5).
Listing 8-5. pulsingOrbs.js
var stage;
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.addEventListener("tick", stage);
drawBackground();
setListeners();
}