Colors and Collisions - Building JavaScript Games for Phones, Tablets, and Desktop - page 119

components can be defined in a similar way. #808080 is gray, #800080 results in a purple color, and
#FF00FF is magenta.
Here is a part of the Color variable:
var Color = {
aliceBlue: "#F0F8FF",
antiqueWhite: "#FAEBD7",
aqua: "#00FFFF",
aquamarine: "#7FFFD4",
azure: "#F0FFFF",
beige: "#F5F5DC",
bisque: "#FFE4C4",
black: "#000000",
blanchedAlmond: "#FFEBCD",
blue: "#0000FF",
blueViolet: "#8A2BE2",
brown: "#A52A2A",
// and so on
}
For a more complete list of colors, see the Color.js file. You can now begin using these color
definitions in your classes.
Controlled Data Access for Objects
Three game-object classes represent an object of a certain color: Cannon , Ball , and PaintCan .
For simplicity, let's start with how you can modify the Cannon class to use the color definitions from
the previous section. Until now, this is what the Cannon constructor has looked like:
function Cannon() {
this.position = new Vector2(72, 405);
this.colorPosition = new Vector2(55, 388);
this.origin = new Vector2(34, 34);
this.currentColor = sprites.cannon_red;
this.rotation = 0;
}
What you could do is add another member variable that gives the current color of the cannon.
So, the new Cannon constructor would be as follows:
function Cannon() {
this.position = new Vector2(72, 405);
this.colorPosition = new Vector2(55, 388);
this.origin = new Vector2(34, 34);
this.currentColor = sprites.cannon_red;
this.color = Color.red;
this.rotation = 0;
}