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
radians
=
0
;

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