We now remove hard coded values and introduce named variables instead. This will enable us to keep all the required changes, if needed, in one place.


Explanation

Other than for ctx, I follow the usual convention and (mostly) use ALL_CAPS to identify global variables. For now, I am more interested in getting a complete working game quickly than in trying to follow best code practice and encapsulate everything neatly inside objects, methods and functions. Nonetheless, by using ALL_CAPS for variable names, I will be reminded of what needs to be cleaned up at the end.

Get ahead of me!

Next, I will make the ball move. If you think you know how to do this, try it on your own before moving on to the code in the next section.


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