Game Development Reference
In-Depth Information
function drawBackground() {
var bg = new createjs.Shape();
bg.graphics.beginFill('#A9BBC9').drawRect(0, 0, stage.canvas.width,
stage.canvas.height);
stage.addChild(bg);
}
function setListeners() {
stage.on('stagemousedown', drawOrb);
window.onkeyup = takeSnapShot;
}
function drawOrb(e) {
var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
var randomSize = Math.floor(Math.random() * 100) + 20;
var orb = new PulsingOrb(randomColor, randomSize);
orb.x = e.stageX;
orb.y = e.stageY;
stage.addChild(orb);
}
function takeSnapShot(e) {
if (e.keyCode === 13) {
var img = stage.canvas.toDataURL("image/png");
window.open(img);
}
}
All of the orb's functionality was built within the class, which drastically cuts down the code in your logic. The
first set of functions draws a colored background on the stage and adds the listeners for the applications. When a user
clicks on the stage, a new orb will be created and positioned at the coordinates of the mouse click. A random color and
size are generated and passed into the constructor of the new orb. Finally, the orb is added to the stage.
A keyboard listener was also set, which will first check the key code for the
Enter
key. If
Enter
was pressed, the
dataToURL
method is called on the stage's canvas, passing in the type of file you wish to create. This is set to an
img
variable, which is finally opened in a new window (see Figure
8-3
).
