For the sake of following along with the code in this article, you should be familiar with JavaScript, as well as have an understanding of HTML5 Canvas basics.

If you aren’t yet acquainted with Canvas, it would be beneficial to take a few minutes to look over this introductory article before moving forward.

---

WHAT ARE WE BUILDING?

The finished product will be a simple 2D side-scroller game.

• Simple concept, clear objective: The player is presented with “obstacles” as they move forward and should jump to avoid them.
• The forward running, backward running, and jumping actions are controlled by the associated cursor keys (arrows) on the keyboard.
• We’ll keep the canvas elements uncomplicated (just squares and triangles) so we can better focus on the element motion and “endless runner” effect that actually make this feel like a real game.

---

SETTING THE STAGE

Before we look at what makes up the actual “game” code, we need to set up our project files and create the canvas element we intend to use.

#canvas #2d #javascript #game-development #side-scroller