HTML and CSS Reference
In-Depth Information
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
activeBox.vy += gravity;
activeBox.y += activeBox.vy;
if (activeBox.y + activeBox.height > canvas.height) {
activeBox.y = canvas.height - activeBox.height;
activeBox = createBox();
}
boxes.forEach(drawBox);
}());
};
</script>
</body>
</html>
In the
drawFrame
function, the code checks whether the box has gone below the bottom of the canvas
element. And if so, it stops it and creates a new box. Then it iterates over the
boxes
array passing each
box to the
drawBox
function, which checks the active box against all the other boxes. First, it makes sure it
is not doing a hit test against itself, and then, at the heart of the program,
utils.intersects
determines
whether the box has hit another one. If it has, the code repositions the moving box to the top of the one it
just hit, and then creates a new box. Run this code for a minute or so, and you'll see something that looks
like in Figure 9.4.
