A Blank <canvas> to Play With

A Blank <canvas> to Play With: A Historically-Grounded Examination of the <canvas> Element

Jumping

The defining characteristic of the platformer genre is the player character’s ability to jump into the air. It’s the primary vertical movement option game developers add to platform games. This maneuver is used in games to cross gaps and jump from platform to platform, climb up structures and dodge or even defeat enemies. Game developers implement all sorts of design choices for jumping, from the standard “up-then-down” that Super Mario Bros. uses to more powerful options such as Yoshi’s flutter kick to maintain altitude for a short time in the Yoshi’s Island games and Kirby’s ability to inflate like a balloon and float freely in the Kirby games.

Through my years of playing games, I’ve formed my own list of practices related to how jumping should be in platform games, which again focuses more on how it should work conceptually instead of how to literally write it and implement it. When I researched practices for jumping in <canvas> games, I expected to find practices similar to my own thoughts, such as “don’t make a level that has the player constantly jumping across obstacles, put in safe areas to give them a break” or “avoid making obstacles that the player has to jump from a very specific spot in a very precise way to clear.”

And yet again the majority of the practices I found pertained to coding the jumping behaviors instead of ideals on how it should look. Looking across several basic tutorials on how to create a platformer in <canvas>, the best way to write jumping behavior is to:

  1. Tie the jump input to the space key or the up arrow
  2. Write a true/false state that determines if the character is jumping or not to prevent jumping in the air
  3. Apply a gravity value that subtracts from the value of the character’s vertical velocity gained from the jump for each iteration of the game loop.

All these practices together do a good job of simulating the behavior expected out of a jump; the character accelerates upwards then downwards. As for animating the jump, the same update loops that move the character on the screen can also progress through a set of sprites to animate them. The same practices that grab an image to use as a background can render the sprites needed for an animation.

Click here to return to the home page.