Bouncing Ball - The Essential Guide to HTML5 - page 82

Code Explanation

var boxboundx =
boxwidth+boxx-ballrad;

Right boundary

var boxboundy =
boxheight+boxy-ballrad;

Bottom boundary

var inboxboundx =
boxx+ballrad;

Left boundary

var inboxboundy =
boxy+ballrad;

Top boundary

var ballx = 50;

Initial x position of ball

var bally = 60; Initial y position of ball

var ctx; Variable holding canvas context

var ballvx = 4;

Initial horizontal displacement

var ballvy = 8;

Initial vertical displacement

function init() { Start of init function

ctx = document.getElementById
('canvas').getContext('2d');

Set the ctx variable

ctx.linewidth = ballrad; Set line width

ctx.fillStyle ="rgb(200,0,50)";

Set fill style

moveball(); Invoke moveball function the first time to move,

check, and display the ball

setInterval(moveball,100); Set up timing event

Close of init function

}

function moveball(){ Start of moveball function

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

Clear (erase) box (including any paint from a ball)