Workshop › Missile Command-style Defense › Step 30 of 35

Wave, ammo and messages

What we are doing

The player should see the wave and the ammo left at the top right, a message between waves and one at the end.

```js
ctx.textAlign = 'right'
ctx.fillText('Wave ' + wave + '  Ammo ' + ammo, canvas.width - 10, 22)
ctx.textAlign = 'center'
if (state === 'between') ctx.fillText('Wave ' + wave + ' cleared!', canvas.width / 2, 180)
if (state === 'over') {
  ctx.font = 'bold 28px sans-serif'
  ctx.fillText('The end', canvas.width / 2, 180)
  ctx.font = '16px sans-serif'
  ctx.fillText('Click to play again', canvas.width / 2, 210)
}
```

What it means

• Right-aligned at canvas.width - 10, the wave and ammo text always ends 10 pixels from the right edge.
• Centered texts use canvas.width / 2. The end screen has a big title and a small line under it.

Your turn

In draw, under the Score line, write these lines.

Skills: Drawing on a canvas

← Play again Launch from anywhere →

All steps

1. Six cities to protect
2. Your missile base
3. Draw again and again
4. Cities that can fall
5. Rubble
6. Move towards a point
7. Launch an enemy missile
8. One missile a second
9. Missiles on their way
10. Smoke trails
11. Impact
12. Fire an interceptor
13. Click the sky
14. Interceptors fly
15. An explosion that grows and shrinks
16. Explode on arrival
17. Draw the explosions
18. Impacts explode too
19. Caught in the blast
20. Chain reactions
21. Only your explosions count
22. Points for every missile
23. Show the score
24. Limited ammo
25. Waves
26. Each wave is harder
27. The end of a wave
28. The end
29. Play again
30. Wave, ammo and messages
31. Launch from anywhere
32. Some missiles will split
33. Split into three
34. A high score
35. Build it yourself: a crosshair