Workshop › Flappy-style Bird › Step 12 of 30

Tell the player

What we are doing

Each phase gets its message: Press Space to start while waiting, Game Over when it is over. White text, centered.

```js
  ctx.fillStyle = 'white'
  ctx.textAlign = 'center'
  if (state === 'ready') {
    ctx.font = '22px sans-serif'
    ctx.fillText('Press Space to start', canvas.width / 2, canvas.height / 2 + 80)
  }
  if (state === 'over') {
    ctx.font = 'bold 36px sans-serif'
    ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2)
  }
}
```

What it means

textAlign = 'center' makes the given x the middle of the text; canvas.width / 2 is the middle of the screen.
ctx.font sets size and style; fillText(text, x, y) writes it.
if (...) { ... } with braces runs several lines only when the condition holds.

Your turn

In draw, under ctx.fill(), leave an empty line and write the new lines, above the function's last }.

Skills: Drawing on a canvas, Game states

← The ground and the sky A pipe as data →

All steps