HTML 5 games: Tilemaps

I recently joined the Developer Relations team at Mozilla, and my current focus is to help to create content for MDN about HTML 5 game development. I’m very excited about this, since creating games is a passion of mine. I switched to HTML5 game development to increase the reach of my games – which, by the way, is also a great thing to do if you are participating in a game jam.

Part of what we have been working on is a set of MDN articles about 2D tilemaps, a popular technique in game development – both in classic games and also recent ones.

Take this screenshot, for instance:

Mockup of a tile-based game - by Kenney

Game mockup out of an open-source tileset by Kenney

See how the game level is made up of smaller, square images? These smaller pieces are called tiles. A lot of games are based on tiles, visually and/or logically: Super Mario Bros, SimCity, Final Fantasy Tactics, Civilization, etc.

The “Tiles and Tilemaps overview” article provides a foundation about how tilemaps work. You will find it useful regardless of how you use them in your game (your own implementation or a 3rd-party) –or even the programming language or technology!

We have also written articles about how to implement tilemaps using the Canvas API:

Accompanying those articles there is a set of live demos you can check out, along with their source code. But there is one for you to try right here: click on the image below and then use the arrow keys to move the character.

We will keep working on creating new MDN content for HTML5 game development and keep you updated. I hope you enjoy it!

About Belén Albeza

Belén is an engineer and game developer working at Mozilla Developer Relations. She cares about web standards, high-quality code, accesibility and game development.

More articles by Belén Albeza…


  1. Remo Vetere

    Hi Belén,

    cool article! But i found it by googling around for a completely different thing. And that’s what i want to ask to somebody who is related with MDN – like you :-)

    I’ve had a really cool game idea recently – and what i need to accomplish for it is one basic thing -> Rendering a HTML Page in 3D. Just like the Developer Tools of Firefox has built in.

    I’m wondering if this code for this 3D Mode of the Inspector is somehow available to the public – or not. I mean, i could start playing around with three.js by myself and just fiddle out my own logic how to render HTML objects in 3D – but to accelerate the basic game developement, i wanted to invest some time to find out, if something like that is already available – just to get a little kickstart :-)

    My final vision of the game goes a lot more further then just plainly rendering a Website in 3D – but the basic to start would work just like the Inspector’s 3D mode.. :)

    So.. i’m pretty sure this is not the perfect way to reach out to you but i just have little time in my lunch-break at work here ^^

    All the best,

    October 27th, 2015 at 04:59

  2. Belén Albeza

    Hi Remo, Firefox is open-source so you can download its code from the mozilla-central ( repository. You might also find of use this wiki page about tinkering with the DevTools

    Good luck!

    October 27th, 2015 at 09:07

  3. Jesse

    I thought the mdn articles were really cool. Hopefully this will get me to actually finish a game some time.

    October 30th, 2015 at 13:02

Comments are closed for this article.