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

The player

What we are doing

The player stands at a point on the grid, measured in tiles: (1.5, 1.5) is the middle of the top-left floor tile. They also look in a direction, an angle. On the minimap they are a yellow dot with a line showing where they look.

```js
let player

function reset() {
  player = { x: 1.5, y: 1.5, angle: 0 }
}

  ctx.fillStyle = '#facc15'
  ctx.fillRect(player.x * MINI - MINI / 4, player.y * MINI - MINI / 4, MINI / 2, MINI / 2)
  ctx.strokeStyle = '#facc15'
  ctx.beginPath()
  ctx.moveTo(player.x * MINI, player.y * MINI)
  ctx.lineTo((player.x + Math.cos(player.angle)) * MINI, (player.y + Math.sin(player.angle)) * MINI)
  ctx.stroke()

reset()
```

What it means

• reset puts the player at the start; the game will call it again to play once more.
• Multiplying by MINI turns tiles into minimap pixels. The dot is 4×4, centered.
• Math.cos(angle) and Math.sin(angle) give the step one tile long in the looking direction: across and down.

Your turn

1. Under MINI, write player and reset.
2. At the end of draw, draw the dot and the direction line.
3. At the bottom, call reset() above draw().

Skills: Drawing on a canvas, Velocity and gravity

← The map Ceiling, floor and a loop →

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