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

A red ghost

What we are doing

Ghosts are described once in GHOSTS (for now one: red) and turned into moving objects by placeActors, each starting on EXIT, the tile just above the house, heading left. They have the same fields as the player, so position works for them too.

```js
const EXIT = { col: 9, row: 7 } // the tile just above the ghost house
const GHOSTS = [{ name: 'red', color: '#ef4444' }]

let ghosts

  ghosts = GHOSTS.map((g) => ({ ...g, col: EXIT.col, row: EXIT.row, dir: [-1, 0], progress: 0, frames: 10 }))

  for (const g of ghosts) {
    const q = position(g)
    ctx.fillStyle = g.color
    ctx.fillRect(q.x * TILE + 3, TOP + q.y * TILE + 3, TILE - 6, TILE - 6)
  }
```

What it means

GHOSTS.map(...) makes one new object per description. { ...g, col: ... } copies the description's fields (name, color) and adds the moving ones.
The object in map's arrow function is wrapped in ( ), so the braces are read as an object, not a function body.
Each ghost is drawn as a square in its color, 3 pixels smaller than its tile on every side, at its position.

Your turn

Under PLAYER_FRAMES write EXIT and GHOSTS; under let player write let ghosts.
In placeActors, under the player line, write the ghosts line.
In draw, above const p = position(player), write the ghost loop and an empty line.

Skills: Game states, Arrays and objects

← Clear the maze A ghost never turns back →

A red ghost

What we are doing

What it means

Your turn

All steps