HTML and CSS Reference
In-Depth Information
Bouncing a Single Ball
In this first example, we will create a ball traveling on a vector. We will set the speed (mag-
nitude) to 5 and the angle (direction) to 35 degrees. The rest of the variables are identical to
those in Example 5-3 . We are still moving on a vector, but now we will test to see whether
the ball hits a “wall” (the edges of the canvas), in which case it will bounce off, using the rule
of the angle of reflection. One big change from the previous vector example is the location in
which we initialize the values for radians , xunits , and yunits . Instead of setting them up
when we initialize the application in canvasApp() , we save that for a call to a new function
named updateBall() :
var
var speed = 5 ;
var
var p1 = { x : 20 , y : 20 };
var
var angle = 35 ;
var
var
var xunits = 0 ;
var
var yunits = 0 ;
var
var ball = { x : p1 . x , y : p1 . y };
updateBall ();
The updateBall() function is called every time we set a new angle for the ball, because we
need to recalculate the radians and find new values for xunits and yunits . A new angle
value is generated when the app starts, as well as every time the ball bounces off a wall:
function
function updateBall () {
radians = angle * Math . PI / 180 ;
xunits = Math . cos ( radians ) * speed ;
yunits = Math . sin ( radians ) * speed ;
}
In drawScreen() , we update the position of the ball and then draw it on the canvas:
ball . x += xunits ;
ball . y += yunits ;
context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , 15 , 0 , Math . PI * 2 , true
true );
context . closePath ();
context . fill ();
Next, we test to see whether the ball has hit a wall before we draw it to the canvas. If the ball
hits the right side ( ball.x > theCanvas.width ) or the left side ( ball.x < 0 ) of the canvas,
we set the angle to 180 degrees minus the angle of the vector on which the ball is traveling.
This gives us the angle of reflection. Alternatively, if the ball hits the top ( ball.y < 0 ) or
Search WWH ::

Custom Search