Workshop › Zelda-style Dungeon › Step 2 of 22

The hero

What we are doing

The hero is a green square, 22 pixels, standing in the middle of the P tile. findIn finds a character in a room. The hero also remembers which way it faces (down at first); the sword will need that. reset starts a new game.

```js
const SIZE = 22 // the player's and the enemies' bodies
let player

function reset() {
  const start = findIn(ROOMS[0][0], 'P')
  player = { x: start.col * T + (T - SIZE) / 2, y: start.row * T + (T - SIZE) / 2, dir: [0, 1] }
  enter(0, 0)
}

function findIn(lines, ch) {
  const row = lines.findIndex((line) => line.includes(ch))
  return { row, col: lines[row].indexOf(ch) }
}

  ctx.fillStyle = '#16a34a'
  ctx.fillRect(player.x, player.y, SIZE, SIZE)

reset()
```

What it means

findIndex finds the first row containing the character, indexOf its column.
(T - SIZE) / 2 is 5: the gap that centers a 22-pixel body on a 32-pixel tile.
dir: [0, 1] means facing down: 0 sideways, 1 down.

Your turn

Under TOP, write SIZE; under room, write player.
Above enter, write reset and findIn.
In draw, draw the hero before ctx.restore(); at the bottom, call reset() instead of enter(0, 0).

Skills: Game states, Functions

← A room The game loop →

All steps