Game Object Types - Building JavaScript Games for Phones, Tablets, and Desktop - page 111

Now that you've initialized the can and updated its position, you need to handle the special cases.
For the paint can, you have to check whether it has fallen outside the game world. If so, you need
to reset it. The nice thing is that you already wrote a method to check whether a certain position is
outside the game world: the isOutsideWorld method in the PainterGameWorld class. You can now
use that method again to check whether the position of the can is outside the game world. If this is
the case, you need to reset the can so it's placed at the top, outside the screen again. The complete
if instruction then becomes
if (Game.gameWorld.isOutsideWorld(this.position))
this.moveToTop();
Finally, in order to make the game a bit more challenging, you slightly increase the minimum velocity
of the can each time you go through the update loop:
this.minVelocity = this.minVelocity + 0.01;
Because the minimum velocity slowly increases, the game becomes more difficult as time
progresses.
Drawing the Cans on the Screen
To draw the paint cans on the screen, you add a draw method to the PaintCan class, which simply
draws the paint-can sprite at the desired position. In the PainterGameWorld class, you call the
handleInput , update , and draw methods on the different game objects. For example, the draw
method in PainterGameWorld is as follows:
PainterGameWorld.prototype.draw = function () {
Canvas2D.drawImage(sprites.background, { x : 0, y : 0 }, 0,
{ x : 0, y : 0 });
this.ball.draw();
this.cannon.draw();
this.can1.draw();
this.can2.draw();
this.can3.draw();
};
All the code for the Painter5 example is available in the example folder belonging to this chapter.
Figure 8-1 shows a screenshot of the Painter5 example, which now has three falling paint cans.