HTML and CSS Reference
In-Depth Information
Figure 11-9.
Setting the objects for the conservation of momentum on two axes
Here's the example,
03-billiard-3.html
, though don't test it yet, because we still need to define the
checkCollision
function, which we do in a moment:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Billiard 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball0 = new Ball(80),
ball1 = new Ball(40),
bounce = -1.0;
ball0.mass = 2;
ball0.x = canvas.width - 200;
ball0.y = canvas.height - 200;
ball0.vx = Math.random() * 10 - 5;
ball0.vy = Math.random() * 10 - 5;
ball1.mass = 1;
ball1.x = 100;
ball1.y = 100;
ball1.vx = Math.random() * 10 - 5;
ball1.vy = Math.random() * 10 - 5;
function checkCollision (ball0, ball1) {
//not defined yet...
}
function checkWalls (ball) {
if (ball.x + ball.radius > canvas.width) {
ball.x = canvas.width - ball.radius;
