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

Action

We've already made a ball, now let's make it move. In order to do so, we'll create a draw() function which wipes the screen, draws the ball, then updates its current position. We'll use a call to setInterval(function, timeout) in the init() function to tell the browser to run our draw function every 10 milliseconds, creating the illusion of movement.

Try changing the dx and dy values to change the direction of the ball, or change the x and y variables to change where the ball will start. Make sure to try negative values for dx and dy.

next prev