Workshop › 2048 › Step 21 of 26

Win and lose screens

What we are doing

When the game is not playing, a see-through layer covers the board with a message: gold with You win!, or pale with Game Over.

```js
if (state !== 'playing') {
  ctx.fillStyle = state === 'won' ? 'rgba(237, 194, 46, 0.5)' : 'rgba(238, 228, 218, 0.75)'
  ctx.fillRect(0, TOP, canvas.width, canvas.width)
  ctx.fillStyle = state === 'won' ? '#f9f6f2' : '#776e65'
  ctx.font = 'bold 44px sans-serif'
  ctx.fillText(state === 'won' ? 'You win!' : 'Game Over', canvas.width / 2, TOP + 170)
  ctx.font = '18px sans-serif'
  ctx.fillText(state === 'won' ? 'Press Space to keep going' : 'Press Space to try again', canvas.width / 2, TOP + 220)
}
```

What it means

rgba(r, g, b, a) is a color with transparency a (0 clear, 1 solid), so the tiles still show through.
Every line picks between the two screens with state === 'won' ? ... : ....
The text is still centred, since textAlign is 'center' from the cells.

Your turn

At the end of draw, after the loops, leave an empty line and write the if block.

Skills: Drawing on a canvas

← Making 2048 Space to go on →

All steps