Bouncing Ball - The Essential Guide to HTML5 - page 83

Code Explanation

moveandcheck();

Do the check and the move the ball

ctx.beginPath(); Start path

ctx.arc(ballx, bally,
ballrad,0,Math.PI*2,true);

Set up to draw of circle at current location of ball

ctx.fill(); Fill in the path; that is, draw a filled circle

ctx.strokeRect(boxx,boxy,
boxwidth,boxheight);

Draw rectangle outline

} Close moveball

function moveandcheck() {

Start of moveandcheck

var nballx = ballx + ballvx; Set tentative next x position

var nbally = bally +ballvy;

Set tentative next y position

if (nballx > boxboundx) { Is this x value beyond the right wall?

ballvx =-ballvx;

If so, change vertical displacement

nballx = boxboundx;

Set the next x to be exactly at this boundary.

} Close clause

if (nballx < inboxboundx) {

Is this x value less than the right boundary?

nballx = inboxboundx

If so, set the x value to be exactly at the boundary

ballvx = -ballvx; Change the vertical displacement

}

Close clause

if (nbally > boxboundy) { Is the y value beyond the bottom boundary?

nbally = boxboundy;

If so, set the y value to be exactly at the boundary

ballvy =-ballvy; Change the horizontal displacement