World One
The foundational series. Build a top-down tile world from scratch — grid, movement, collision, interaction, and enemies.
No prior game development experience needed — just some familiarity with JavaScript.
The Foundation
- Why Tiles? - Introduction to tile-based games
- Map Format - How to store tile maps
- More Maps - Working with different map types
- Rendering a Map - Drawing your world
- The Hero - Adding a player character
- Keys to Move - Player movement
- Hit the Wall - Collision detection
Making a Game
- Getting Items - Collectibles and pickups
- Open the Door - Multi-room worlds
- Locked Doors - Keys and locked doors
- Pushing Tiles - Tile puzzles
- Stupid Enemy - Basic AI
- Bringing it together - Series showcase
- Going further - Optional extras
Originally inspired by Tonypa’s tile-based tutorials, modernized for JavaScript and Pixi.js.
-
Why Tiles?
Games like Super Mario Bros, The Legend of Zelda, and Stardew Valley build their worlds from tiles — small, reusable images arranged on a grid. The technique has been around since the early arcade era, and it’s still standard practice because it solves a real problem efficiently.
So if you want to put a nice background into your game, but the picture would be too large and make the game very slow. What to do? Slice the picture into tiles!
-
Map Format
Maps in tile-based games are stored as 2D arrays — grids of numbers where each value identifies a tile type. The position of each number in the array corresponds directly to its position in the world.
2D arrays
A 2D array is an array whose elements are themselves arrays. Each inner array is a row, and the outer array holds all the rows. Starting simple:
A basic array might store your player’s inventory:
-
More Maps
2D arrays work well for most tile-based games, but the format has trade-offs. Different game structures call for different storage strategies — this section covers the main options and when each makes sense.
Frame-based mapping
Each number in the array directly represents a sprite frame or tile type. No separate type definitions required — the number is the tile identity.
// Each number = a different tile graphic const levelMap = [ [5, 5, 5, 5, 5], // Stone walls [5, 1, 2, 3, 5], // Floor, grass, water, sand [5, 5, 5, 5, 5] // Stone walls ]; // Define tile ranges for collision const TileRanges = { walkable: [1, 2, 3], // Frames 1-3 are walkable walls: [5], // Frame 5 blocks movement water: [2], // Frame 2 is water (maybe slows player?) damage: [10, 11, 12] // Frames 10-12 hurt the player };Good for: Retro platformers, puzzle games, simple RPGs
Trade-off: Fast to implement and reason about; harder to attach complex behaviour to individual tile types later. -
Rendering a Map
Rendering converts a 2D array into a visual grid. For each value in the map, draw a coloured rectangle at the corresponding pixel position.
Array: Visual result: [1, 1, 1, 1] → 🧱🧱🧱🧱 [1, 0, 0, 1] → 🧱 🌟🌟🧱 [1, 1, 1, 1] → 🧱🧱🧱🧱 Each 1 becomes a solid wall, each 0 becomes walkable space.Loading editor…Map data and tile definitions
The map and tile type definitions from the previous tutorial, ready to use:
-
The Hero
The hero is a data object that stores position, size, and a reference to its sprite. Separating data from visuals keeps the game logic independent of how things are drawn.
Loading editor…The hero object
The hero stores two coordinate systems alongside its sprite reference:
-
Keys to Move
Keyboard input in the browser works via two events:
keydownfires when a key is pressed,keyupfires when it’s released. Store the current state of each key in an object, then read that state each frame in the game loop.Loading editor…Character setup
The hero object from the previous tutorial, with direction and movement state added:
-
Hit the Wall
Collision detection prevents the hero from entering solid tiles. Before applying a movement, check whether the destination tile is walkable — if it isn’t, cancel the move.
Loading editor…The hero turns light red when a move is blocked and white when it moves freely.
-
Getting Items
Collectibles are a staple of tile-based games — coins in Mario, rupees in Zelda, rings in Sonic. The pickup system needs to do three things: track what items exist and where, detect when the player steps on one, and remove it permanently so it doesn’t reappear.
Loading editor…Items are different in what they do - coins add a little to your score, gems are worth ten times more. That’s the same trick games use to reward you for exploring off the beaten path. In this tutorial all items just give points, but the same pattern works for health potions, ammo pickups, power-ups, or anything else you want to create!
-
Open the Door
A single room is a demo. A connected world — rooms that lead to other rooms — is a game. This tutorial adds a multi-room system: each room is a map stored in an object, and door tiles trigger transitions between them.
Loading editor…Walk into the yellow door tiles to move between rooms.
-
Locked Doors
A door you can walk through is a transition. A door you have to earn is a puzzle. Locked doors are one of the oldest tricks in game design — find the key, open the way forward. Let’s combine what you know about items and doors to build one.
Loading editor…The gold circle is the key. The red door on the right won’t let you through until you’ve picked it up — then it turns green and you can pass. Try walking into it without the key first.
-
Pushing Tiles
Loading editor…Walk into an orange block and it slides one tile in the direction you were moving — but only if the tile behind it is empty. Walk it into a wall and it stops. Walk it into a corner and it’s stuck there permanently.
-
Stupid Enemy
A wall-bouncing enemy is the simplest moving threat: each frame, advance by
moveX/moveY; if the next position hits a solid tile, reverse direction. That’s the entire AI.Loading editor…Why simple enemies work
Pac-Man’s ghosts use simple chase and scatter rules. Mario’s Goombas walk in straight lines. Space Invaders move in formation. None of these are complex behaviours, but all of them create spatial and timing challenges for the player.
-
A Living World
Every piece from this series in one place. A tile world with movement, collision, a patrolling enemy, a key to find, a pushable block, and a locked door to earn your way through.
Loading editor…Everything from the series is here:
-
Going further
Four rooms. One key. Everything from this series working together as a designed sequence.
Loading editor…Four rooms, each asking something different of you: