Workshop › Mario-style Platformer › Step 34 of 37

Play again

What we are doing

When the game is over, the screen is dimmed and says Game Over. Space (the jump key) then starts a new game.

```js
ctx.textAlign = 'center'
if (state !== 'playing') {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'white'
  ctx.font = 'bold 36px sans-serif'
  ctx.fillText('Game Over', canvas.width / 2, 160)
  ctx.font = '18px sans-serif'
  ctx.fillText('Press Space to play again', canvas.width / 2, 200)
}

if (state !== 'playing') {
  newGame()
  return
}
```

What it means

A half-transparent black rectangle over the whole canvas dims it; the texts are centered.
In jump, when not playing, the jump key starts a new game instead of jumping.

Your turn

In draw, under the counter text, leave an empty line and write the textAlign line and the if block.
At the top of jump, write the if (state !== 'playing') block.

Skills: Keyboard and mouse input, Drawing on a canvas

← Game over The flag →

All steps