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

Her işarete bir renk

Ne yapıyoruz

X'ler pembe, O'lar mavi olsun. Renk artık işarete bağlı; bu yüzden renk seçimi döngünün içine giriyor ve her kutu için yeniden soruluyor: "Bu X mi? Evetse pembe, değilse mavi."

Bunun için JavaScript'in kısa soru yazımını kullanacağız: soru ? evet : hayır.

```js
board.forEach((mark, index) => {
  if (mark === '') return
  ctx.fillStyle = mark === 'X' ? '#f38ba8' : '#89b4fa'
```

Ne işe yarıyor

• mark === 'X' ? '#f38ba8' : '#89b4fa' → soru işaretinden önce soru, iki noktanın iki yanında iki cevap. "mark X mi? Evetse '#f38ba8' (pembe), değilse '#89b4fa' (mavi)."
• ctx.fillStyle = ... → seçilen rengi kaleme verir. Her kutu için ayrı ayrı.
• Döngünün üstündeki eski ctx.fillStyle = '#f38ba8' satırı gidiyor: yoksa herkes pembe başlardı, gereksiz olurdu.

Sıra sende

1. board.forEach(...) satırının hemen üstündeki ctx.fillStyle = '#f38ba8' satırını sil.
2. Döngünün içinde, if (mark === '') return satırının altına yeni fillStyle satırını yaz.
3. Çalıştır: tahta boş olduğu için bir şey görünmez; kontroller X ile O'nun rengine bakacak.

Beceriler: Canvas üzerine çizim

← Tahtada ne varsa çiz Hamle yap →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Tahtayı boya
3. İlk ızgara çizgisi
4. Döngüyle tekrarla
5. Izgarayı tamamla
6. Liste olarak tahta
7. Çizen bir fonksiyon
8. Bir X yaz
9. Kutu numarasından konuma
10. Tahtada ne varsa çiz
11. Her işarete bir renk
12. Hamle yap
13. Dolu kutuya oynanmaz
14. Tıklamayı dinle
15. Hangi kutuya tıklandı?
16. Her ekran boyunda tıklama
17. Sekiz kazanan çizgi
18. Üçü yan yana bul
19. Kazanç, beraberlik ya da devam
20. Tur biter
21. Kazananı göster
22. Kazanan çizgiyi parlat
23. Yeni tur fonksiyonu
24. Tekrar oynamak için tıkla
25. Kutu seçen bir bilgisayar
26. Bilgisayar cevap verir
27. Birinci kural: ortayı al
28. İkinci kural: kazanabiliyorsan kazan
29. Üçüncü kural: rakibi engelle
30. Biten oyuna puan ver
31. İleriye bak: minimax
32. Hiç kaybetmeyen bir bilgisayar
33. Kendin yap: skoru tut