HTML and CSS Reference
In-Depth Information
Makes the x and y properties for each ball equal to nextx and nexty respectively,
and then draws them to the canvas.
And here is the code:
function drawScreen () {
Updating positions of objects
The update() function loops through all the balls in the balls array, and updates the
nextx and nexty properties with the x and y velocity for each ball. We don't directly
update x and y here, because we want to test collisions against walls and other balls
before they occur. We will use the nextx and nexty properties for this purpose:
function update() {
for (var i = 0; i <balls.length; i++) {
ball = balls[i];
ball.nextx = (ball.x += ball.velocityx);
ball.nexty = (ball.y += ball.velocityy);
Better interaction with the walls
We discussed the interactions between balls and walls in the last example, but there is
still one issue. Since we move the balls by the x and y location of their center, the balls
would move halfway off the canvas before a bounce occurred. To fix this, we add or
subtract the radius of the ball object, depending on which walls we are testing. For
the right side and bottom of the canvas, we add the radius of the ball when we test the
walls. In this way, the ball will appear to bounce exactly when its edge hits a wall.
Similarly, we subtract the radius when we test the left side and the top of the canvas,
so that the ball does not move off the side before we make it bounce off a wall:
function testWalls() {
var ball;
var testBall;
for (var i = 0; i <balls.length; i++) {
ball = balls[i];
if (ball.nextx+ball.radius > theCanvas.width) {
ball.velocityx = ball.velocityx*−1;
ball.nextx = theCanvas.width - ball.radius;
Search WWH ::

Custom Search