Workshop › Zelda-style Dungeon › Step 5 of 22

Walls

What we are doing

Walls # and locked doors D stop bodies. blocked checks the four corners of a 22-pixel box. move tries across and down separately, so a body slides along a wall instead of sticking to it, and says whether it was stopped. Doors are drawn brown.

```js
const solidTile = (ch) => ch === '#' || ch === 'D'

// Does a box at (x, y) overlap a wall? Outside the room counts as open, so the player can walk out of a gap.
function blocked(x, y) {
  for (const [cx, cy] of [[x, y], [x + SIZE - 1, y], [x, y + SIZE - 1], [x + SIZE - 1, y + SIZE - 1]]) {
    const row = Math.floor(cy / T)
    const col = Math.floor(cx / T)
    if (row >= 0 && row < ROWS && col >= 0 && col < COLS && solidTile(tiles[row][col])) return true
  }
  return false
}

// Move a body, one axis at a time, stopping at walls. Returns true if it was stopped.
function move(body, dx, dy) {
  let stopped = false
  if (blocked(body.x + dx, body.y)) stopped = true
  else body.x += dx
  if (blocked(body.x, body.y + dy)) stopped = true
  else body.y += dy
  return stopped
}

      if (ch === 'D') {
        ctx.fillStyle = '#92400e'
        ctx.fillRect(x + 2, y + 2, T - 4, T - 4)
      }
```

What it means

The corners are at x and x + SIZE - 1 (the last pixel of the body), same for y.
Math.floor(cy / T) turns a pixel into a tile number.
Outside the room is not a wall: a gap in the wall leads out, and the next step uses it.
stopped will tell the enemies to turn around.

Your turn

Replace move with solidTile, blocked and the new move, with their comments.
In the tile drawing, draw doors after the floor.

Skills: Collision detection

← Walk A touch pad →

All steps