The Essential Guide to HTML5

CHAPTER 3

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)