Workshop › Tetris-style Blocks › Step 7 of 32

A list of shapes

What we are doing

All the shapes go in one list, SHAPES. We start with three: the long I, the square O and the T. Every matrix is square, even if it has empty rows: that is what lets us rotate them later. The falling piece takes a copy of the T.

```js
// Each piece is a square matrix; the number is its color. Square matrices rotate around their center.
const SHAPES = [
  [
    [0, 0, 0, 0],
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
  ],
  [
    [2, 2],
    [2, 2],
  ],
  [
    [0, 3, 0],
    [3, 3, 3],
    [0, 0, 0],
  ],
]

let piece = { shape: SHAPES[2].map((row) => [...row]), x: 3, y: 0 }
```

What it means

SHAPES is a list of matrices; SHAPES[2] is the T.
.map((row) => [...row]) makes a new list whose rows are new arrays: [...row] spreads a row's numbers into a new array. So piece.shape looks the same as the T but is a separate copy.

Your turn

Under COLORS write the comment and SHAPES with the three matrices.
Change the shape: of piece to SHAPES[2].map((row) => [...row]).

Skills: Arrays and objects

← A piece is a small grid All seven pieces →

All steps