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

Döngüyle tekrarla

Ne yapıyoruz

İkinci dikey çizgi x = 200'de, yani 2 * CELL'de duracak. Satırı kopyalayıp sayıyı değiştirebilirdik, ama bilgisayarlar tekrarı sever: döngü (loop) "şunu birkaç kez yap" demektir.

Döngü, i adında bir sayaç tutar: önce 1, sonra 2. Her turda çizgiyi i * CELL noktasına çizer.

```js
for (let i = 1; i < 3; i++) {
  ctx.fillRect(i * CELL - 2, 0, 4, canvas.height)
}
```

Ne işe yarıyor

Yani döngü iki tur döner ve iki dikey çizgi çizer.

Sıra sende

  1. En alttaki ctx.fillRect(CELL - 2, 0, 4, canvas.height) satırını sil.
  2. Yerine üç satırlık döngüyü yaz. Dikkat: içerideki satırda CELL - 2 değil i * CELL - 2 var.
  3. Çalıştır: artık iki dikey çizgi görmelisin; tahta üç sütuna bölündü.

Beceriler: Döngüler

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