HTML and CSS Reference
In-Depth Information
Distance = 60
Radius = 30
Radius = 30
Diameter = 60
Diameter = 60
Figure 9-7.
The distance of a collision
You can see the two circular objects in a position where they are just touching. Consider that each ball is
60 pixels across, which gives it a radius of 30. Thus, at the exact moment they touch, they are exactly 60
pixels apart—there's the answer. For two circular objects of the same size, if the distance is less than their
diameter, they are colliding. Here's the code for this example (
04-distance-1.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Distance 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea id="log"></textarea>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
log = document.getElementById('log'),
ballA = new Ball(30),
ballB = new Ball(30);
ballA.x = canvas.width / 2;
ballA.y = canvas.height / 2;
