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

A ray: the grid lines

What we are doing

A ray crosses the grid lines one after another. We need two kinds of distance along the ray: how far until the next vertical line (the next column) and the next horizontal line (the next row), and how far between two such lines.

```js
// How far along the ray one whole tile across (or down) is.
const deltaX = Math.abs(1 / dx)
const deltaY = Math.abs(1 / dy)
// How far along the ray the next vertical (or horizontal) grid line is.
let nextX = (dx > 0 ? col + 1 - player.x : player.x - col) * deltaX
let nextY = (dy > 0 ? row + 1 - player.y : player.y - row) * deltaY
return { deltaX, deltaY, nextX, nextY }
```

What it means

• Going one whole tile across takes 1 / dx of ray length (a slanted ray needs more). Math.abs keeps it positive.
• nextX: the part of a tile left until the next vertical line, times deltaX.
• A ray going straight across never meets a horizontal line: 1 / 0 is Infinity, which works out fine.

Your turn

Replace the return line of castRay with these lines.

Skills: Velocity and gravity

← A ray: where it starts A ray: walk to the wall →

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