Sprite animations


This project shows how to make a Platformer game in Vanilla JavaScript on an HTML canvas, with a focus on how to create sprite animations. The code serves as a template for more complex browser games.

There are three canvases, one for the background, one for the tiles (not redrawn during the game loop) and one for the game entities.

The game entities follow an object-oriented pattern and are divided into the following classes:

  • Rectangles
  • Sprites (can be animated, follow some physics, and may have optional features)
  • Players (sprites with collision detection which can be controlled to walk, jump and plant flowers)
  • Birds (sprites that fly back and forth)

Both controls and features are made reusable so that they can also be applied to other classes of sprites. It is not a complete game and has just one level, but it can easily be extended to a proper game.

This is a continuation of my previous template where all entities were just drawn as plain rectangles.

  • Browser game
  • HTML Canvas
  • Tutorial
  • Vanilla JS