Workshop › Tetris-style Blocks › Step 6 of 32

A piece is a small grid

What we are doing

A piece is a small matrix of numbers, like a tiny board: 3 is a purple block, 0 nothing. The falling piece is its shape plus its place in the well, x (column) and y (row). drawShape draws each filled cell of a matrix at that place.

```js
let piece = { shape: [[0, 3, 0], [3, 3, 3], [0, 0, 0]], x: 3, y: 0 }

function drawShape(shape, x, y) {
  shape.forEach((cells, r) => {
    cells.forEach((value, c) => {
      if (value) drawCell(x + c, y + r, COLORS[value])
    })
  })
}

  drawShape(piece.shape, piece.x, piece.y)
```

What it means

• piece is an object: shape (the matrix), x and y (where its top-left corner is in the well).
• forEach runs a function for every element and gives it the element and its index: the outer one each row (cells, index r), the inner one each number in that row (value, index c).
• A filled cell at [r][c] of the matrix is drawn in the well at (x + c, y + r).
• draw draws the piece after the board, on top of it.

Your turn

1. Under let board write let piece.
2. Under drawCell write drawShape.
3. In draw, after the two loops, write the drawShape(...) call.

Skills: Arrays and objects, Drawing on a canvas

← The number is the color A list of shapes →

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