Atölye › 2048 › 4/26. adım

Her sayıya bir renk

Ne yapıyoruz

2048'de her sayının kendi rengi vardır: 2 açık bej, 8 turuncu, 2048 altın sarısı. Renkleri bir tabloda tutacağız: anahtarı sayı, değeri renk. Hücreyi çizerken değerine bakıp tablodan rengini alacağız.

```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'
```

Ne işe yarıyor

const COLORS = { 2: '#eee4da', ... } → bir nesne, burada bir arama tablosu gibi kullanılıyor: COLORS[8] → '#f2b179'. Anahtarlar sayı olabilir.
const value = board[row][col] → bu hücrenin değeri.
value === 0 ? '#cdc1b4' : ... → boşsa açık kahverengi, değilse tablodan.
COLORS[value] || '#3c3a32' → tabloda olmayan bir sayı (4096 gibi) undefined verir; || o zaman sağdakini, koyu bir rengi kullanır.

Sıra sende

const TOP = ... satırının altına COLORS tablosunu yaz (let board onun altında, bir boş satırdan sonra kalır).
draw içindeki döngüde ctx.fillStyle = '#cdc1b4' satırını sil; yerine iki yeni satırı yaz.
Çalıştır: tahta hâlâ boş, o yüzden ekran değişmez. Denemek için aşağıdaki öneriye bak.

Beceriler: Diziler ve nesneler

← Sayılardan bir ızgara Karolara sayılar →

Her sayıya bir renk

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar