Workshop › Sokoban › Step 21 of 29

A line at the bottom

What we are doing

The bottom strip shows a hint while playing, and a green message once the level is solved (a different one on the last level).

```js
ctx.textAlign = 'center'
ctx.font = '14px sans-serif'
if (solved()) {
  const last = level === LEVELS.length - 1
  ctx.fillStyle = '#4ade80'
  ctx.fillText(last ? 'All levels solved!' : 'Solved! Press Space for the next level', canvas.width / 2, canvas.height - 16)
} else {
  ctx.fillStyle = '#a8a29e'
  ctx.fillText('Arrows: move', canvas.width / 2, canvas.height - 16)
}
```

What it means

• if ... else shows one of two lines: the green message when solved, the grey hint otherwise.
• last is true on the last level; last ? a : b picks the message.
• canvas.height - 16 is near the bottom, in the middle of the BOTTOM strip.

Your turn

In draw, under the Level line, leave an empty line and write the block. Press Run and solve the first level.

Skills: Game states

← Which level? Count the moves →

All steps

1. A level written as text
2. The canvas and the pen
3. The warehouse floor
4. A function that draws
5. A name for every tile
6. Read the walls
7. Draw the walls
8. Center the level
9. The goals
10. The boxes
11. The player
12. Two more levels
13. One step
14. Walk with the arrows
15. Boxes are in the way
16. Push a box
17. A box on a goal turns green
18. Solved!
19. On to the next level
20. Which level?
21. A line at the bottom
22. Count the moves
23. A photo of the game
24. A photo before every move
25. Undo
26. Restart
27. A record for every level
28. Show the record
29. Build it yourself: count the pushes