Finishing the Painter Game - Building JavaScript Games for Phones, Tablets, and Desktop - page 154

Chapter 12
Finishing the Painter Game
In this chapter, you finish the Painter game by adding a few extra features such as motion effects,
sounds, and music, and maintaining and displaying a score. Finally, you learn about characters and
strings in a bit more detail.
Adding Motion Effects
In order to make the game more visually appealing, you can introduce a nice rotational effect in the
movement of the paint cans to simulate the effect of wind and friction on the falling motion. The
Painter10 program that belongs to this chapter is the final version of the game with this motion
effect added to the cans. Adding such an effect isn't complicated. Thanks to the work you did in
the previous chapter, only a single line needs to be added to the update method of the PaintCan
class. Because PaintCan is a subclass of ThreeColorGameObject , it already has a rotation member
variable, which is automatically taken into account when the sprite is drawn on the screen!
In order to achieve the motion effect, you use the Math.sin method. By letting the value depend on
the current position of the can, you get different values depending on that position. You then use
this value to apply a rotation on the sprite. This is the line of code you add to the PaintCan.update
method:
this.rotation = Math.sin(this.position.y / 50) * 0.05;
This instruction uses the y-coordinate of the paint-can position to get different rotation values.
Furthermore, you divide it by 50 to get a nice slow movement; and you multiply the outcome by 0.05
to reduce the amplitude of the sine so the rotation looks more or less realistic. If you like, you can try
out different values and see how they affect the behavior of the paint cans.
159