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();
Search WWH ::

Custom Search