Our first bit of Javascript code is to get a reference to the canvas and then draw a circle meant to represent a ball, all of this inside a function that will be called by pressing a button to start the game.


Explanation

Talk about jQuery. Add some jQuery window.

Get ahead of me!

Next, I will remove some hard coded values (such as 200, 32) and replace them by named variables, introduce a second function, init(), used to initialized the variables, and a third, draw_ball(), specifically introduced to draw a ball.

Can you do this before I do?

If so, you might want to save your solution by clicking on the image above, before moving on to the next section and thus be ready to compare your solution with mine.


Your notebook

Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.


HTML Add Note


  1. Introduction
  2. Drawing a Ball
  3. Defining Ball Variables
  4. Animate!
  5. Stop!
  6. Pause
  7. Bounce!
  8. Bouncing correctly
  9. Adding a paddle