HTML and CSS Reference

In-Depth Information

To determine the
distance
, 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 distance = Math.sqrt(dx*dx + dy*dy);

Next, we need to use that calculated
distance
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
(calls to
drawScreen()
) it will take the object to move at the given value of

speed
. We get this by dividing the
distance
by the
speed
:

var moves = distance/speed;

Then we find the distance to move both
x
and
y
on each call to
drawScreen()
. We name

these variables
xunits
and
yunits
:

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

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 ball = {x:p1.x, y:p1.y};

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

setInterval(drawScreen, 33);

Drawing the ball

Let's draw the ball on the screen. In the
drawScreen()
function, we first check to see

whether 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
:

if (moves > 0 ) {

moves--;

ball.x += xunits;

ball.y += yunits;

}

Now that our
values
have been updated, we simply draw the ball at the
x
and
y
coor-

dinates specified by the
x
and
y
properties, and we are done…that is, until

drawScreen()
is called 33 milliseconds later:

context.fillStyle = "#000000";

context.beginPath();

context.arc(ball.x,ball.y,15,0,Math.PI*2,true);

context.closePath();

context.fill();