Atölye › XOX › 10/33. adım
X'i elle koymak yerine artık tahtaya bakarak çizeceğiz: dizideki her kutu için, kutu doluysa içindeki işareti kutunun ortasına yaz.
Bu, oyun yazmanın en önemli fikri: durum (tahtada ne var) ayrı, çizim (onu göstermek) ayrı. Çizim sadece durumu okur.
```js
board.forEach((mark, index) => {
if (mark === '') return
const x = (index % 3) * CELL + CELL / 2
const y = Math.floor(index / 3) * CELL + CELL / 2
ctx.fillText(mark, x, y)
})
```board.forEach(...) → "dizinin her elemanı için şunu yap". 9 kutu = 9 tur.(mark, index) => { ... } → her turda çalışan küçük bir fonksiyon. => (ok) fonksiyon yazmanın kısa yolu.
Parantezdeki adlara parametre denir: mark kutunun içeriği ('X', 'O' ya da ''), index kutunun numarası.
Önceki adımdaki const index = 7'ye artık gerek yok; numarayı forEach veriyor.if (mark === '') return → if "eğer" demek. === "tam olarak eşit mi?" diye sorar. "Kutu boşsa return:
bu kutu için fonksiyondan hemen çık, sıradakine geç."const x, const y → önceki adımın formülleri, şimdi her kutu için.ctx.fillText(mark, x, y) → 'X' değil, kutuda ne varsa onu yaz.}) → } küçük fonksiyonu, ) ise forEach( parantezini kapatır.draw içinde const index = 7 satırından ctx.fillText('X', x, y) satırına kadar dört satırı sil.forEach bloğunu yaz. İçindeki satırlar dört boşluk içeride.ctx.fillStyle = '#f38ba8' satırı yerinde kalsın.Beceriler: Diziler ve nesneler, Döngüler
← Kutu numarasından konuma Her işarete bir renk →