Reacting to Player Input - Building JavaScript Games for Phones, Tablets, and Desktop - page 70

Figure 6-1. A screenshot of the Painter2 program
You need to load three extra sprites, one for each colored ball. This is done with the following three
instructions:
sprites.cannon_red = Game.loadSprite(spriteFolder + "spr_cannon_red.png");
sprites.cannon_green = Game.loadSprite(spriteFolder + "spr_cannon_green.png");
sprites.cannon_blue = Game.loadSprite(spriteFolder + "spr_cannon_blue.png");
You add an initialize method to the cannon object, in which you assign values to variables
belonging to that object. This method is called from Game.start . That way, the cannon is initialized
when the game starts:
Game.start = function () {
Canvas2D.initialize("myCanvas");
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
document.onmousemove = handleMouseMove;
...
cannon.initialize();
window.setTimeout(Game.mainLoop, 500);
};
In the cannon.initialize method, you assign values to the variables belonging to the cannon.
This is the complete method:
cannon.initialize = function() {
cannon.position = { x : 72, y : 405 };
cannon.colorPosition = { x : 55, y : 388 };
cannon.origin = { x : 34, y : 34 };
cannon.currentColor = sprites.cannon_red;
cannon.rotation = 0;
};