2D Canvas: low-level, 2D graphics rendering - HTML5 in Action - page 249

Step 1: Move the paddle horizontally
To make the paddle move, adjust the x-axis each time it's drawn. Making x positive will
draw the paddle forward (pushed to the right), a negative value will pull it back (pushed
to the left). Earlier you created a Paddle.speed property with a value of 4 in your
init() . Just fill the empty Paddle.move() method with the following snippet, and
your paddle will move:
var Paddle = {
move : function () {
this . x += this . speed ;
}
};
Now, refresh your page. Oh no! The paddle swims off into oblivion because it lacks a
movement limiter. The only way to keep your paddle from vanishing is to integrate overlap
detection, which you'll deal with in the next section. First though, you need to get the ball
moving.
Step 2: Make the ball move
Making the ball move is almost identical to moving the paddle. Use the Ball.sx and
Ball.sy properties you declared earlier to modify the ball's x and y coordinates. Replace
Ball.move() with the following snippet:
var Ball = {
move : function () {
this . x += this . sx ;
this . y += this . sy ;
}
};
If you'd like to try refreshing, you'll notice that the ball and paddle fly off the screen and
disappear. Although their disappearance may leave you depressed and lonely, never fear!
You'll soon retrieve them by integrating overlap detection.