Sorry, this example cannot be run because your browser does not support the <canvas> element

LEFT/RIGHT to move, SPACE to jump, collect gold and jump on monsters.

Defining entities

In addition to defining our platform layout, we can now use the Tiled editor to add our entities.

Add an ‘object’ layer

Draw an object for the player (starting position)

Draw objects for each monster

Draw objects for each treasure

We can also give each monster additional properties, such as a maxdx speed, and a left or right direction.

Using AJAX to load level.json

Since we’re now using more than just the array of cells from the level editor, it makes sense to load
the entire file output from the editor. We will export the level in JSON format and then use a small
AJAX helper method to load it at run-time:

NOTE: We can (optionally) give each object unique properties within the editor, allowing us to setup
monster entities that have different characteristics, e.g. different directions, speeds, acceleration,
even varying the effects of gravity on a per-entity basis.

Updating Monsters

The update() method in the original tiny platformer was all about the player, but if we
extract that code into a separate updateEntity() method then we can re-use it for the
new monster entities as well:

We can also extend the updateMonster() method to detect any collisions with the player. Notice
how easily we can provide the ability for either the monster to kill the player, or vice versa,
by detecting if the player is currently falling onto the monster.

Rendering

Rendering is generally the same as it was before. We continue to use plain vanilla <canvas> fillRect() calls, except
we break our rendering method into its component parts to keep it simple, and remember to avoid rendering monsters that are
dead or treasure that has been collected: