Creating a Bouncing Ball Animation Using JavaScript and Canvas

An introduction to animation, collision detection, object-oriented programming, and some physics.

final animation

Prerequisites / Info

• This is part of the JS Game Dev Series
• I recommend reading the previous tutorial but it’s not required
• You should have some knowledge of JavaScript — I will not explain irrelevant syntax such as for-loops
• The second section requires more advanced knowledge of JS but it’s optional
• Basic math/geometry knowledge
• Basic knowledge of physics

Starter Code

I moved this to a separate page to keep these tutorials short and so I only have to update it in one place.

Setup a Canvas Starter Boilerplate

Final Code for this Tutorial

All the code from this tutorial is available on the repository below. It also includes several files for the different stages/examples in this article.