Workshop › Tetris-style Blocks › Step 1 of 32
Falling pieces, rotation and line clears. Pieces as matrices, rotating a matrix, collision against a grid, locking, clearing rows, levels and a fair random bag.
The pieces fall into a well 10 cells wide and 20 tall, each cell 24 pixels. We paint the page dark and the well a little lighter; the space on the right is for the score later.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const COLS = 10
const ROWS = 20
const CELL = 24
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#1e293b'
ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
```canvas is the page's canvas; ctx is its 2D drawing context.COLS, ROWS and CELL describe the well: 10 × 20 cells of 24 pixels.fillStyle picks a color and fillRect(x, y, width, height) fills a rectangle; (0, 0) is the top-left corner.
The well is COLS * CELL = 240 pixels wide and ROWS * CELL = 480 tall.Write the lines under the three comment lines, then press Run.
Skills: Drawing on a canvas
The board as rows of numbers →