Atölye › Dört Bağla › 8/38. adım

Renkli diskler

Ne yapıyoruz

Şimdi çizim tahtaya bakacak: boş hücre koyu bir delik, içinde 1 ya da 2 olan hücre o oyuncunun renginde bir disk. Renkleri bir nesnede (object) tutuyoruz: COLORS[1] kırmızı, COLORS[2] sarı.

Tahta şimdilik boş olduğu için ekran değişmez; denemek için aşağıdaki Dene kısmına bak.

```js
const COLORS = { 1: '#ef4444', 2: '#facc15' }

      disc(x, y, board[row][col] ? COLORS[board[row][col]] : '#0f172a')
```

Ne işe yarıyor

const COLORS = { 1: '#ef4444', 2: '#facc15' } → nesne: süslü parantez içinde ad: değer çiftleri. COLORS[1] köşeli parantezle 1 adlı değeri okur: kırmızı.
board[row][col] → o hücrede ne var: 0, 1 ya da 2.
koşul ? A : B → kısa bir seçim: koşul doğruysa A, değilse B. 0 "yok" (yanlış) sayılır, 1 ve 2 "var" (doğru).
Yani: "hücrede disk var mı? Varsa oyuncunun rengi (COLORS[board[row][col]]), yoksa koyu delik".

Sıra sende

const TOP = ... satırının altına COLORS satırını yaz.
draw içindeki iç döngüde disc(x, y, '#0f172a') satırındaki '#0f172a' yerine board[row][col] ? COLORS[board[row][col]] : '#0f172a' yaz.
Çalıştır: tahta şimdilik boş görünür.

Beceriler: Diziler ve nesneler, Canvas üzerine çizim

← Bellekteki tahta Her karede çiz →

Renkli diskler

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar