Workshop › Tetris-style Blocks › Step 21 of 32

Game Over on screen

What we are doing

The falling piece is drawn only while playing. When the game is over, a dark band across the well says Game Over.

```js
if (state === 'playing') {
  drawShape(piece.shape, piece.x, piece.y)
}

if (state === 'over') {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
  ctx.fillRect(0, 180, COLS * CELL, 110)
  ctx.fillStyle = 'white'
  ctx.textAlign = 'center'
  ctx.font = 'bold 28px sans-serif'
  ctx.fillText('Game Over', (COLS * CELL) / 2, 225)
  ctx.font = '14px sans-serif'
  ctx.fillText('Press Space to play again', (COLS * CELL) / 2, 260)
}
```

What it means

rgba(0, 0, 0, 0.7) is black at 70% opacity: a dark band you can still faintly see through.
font sets the text size, textAlign = 'center' centres it on the given x; fillText(text, x, y) writes it.
(COLS * CELL) / 2 is the middle of the well, 120.

Your turn

In draw, replace the last line drawShape(piece.shape, ...) with the lines shown.

Skills: Drawing on a canvas

← When the pile reaches the top Play again →

All steps