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

A ray: walk to the wall

What we are doing

Now the ray walks: each time it crosses whichever grid line is nearer, it enters a new tile. As soon as that tile is not floor, we found the wall. This method is called DDA. castRay returns how far the wall is, which kind of line it crossed, the wall's kind and the exact hit point.

```js
// Walk the grid line by line (DDA) until the ray enters a wall tile.

  while (true) {
    let dist
    let side
    if (nextX < nextY) {
      dist = nextX
      nextX += deltaX
      col += stepX
      side = 'x'
    } else {
      dist = nextY
      nextY += deltaY
      row += stepY
      side = 'y'
    }
    const tile = MAP[row][col]
    if (tile !== '.') return { dist, side, tile, x: player.x + dx * dist, y: player.y + dy * dist }
  }
```

What it means

• If the next vertical line is nearer, cross it: that line's distance is dist, the next one is deltaX further, the ray is now one column over.
• Otherwise cross the horizontal line the same way.
• side remembers which: 'x' means the wall is hit on its left or right face, 'y' on its top or bottom face.
• The maze is closed by walls, so while (true) always finds one and returns.

Your turn

1. Above castRay, write the comment.
2. Replace the return line with the while loop.

Skills: Velocity and gravity, Loops

← A ray: the grid lines The 3D view →

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