Workshop › Endless Runner › Step 15 of 19

The score counter

What we are doing

Top right, like the classic runner: the high score and the current score, each with 5 digits.

```js
const score = Math.floor(distance / 10)
ctx.fillStyle = '#334155'
ctx.font = '16px monospace'
ctx.textAlign = 'right'
ctx.fillText('HI ' + String(best).padStart(5, '0') + '  ' + String(score).padStart(5, '0'), canvas.width - 10, 24)
```

What it means

Your turn

In draw, between the obstacles loop and ctx.textAlign = 'center', write the score lines.

Skills: Drawing on a canvas

All steps

  1. The ground
  2. The runner
  3. Draw again and again
  4. Gravity
  5. Jump
  6. Short hops
  7. Tap to jump
  8. Things that come at you
  9. Cacti keep coming
  10. Wait for the start
  11. Crash
  12. Try again
  13. Faster and faster
  14. Remember the best run
  15. The score counter
  16. Birds
  17. Which keys are down?
  18. Duck
  19. Build it yourself: jump buffering