HTML and CSS Reference
In-Depth Information
Figure 9-3.
Not what you expected?
Each pair of shapes are colliding as far as our code is concerned. If you don't believe me, test the
following document,
01-object-hit-test.html
. It uses the
Ball
class we created earlier, so make sure
that script has been imported along with the updated
utils.js
file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object Hit Test</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'),
log = document.getElementById('log'),
mouse = utils.captureMouse(canvas),
ballA = new Ball(),
ballB = new Ball();
ballA.x = canvas.width / 2;
ballA.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ballB.x = mouse.x;
ballB.y = mouse.y;
if (utils.intersects(ballA.getBounds(), ballB.getBounds())) {
log.value = "Hit!";
} else {
