Math, Physics, and Animation - HTML5 Canvas - page 306

var var dx = p2 . x - p1 . x ;

var

var dy = p2 . y - p1 . y ;

To determine the distance value, we square both the values we just created, add them, and
then use the Math.sqrt() function to get the square root of the number:

var var distance = Math . sqrt ( dx * dx + dy * dy );

Next, we need to use that calculated distance value in a way that will allow us to move an
object a uniform number of pixels from p1 to p2 . The first thing we do is calculate how many
moves (callsto drawScreen() )itwilltaketheobjecttomoveatthegivenvalueof speed .We
get this by dividing the distance by the speed :

var var moves = distance / speed ;

Thenwefindthedistancetomoveboth x and y oneachcallto drawScreen() .Wenamethese
variables xunits and yunits :

var var xunits = ( p2 . x - p1 . x ) / moves ;

var

var yunits = ( p2 . y - p1 . y ) / moves ;

Finally, we create a dynamic object named ball that holds the x and y value of p1 :

var var ball = { x : p1 . x , y : p1 . y };

And create the interval to call drawScreen() every 33 milliseconds:

function function gameLoop () {

window . setTimeout ( gameLoop , 20 );
drawScreen ()

}
gameLoop ();

Drawing the ball

Let'sdrawtheballonthescreen.Inthe drawScreen() function,wefirstchecktoseewhether
the moves variable is greater than zero. If so, we are still supposed to move the ball across the
screen because we have not yet reached p2 . We decrement moves ( moves-- ) and then update
the x and y properties of the ball object by adding the xunits to x and yunits to y :

iif ( moves > 0 ) {
moves -- ;
ball . x += xunits ;
ball . y += yunits ;

}