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:

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:

• Static tilemaps with Canvas API
• Scrolling tilemaps with 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!