HTML and CSS Reference
In-Depth Information
var
Paddle
= {
move
:
function
() {
if
(
this
.
x
> -(
this
.
w
/
2
) &&
this
.
x
<
Game
.
width
- (
this
.
w
/
2
))
this
.
x
+=
this
.
speed
;
}
};
To stop the ball from dropping out of gameplay, reverse the direction if the ball is overlap-
ping the
<canvas>
's edge. In addition to reversing the ball, you must place it inside the
play area; otherwise, it will stick to edges at higher movement speeds. Use the code in the
next listing to make the ball repel off the gameplay area's sides by replacing
edges()
in
your
Ball
object.
Listing 6.9. game.js—Ball edge detection
Step 4: Enable collision detection
With the ball ricocheting, you'll need to use the paddle to deflect it toward the bricks. Be-
cause the ball changes direction on impact and the paddle stays stationary, you'll put your
deflection logic inside a
Ball.collide()
method, as in the following snippet. When
the ball's x and y coordinates overlap the paddle, you'll make the ball bounce in the op-
