Workshop › Tower Defense › Step 37 of 42

The bottom bar

What we are doing

Under the board there is room for a bar: a start button while building, the enemies left during a wave, and the best score on the right.

```js
const BAR = TOP + ROWS * TILE // the bottom bar, with the start button, begins here

// The tower buttons in the top bar, and the start button in the bottom bar.
const START = { x: 150, w: 180 }

  ctx.fillStyle = 'white'
  if (state === 'building') {
    ctx.fillStyle = '#4f46e5'
    ctx.fillRect(START.x, BAR + 6, START.w, 28)
    ctx.fillStyle = 'white'
    ctx.fillText('Start wave ' + (wave + 1), START.x + START.w / 2, BAR + 26)
  } else if (state === 'wave') {
    ctx.fillText('Wave ' + wave + ': ' + (toSpawn + enemies.length) + ' left', canvas.width / 2, BAR + 26)
  }
  ctx.textAlign = 'right'
  ctx.fillText('Best ' + best, canvas.width - 10, BAR + 26)
```

What it means

• BAR is where the board ends: the top bar plus 9 rows of 40 pixels = 400.
• START keeps the button's left edge and width in one place, for drawing now and for clicks later.
• While building: an indigo button with the next wave's number; during a wave: enemies still to come plus those on the road.
• textAlign = 'right' lines the best score up against the right edge.

Your turn

1. Under the TOP line, write the BAR line.
2. Under the build function, write the comment and START.
3. In draw, between ctx.textAlign = 'center' and if (state === 'over'), write the bar drawing (with an empty line first).

Skills: Drawing on a canvas

← Play again Click to start →

All steps

1. Measure the map
2. A map of tiles
3. Draw it every frame
4. The road as corners
5. Fill in the road
6. Draw the road
7. Walking by distance
8. Enemies on the road
9. Walk
10. Off the end of the road
11. Here they come
12. Towers
13. From a click to a tile
14. Click to build
15. Where can you build?
16. Show the gold
17. Show before you click
18. Show the range
19. Pick a target
20. Fire!
21. A hit hurts
22. Homing bullets
23. Fizzle out
24. Gold for every kill
25. Lives
26. Health bars
27. Build, then defend
28. Space starts a wave
29. The wave is over
30. Stronger every wave
31. Closer together
32. Out of lives
33. No building after the end
34. The most waves survived
35. The game over screen
36. Play again
37. The bottom bar
38. Click to start
39. A second tower: the cannon
40. Tower buttons
41. Splash damage
42. Build it yourself: sell a tower