Basic Game Objects - Building JavaScript Games for Phones, Tablets, and Desktop - page 91

Figure 7-1. A screenshot of the Painter4 example that contains a cannon barrel and a flying ball
In the games you develop in this topic, most of the objects have a position and a velocity.
Because the topic is only concerned with 2D games, both the position and the velocity are always
variables that consists of an x and a y variable. When you update these game objects, you need to
calculate the new position based on the velocity vector and the time that has passed. Later in this
chapter, you see how to do that.
In order to be able to use the ball object, you need a few more sprites. In the Game.loadAssets
method, you load the red, green, and blue ball sprites. Depending on the color of the cannon, you
change the color of the ball later. This is the extended loadAssets method:
Game.loadAssets = function () {
var loadSprite = function (sprite) {
return Game.loadSprite("../../assets/Painter/sprites/" + sprite);
};
sprites.background = loadSprite("spr_background.jpg");
sprites.cannon_barrel = loadSprite("spr_cannon_barrel.png");
sprites.cannon_red = loadSprite("spr_cannon_red.png");
sprites.cannon_green = loadSprite("spr_cannon_green.png");
sprites.cannon_blue = loadSprite("spr_cannon_blue.png");
sprites.ball_red = loadSprite("spr_ball_red.png");
sprites.ball_green = loadSprite("spr_ball_green.png");
sprites.ball_blue = loadSprite("spr_ball_blue.png");
};