Workshop › 2048 › Step 17 of 26

Score

What we are doing

Every merge scores the value of the new tile: slideRow already returns it as gained. We add it up in score and show it in the strip above the board.

```js
let score

  score = 0

    const { row, gained } = slideRow(line)
    if (reversed) row.reverse()
    score += gained

  ctx.fillStyle = '#776e65'
  ctx.font = 'bold 22px sans-serif'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  ctx.fillText('Score: ' + score, GAP, TOP / 2)
```

What it means

• score is 0 in a new game.
• const { row, gained } now takes both properties out of slideRow's result, and gained is added to score.
• The score is drawn left-aligned in the middle of the top strip, where textBaseline = 'middle' already applies.

Your turn

1. Under let board write let score; in newGame, under board = ..., write score = 0.
2. In move, take gained too and add it to score after the row.reverse() line.
3. In draw, write the three pen lines above textBaseline, and the fillText line under it.

Skills: Game states

← Up and down are columns Is there a move left? →

All steps

1. The board
2. Sixteen cells
3. A grid of numbers
4. A color for every number
5. Numbers on the tiles
6. Big numbers, smaller text
7. Find the empty cells
8. A new tile
9. Two tiles to start
10. Slide a row
11. Merge equal tiles
12. Move left
13. The arrow key
14. Only real moves count
15. Right is left, reversed
16. Up and down are columns
17. Score
18. Is there a move left?
19. Game over
20. Making 2048
21. Win and lose screens
22. Space to go on
23. Best score
24. Swipes
25. A tap is not a swipe
26. Build it yourself: undo