Workshop › Wolfenstein-style 3D Maze › Step 1 of 18

Wolfenstein-style 3D Maze: The map

Walk through a 3D maze drawn from a flat map, the way the first 3D shooters did it. Angles with sin and cos, sliding along walls, casting rays through a grid (DDA), perspective, the fish-eye fix and shading.

What we are doing

We are building a 3D maze like the first 3D shooters (Wolfenstein 3D): you walk inside it and see walls in perspective. The trick: the world is really a flat grid. First we write that grid as a list of strings and draw it small in the corner, as a minimap.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

// # stone wall, 2 brick wall, E the exit (a wall you walk into), . floor.
const MAP = [
  '############',
  '#....#.....#',
  '#.##.#.###.#',
  '#.#..#...#.#',
  '#.#.###2#..#',
  '#.#.....#.##',
  '#.#22#.##..#',
  '#..........#',
  '###.##.#.#.#',
  '#...#..#.#.#',
  '#.#...##.#E#',
  '############',
]
const MINI = 8 // minimap pixels per tile

function draw() {
  // The minimap, seen from above.
  MAP.forEach((line, row) => {
    ;[...line].forEach((ch, col) => {
      ctx.fillStyle = ch === '.' ? 'rgba(15, 23, 42, 0.6)' : ch === 'E' ? '#22c55e' : 'rgba(226, 232, 240, 0.8)'
      ctx.fillRect(col * MINI, row * MINI, MINI, MINI)
    })
  })
}

draw()
```

What it means

• Each string is a row, each character a tile: # and 2 are walls, E the exit, . floor.
• MAP.forEach((line, row) => ...) visits each row with its number; [...line] splits a row into characters.
• Each tile becomes an 8×8 square: dark floor, green exit, light walls.
• The ; in front of [...line] keeps JavaScript from gluing that line to the one before.

Your turn

Write the lines under the comments, then press Run.

Skills: Drawing on a canvas, Arrays and objects

The player →

All steps

1. The map
2. The player
3. Ceiling, floor and a loop
4. Turn around
5. Walk
6. Is it a wall?
7. Stop at walls, slide along them
8. A ray: where it starts
9. A ray: the grid lines
10. A ray: walk to the wall
11. The 3D view
12. No fish-eye
13. Light and shade
14. A timer
15. Escape!
16. Best time
17. Touch controls
18. Build it yourself: run