1. Introduction
  2. Draw a Circle
  3. Add Some Color
  4. Action
  5. Library: an Interlude
  6. Bounce
  7. Add a Paddle
  8. The Keyboard
  9. The Mouse
  10. The Bricks
  11. Finishing Touches
  12. Coda

The Keyboard

To add keyboard input to control our paddle, we need to do two things: find out when the left and right arrows have been pressed and move the paddle when they have.

In order to receive key events, we'll create one function called onKeyUp and another called onKeyDown, then use a bit of jQuery magic to bind them to the appropriate events.

Then, on our way through the draw function, we'll check to see if either arrow is pressed down, and move the paddle accordingly.

Now that we've got a working paddle, animation, and a bouncing ball, we've got something close to a game coming together.

On the next page, we'll move support for the keyboard into the library and add support for the mouse in a very similar manner.

next prev