Workshop › 2048 › Step 4 of 26

A color for every number

What we are doing

Every value has its own color, looked up in a table keyed by the number: COLORS[value]. Empty cells stay light brown; values past 2048 get a dark color.

```js
const COLORS = {
  2: '#eee4da',
  4: '#ede0c8',
  8: '#f2b179',
  16: '#f59563',
  32: '#f67c5f',
  64: '#f65e3b',
  128: '#edcf72',
  256: '#edcc61',
  512: '#edc850',
  1024: '#edc53f',
  2048: '#edc22e',
}

      const value = board[row][col]
      ctx.fillStyle = value === 0 ? '#cdc1b4' : COLORS[value] || '#3c3a32'
```

What it means

• COLORS is an object used as a lookup table: COLORS[8] is '#f2b179'.
• value === 0 ? a : b picks the empty color for 0, otherwise the table's color.
• COLORS[4096] is undefined, so || '#3c3a32' gives a dark color for anything past 2048.

Your turn

1. Under TOP write the COLORS table.
2. In the loop in draw, replace the '#cdc1b4' color line with the two new lines.

Skills: Arrays and objects

← A grid of numbers Numbers on the tiles →

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