Organizing Game Objects - Building JavaScript Games for Phones, Tablets, and Desktop - page 147

Ball

false shooting

ThreeColorGameObject

Vector2

position

0 rotation x 0 y 0

Vector2

true visible

velocity

x 0 y 0

... colorRed

Vector2

... colorGreen

origin

x 0 y 0

... colorBlue

... currentColor

Figure 11-3. An instance of the Ball class (which inherits from ThreeColorGameObject )

You might be a bit puzzled by these two figures and the structures they present. Later, this chapter
discusses memory structure in a bit more detail. For now, assume that complicated objects
consisting of multiple member variables (such as Cannon or Ball instances) are stored differently
than simple numbers or Booleans. What that means and how you should properly deal with it in your
code are covered at the end of the chapter.
The update method in the ThreeColorGameObject class contains only a single line of code that
calculates the new position of the game object based on its velocity, the time passed, and its
current position:

this.position.addTo(this.velocity.multiply(delta));

Balls should do more than that. The ball velocity should be updated to incorporate drag and gravity;
the color of the ball should be updated if needed; and if the ball flies outside the screen, it should
be reset to its original position. You could simply copy the update method from the previous
version of the Ball class so that it replaces the update method of ThreeColorGameObject . A slightly
nicer way to do it is to define the update method in the Ball class but reuse the original update
method from ThreeColorGameObject . This can be done by using the call method in a way very
similar to how you used it to call the constructor of the superclass. Here is the new version of the
Ball.update method:

Ball.prototype.update = function (delta) {
ThreeColorGameObject.prototype.update.call(this, delta);
if (this.shooting) {
this.velocity.x *= 0.99;
this.velocity.y += 6;
}