Workshop › Tetris-style Blocks › Step 31 of 32

The ghost piece

What we are doing

A faint ghost at the bottom shows where the piece would land. ghostY finds that row without moving the piece, and drawShape gets an optional color to draw it see-through.

```js
function ghostY() {
  let y = piece.y
  while (fits(piece.shape, piece.x, y + 1)) y++
  return y
}

function drawShape(shape, x, y, color) {
      if (value) drawCell(x + c, y + r, color || COLORS[value])

    drawShape(piece.shape, piece.x, ghostY(), 'rgba(255, 255, 255, 0.15)')
```

What it means

• ghostY counts down its own copy y, never piece.y, and returns the lowest row where the piece fits.
• drawShape takes a fourth parameter color; color || COLORS[value] uses it if given, otherwise the block's own color.
• The ghost is drawn before the real piece, so the real piece is always on top.

Your turn

1. Write ghostY under hardDrop.
2. Add color to drawShape's parameters and use color || COLORS[value].
3. In draw, inside if (state === 'playing'), draw the ghost above the real piece's line.

Skills: Drawing on a canvas, Loops

← Drop it Build it yourself: hold a piece →

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