HTML and CSS Reference
In-Depth Information
<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'),
balls = [],
numBalls = 8,
bounce = -1.0;
for (var radius, ball, i = 0; i < numBalls; i++) {
radius = Math.random() * 20 + 15;
ball = new Ball(radius);
ball.mass = radius;
ball.x = i * 100;
ball.y = i * 50;
ball.vx = Math.random() * 10 - 5;
ball.vy = Math.random() * 10 - 5;
balls.push(ball);
}
function rotate (x, y, sin, cos, reverse) {
return {
x: (reverse) ? (x * cos + y * sin) : (x * cos - y * sin),
y: (reverse) ? (y * cos - x * sin) : (y * cos + x * sin)
};
}
function checkCollision (ball0, ball1) {
//not listed, same as previous example...
}
function checkWalls (ball) {
//not listed, same as previous example...
}
function move (ball) {
ball.x += ball.vx;
ball.y += ball.vy;
checkWalls(ball);
}
function draw (ball) {
ball.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
balls.forEach(move);
