O'Reilly logo

Instant HTML5 2D Platformer by Aidan Temple

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the level (Must know)

In this recipe, we will look at the necessary steps required to create and implement a level. This will be done by implementing a level object and updating the games framework to handle the loading and drawing of modular 2D tile assets. This modular construction allows levels to be designed with varying environmental layouts and sizes.

How to do it...

  1. In order to implement a level, we will need to modify both the Player and Main objects as well as introduce a level manager object. Go ahead and open the Main object and add the following declaration below where we declared and loaded our player sprite:
    var tile = new Image();
    tile.src = "textures/tile.png";
  2. This declaration creates a new image object, which will represent ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required