Workshop › Tetris-style Blocks › Step 16 of 32

Falling by itself

What we are doing

A game loop redraws about 60 times a second. The browser passes the time in milliseconds; every 800 ms the piece moves one row down.

```js
let lastDrop = 0

function loop(time) {
  if (time - lastDrop >= 800) {
    lastDrop = time
    tryMove(0, 1)
  }
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• requestAnimationFrame(loop) asks the browser to run loop before the next screen refresh; loop asks again at its end, so it keeps running.
• time is the time since the page opened, in milliseconds; lastDrop remembers when the piece last fell.
• When 800 ms have passed, note the time and try to move one row down. draw() runs every frame.

Your turn

1. Under let piece write let lastDrop = 0.
2. Delete the draw() line in the key listener.
3. Replace the draw() call at the very bottom with loop and requestAnimationFrame(loop).

Skills: The game loop

← Wall kicks A random piece at the top →

All steps

1. The well
2. The board as rows of numbers
3. Draw one cell
4. Draw the whole board
5. The number is the color
6. A piece is a small grid
7. A list of shapes
8. All seven pieces
9. Does it fit inside the well?
10. Blocks are in the way
11. Try, then move
12. Move with the arrows
13. Turn a matrix
14. Turn with Up
15. Wall kicks
16. Falling by itself
17. A random piece at the top
18. Land and lock
19. One function starts a game
20. When the pile reaches the top
21. Game Over on screen
22. Play again
23. Clear full rows
24. Points for lines
25. The side panel
26. Levels
27. Faster every level
28. A fair bag of pieces
29. The next piece
30. Drop it
31. The ghost piece
32. Build it yourself: hold a piece