Workshop › Snake › Step 23 of 28

Show the score

What we are doing

The score is counted but never shown. We write it in the top-left corner on every frame.

```js
ctx.fillStyle = 'white'
ctx.font = '16px sans-serif'
ctx.textAlign = 'left'
ctx.fillText('Score: ' + score, 8, 20)
```

What it means

• 'Score: ' + score joins text and a number: Score: 3.
• 8, 20 is 8 pixels from the left, 20 from the top.
• White is already picked here, so the Game Over block no longer needs its own fillStyle.

Your turn

1. After the snake's for loop, leave an empty line and write the four score lines.
2. Delete ctx.fillStyle = 'white' inside the if (gameOver) block.

Skills: Drawing on a canvas

← The game over message One function that starts a game →

All steps

1. Find the canvas
2. Get the pen
3. Paint the board
4. Think in cells
5. Keep the position in a variable
6. A function that draws
7. A function that moves
8. The game loop
9. Slow it down
10. A direction to move in
11. Steer with the arrow keys
12. A body made of a list
13. Move the whole body
14. Pick a spot for the food
15. Draw the food
16. Eat and grow
17. Never put food on the snake
18. A table of turns
19. No U-turns
20. Crash into the walls
21. Crash into yourself
22. The game over message
23. Show the score
24. One function that starts a game
25. Play again with Space
26. Remember the best score
27. Speed up as you grow
28. Build it yourself: through the walls