Atölye › XOX › 22/33. adım

Kazanan çizgiyi parlat

Ne yapıyoruz

Küçük ama etkili bir dokunuş: karartmadan sonra kazanan üç kutuyu yarı saydam sarıyla parlatacağız. Oyuncu turun neden bittiğini hemen görür.

Üstelik bedava: winningLine hangi üç kutuyu boyayacağımızı zaten söylüyor.

```js
// Dim the board, then light up the winning line on top so it stands out.
ctx.fillStyle = 'rgba(0, 0, 0, 0.55)'
ctx.fillRect(0, 0, canvas.width, canvas.height)
const line = winningLine(board)
if (line) {
  ctx.fillStyle = 'rgba(250, 204, 21, 0.25)'
  for (const index of line) ctx.fillRect((index % 3) * CELL, Math.floor(index / 3) * CELL, CELL, CELL)
}
```

Ne işe yarıyor

İlk satır bir yorum: ne yaptığımızı anlatan not.
const line = winningLine(board) → kazanan çizginin üç kutu numarası. Beraberlikte undefined: o zaman if (line) içi çalışmaz, parlatacak bir şey yok.
'rgba(250, 204, 21, 0.25)' → çeyrek güçte sarı: karartılmış kutuyu aydınlatır ama işaret görünmeye devam eder.
for (const index of line) → "çizgideki her numara için, ona index de ve şunu yap". Yapılacak iş tek satırsa süslü parantez gerekmez.
(index % 3) * CELL, Math.floor(index / 3) * CELL → 9. adımdaki formüller, bu sefer + CELL / 2 olmadan: kutunun sol üst köşesi. CELL, CELL → tam bir kutu boyu.

Sıra sende

draw içindeki if (result) { satırının altına yorum satırını yaz.
Karartan ctx.fillRect(0, 0, ...) satırının altına const line satırını ve if (line) bloğunu yaz. Yazı satırları ('white' ile başlayanlar) altta kalsın.
Çalıştır ve bir turu kazan: üç kutu sarımsı parlamalı.

Beceriler: Canvas üzerine çizim, Döngüler

← Kazananı göster Yeni tur fonksiyonu →

Kazanan çizgiyi parlat

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar