HTML and CSS Reference
In-Depth Information
}
Ship.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = "#ffffff";
context.beginPath();
context.moveTo(10, 0);
context.lineTo(-10, 10);
context.lineTo(-5, 0);
context.lineTo(-10, -10);
context.lineTo(10, 0);
context.stroke();
if (this.showFlame) {
context.beginPath();
context.moveTo(-7.5, -5);
context.lineTo(-15, 0);
context.lineTo(-7.5, 5);
context.stroke();
}
context.restore();
};
The
draw
method references the ship's property
showFlame
, which is a true or false value. This way, you
can draw the ship with or without a flame showing. This is useful to show that the engines are firing. You
can see how it looks with and without the flame in Figures 5-8 and 5-9.
Figure 5-8.
The future of space travel.
