HTML and CSS Reference
In-Depth Information
If so, place it on the edge of that boundary.
Then reverse the velocity.
That's all there is to it, so let's see it in action. The next example again uses the same
Ball
class, but
scaled back up to a decent size. Here's the document
(04-bouncing-1.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bouncing 1</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'),
ball = new Ball(),
vx = Math.random() * 10 - 5,
vy = Math.random() * 10 - 5;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var left = 0,
right = canvas.width,
top = 0,
bottom = canvas.height;
ball.x += vx;
ball.y += vy;
if (ball.x + ball.radius > right) {
ball.x = right - ball.radius;
vx *= -1;
} else if (ball.x - ball.radius < left) {
ball.x = left + ball.radius;
vx *= -1;
}
if (ball.y + ball.radius > bottom) {
ball.y = bottom - ball.radius;
vy *= -1;
} else if (ball.y - ball.radius < top) {
ball.y = top + ball.radius;
vy *= -1;
