HTML and CSS Reference
In-Depth Information
Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
Ball.prototype.getBounds = function () {
return {
x: this.x - this.radius,
y: this.y - this.radius,
width: this.radius * 2,
height: this.radius * 2
};
};
In the next example (document
01-billiard-1.html
), you create two different balls with different sizes,
positions, and masses. Ignore the y axis this time around, so the balls have the same vertical position.
When you load the example in your browser, the setup looks something like Figure 11-1.
Figure 11-1.
The anticipation builds! Setting up objects for conservation of momentum on one axis.
The balls are created and positioned at the beginning of the script. In the
drawFrame
animation loop, we
set up some basic motion code for one-axis velocity and simple distance-based collision detection; we'll
add the reaction code in a moment:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Billiard 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
