Workshop › Space Invaders-style › Step 11 of 21

Score

What we are doing

Each invader is worth points: the top row 30, the middle rows 20, the bottom rows 10. The score is shown top left.

```js
const ROW_POINTS = [30, 20, 20, 10, 10]
let score = 0

      score += ROW_POINTS[hit.row]

  ctx.fillStyle = 'white'
  ctx.font = 'bold 16px monospace'
  ctx.textAlign = 'left'
  ctx.fillText('SCORE ' + score, 10, 24)
```

What it means

• ROW_POINTS[hit.row] gives the points of the row the hit invader was in.
• textAlign = 'left' makes the text start at x = 10.

Your turn

1. Under SPACING_Y, write ROW_POINTS; under lastStep, write score.
2. In the hits loop, add the points after bullet.y = -100.
3. At the end of draw, write the score.

Skills: Game states, Drawing on a canvas

← Hit! They shoot back →

All steps

1. The ship
2. The game loop
3. Move the ship
4. Stay on screen
5. Fire
6. Bullets fly
7. A short reload
8. The invaders
9. The march
10. Hit!
11. Score
12. They shoot back
13. Bombs fall
14. Lives
15. Game over
16. Best score
17. A wave in a function
18. Play again
19. Waves
20. Faster and faster
21. Build it yourself: an extra life