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

A timer

What we are doing

The goal will be to escape as fast as you can, so we count frames and show them as seconds in the top right.

```js
let frames

  frames = 0

  frames += 1

const seconds = (f) => (f / 60).toFixed(1)

  ctx.fillStyle = 'white'
  ctx.font = 'bold 16px sans-serif'
  ctx.textAlign = 'right'
  ctx.fillText('Time ' + seconds(frames), canvas.width - 10, 22)
```

What it means

• The game runs at about 60 frames a second, so frames / 60 is seconds.
• toFixed(1) writes a number with one digit after the dot: 1.0, 12.3.
• seconds is a short arrow function: (f) => ... returns what is after the arrow.

Your turn

1. Under player, write frames; in reset, set it to 0; at the top of update, add one.
2. Above shade, write seconds.
3. At the end of draw, write the time.

Skills: Game states, The game loop

← Light and shade Escape! →

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