Workshop › Pac-Man-style Maze Chase › Step 3 of 42

Draw the walls

What we are doing

Walk through every character of the map: a # becomes a blue square slightly smaller than its tile, so walls read as blocks with thin gaps; a - (the ghost house) fills its whole tile in dark purple.

```js
  MAZE.forEach((line, row) => {
    ;[...line].forEach((ch, col) => {
      if (ch === '#') {
        ctx.fillStyle = '#1d4ed8'
        ctx.fillRect(col * TILE + 2, TOP + row * TILE + 2, TILE - 4, TILE - 4)
      }
      if (ch === '-') {
        ctx.fillStyle = '#312e81'
        ctx.fillRect(col * TILE, TOP + row * TILE, TILE, TILE)
      }
    })
  })
```

What it means

forEach((item, index) => ...) runs the function for every item and also gives its position: here the row text and its row number, then each character and its column.
[...line] splits a string into characters. The ; in front stops JavaScript from gluing a line that starts with [ to the line before it.
Column col starts at col * TILE pixels, row row at TOP + row * TILE.

Your turn

In draw, under the background lines, leave an empty line and write the loops.

Skills: Drawing on a canvas, Arrays and objects

← The game loop A set of pellets →

All steps