HTML and CSS Reference
In-Depth Information
if (y2 > -ball.radius
&& y2 < vy1
) {
//rotate coordinates
var x2 = x1 * cos + y1 * sin,
//rotate velocity
vx1 = ball.vx * cos + ball.vy * sin;
Using this code, you need to do a few extra calculations on each frame, with the payoff of greater accuracy
and realism—that familiar trade-off which you'll need to balance. The test may not even be necessary if
you have a setup where it's not possible for the ball to go under a line. If you don't need to worry about
this, and you can move the
vy1
calculation back inside the
if
statement and remove the extra check.
The document
09-angle-bounce-final.html
adds bouncing off the floors and walls, so that you can
eventually see the ball go under the line.
Bouncing off multiple angles
So far, you've just been bouncing off a single line, or angled surface. Bouncing off multiple surfaces is not
much more complicated—you just make a bunch of surfaces and loop through them. You can abstract the
angle-bouncing code into its own function and just call that from within the loop.
The next exercise is a complete program, using all the techniques you've seen in prior chapters. The setup
is similar to the last few examples, with the same
ball
and basic
line
object, except now the lines are a
bit smaller so there is room for more of them. The ball is added along with five lines positioned around the
canvas, which are in an array named
lines
. You can see the result in Figure 10-9.
Figure 10-9.
Multiple lines
Here's the code for the exercise (which you'll find in
10-multi-angle-bounce.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Angle Bounce</title>
<link rel="stylesheet" href="style.css">
</head>
