Game Development Reference
In-Depth Information
The following example shows this in use in an application. Notice how much easier it is to use when its
functionality is
black boxed
into a reusable object.
// new orb
var orb = new Orb('#0F0');
stage.addChild(orb);
// using orb
score += orb.points;
orb.die();
Let's make a simple application using these new procedures.
Pulsing Orbs
Pulsing Orbs is an application where the user can click around the screen to add colorful, pulsing orbs to create an
artful image.
•
Allow user to click anywhere on the stage to create a new pulsing orb.
Shape
class.
•
The orbs should be custom objects that extend the EaselJS
•
Orbs should be both random in color and size.
•
User can export a snapshot image of their art by pressing
Enter
on the keyboard.
•
This feature will turn the canvas into an image and open it in a new window, where the user
can copy or save their image.
Set up the HTML document that includes a
canvas
element and the necessary CreateJS file includes. You'll also
create two JavaScript files: one for the application (
pulsingOrbs
.
js
) and another for the orb class (
PulsingOrb
.
js
),
as shown in Listing 8-3.
Listing 8-3.
HTML File for Pulsing Orbs
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/easeljs-0.7.1.min.js"></script>
<script src="PulsingOrb.js"></script>
<script src="pulsingOrbs.js"></script>
</head>
<body onload="init()">
<canvas id="canvas" width="800" height="600" style="border: black solid 1px"></canvas>
</body>
</html>
Let's start with the
PulsingOrb
class. This object will be written its own file,
PulsingOrb
.
js
(see Listing 8-4).
