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

Ceiling, floor and a loop

What we are doing

The 3D view needs a ceiling (the top half, dark) and a floor (the bottom half, lighter). They also wipe the old picture each frame. A loop redraws everything about 60 times a second.

```js
  const H = canvas.height
  ctx.fillStyle = '#1e293b'
  ctx.fillRect(0, 0, canvas.width, H / 2)
  ctx.fillStyle = '#475569'
  ctx.fillRect(0, H / 2, canvas.width, H / 2)

function loop() {
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• H is a short name for the canvas height, used a lot in the drawing.
• The horizon is the middle line, H / 2.

Your turn

1. At the top of draw, write H and the ceiling and floor.
2. Replace draw() at the bottom with loop and requestAnimationFrame(loop).

Skills: The game loop, Drawing on a canvas

← The player Turn around →

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