Game Assets - Building JavaScript Games for Phones, Tablets, and Desktop - page 49

Also, in the draw method, there are now two calls to the drawImage method instead of one:
Game.draw = function () {
Game.drawImage(Game.backgroundSprite, { x : 0, y : 0 });
Game.drawImage(Game.balloonSprite, Game.balloonPosition);
};
The order in which these methods are called is very important! Because you want the balloon to
appear on top of the background, you first have to draw the background, and then you draw the
balloon. If you did it the other way around, the background would be drawn over the balloon, and
you wouldn't see it anymore (try it yourself). Figure 4-2 shows the output of the program.
Figure 4-2. Output of the FlyingSprite program
Every time you want to draw a sprite on the screen, you add a call to the drawImage method in the draw
method. You can draw a single sprite several times, in different positions on the screen. For instance, if
you want to draw a few balloons at different positions over the background, you simply call drawImage
for every balloon you want to draw and pass the desired position as a parameter, as follows:
Game.draw = function () {
Game.drawImage(Game.backgroundSprite, { x : 0, y : 0 });
Game.drawImage(Game.balloonSprite, { x : 0, y : 0 });
Game.drawImage(Game.balloonSprite, { x : 100, y : 0 });
Game.drawImage(Game.balloonSprite, { x : 200, y : 0 });
Game.drawImage(Game.balloonSprite, { x : 0, y : 300 });
Game.drawImage(Game.balloonSprite, { x : 200, y : 300 });
};