Workshop › Wordle-style Word Guess › Step 18 of 26

A message line

What we are doing

A line under the grid tells the player what is happening: an invitation while playing, the result when it is over. After a loss it reveals the answer; never finding out would be frustrating.

```js
ctx.font = 'bold 16px sans-serif'
ctx.fillStyle = 'white'
let message = 'Guess the five-letter word'
if (state === 'won') message = 'You got it! Enter for a new word'
if (state === 'lost') message = 'It was ' + answer.toUpperCase() + '. Enter for a new word'
ctx.fillText(message, canvas.width / 2, 393)
```

What it means

• message starts as the invitation; each if replaces it for the end states.
• The answer is shown in capitals: 'It was CRANE. Enter for a new word'.
• The text is centered under the grid (textAlign is still 'center').

Your turn

In draw, under the grid loops, leave an empty line and write the six lines. Press Run.

Skills: Game states

← Winning and losing Where the keys go →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words