Workshop › Tetris-style Blocks › Step 29 of 32

The next piece

What we are doing

We always draw one piece ahead and keep it in next, so the player can plan. spawn uses next and draws a new one; the panel shows it.

```js
let next

  next = takeFromBag()
  spawn()

  const shape = next
  next = takeFromBag()

  ctx.fillText('Next', panel, 30)
  drawShape(next, 11, 2)
  ctx.fillStyle = 'white' // drawShape changed the fill color; the labels below need white again
```

What it means

• newGame draws the first next before the first spawn.
• spawn turns next into the falling piece and draws a new next.
• The panel draws next at column 11, row 2 (in the panel, since the well has columns 0–9).
• drawShape changes fillStyle, so we set it back to white for the labels below.

Your turn

1. Under let piece write let next.
2. In newGame, above spawn(), write next = takeFromBag().
3. In spawn, replace const shape = takeFromBag() with the two lines.
4. In draw, under ctx.textAlign = 'left', write the three Next lines.

Skills: Game states, Drawing on a canvas

← A fair bag of pieces Drop it →

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