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

A ray: where it starts

What we are doing

Here is the big idea of raycasting: for every column of the screen we send a ray from the player's eye and find the first wall it hits. The nearer the wall, the taller we draw that column. This step starts the ray: its direction, the tile it starts on, and which way it moves through the grid. For now castRay returns these so we can check them.

```js
function castRay(angle) {
  const dx = Math.cos(angle)
  const dy = Math.sin(angle)
  let col = Math.floor(player.x)
  let row = Math.floor(player.y)
  const stepX = dx > 0 ? 1 : -1
  const stepY = dy > 0 ? 1 : -1
  return { col, row, stepX, stepY }
}
```

What it means

dx, dy are the ray's direction, one tile long.
col, row is the tile the ray starts on, the player's tile.
stepX says whether the ray goes to the next column on the right (1) or on the left (-1); stepY the same for rows.

Your turn

Above the key listeners, write castRay.

Skills: Velocity and gravity, Functions

← Stop at walls, slide along them A ray: the grid lines →

All steps