Atölye › Hafıza Kartları › 9/25. adım

Kartları listeden çiz

Ne yapıyoruz

Kartlar artık kendi yerlerini biliyor. Çizim de onlara bakmalı: "listedeki her kart için, kartın kendi yerine bir kare çiz". İç içe döngülere gerek kalmıyor.

Çizimi bir fonksiyona (draw) koyuyoruz, çünkü kartlar açılıp kapandıkça tahtayı tekrar tekrar çizmemiz gerekecek. Ekran aynı görünecek.

```js
function draw() {
  ctx.fillStyle = '#1e1b4b'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  for (const card of cards) {
    const x = cardX(card)
    const y = cardY(card)
    ctx.fillStyle = '#6366f1'
    ctx.fillRect(x, y, CARD, CARD)
  }
}

newGame()
draw()
```

Ne işe yarıyor

• function draw() { ... } → çizim tarifi. Önce masayı boyar (eski resmi siler), sonra kartları çizer.
• for (const card of cards) { → "cards listesindeki her kart için, sırayla, bir kez yap". Her turda o anki karta card denir.
• const x = cardX(card), const y = cardY(card) → önceki adımın fonksiyonları: kartın köşesi.
• En altta önce newGame() (kartlar hazır), sonra draw() (çiz). Sıra önemli: kart yokken çizemeyiz.

Sıra sende

1. newGame() çağrısının üstündeki çizim satırlarını (arka plan, mor renk ve iç içe döngüler) sil.
2. Onların yerine draw fonksiyonunu yaz.
3. En alttaki newGame() satırının altına draw() yaz.
4. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar, Döngüler

← Kartın köşesi Durmadan çiz →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Masa
3. Bir kart
4. Bir sıra kart
5. Dört sıra
6. Her meyveden iki tane
7. Kendini bilen kartlar
8. Kartın köşesi
9. Kartları listeden çiz
10. Durmadan çiz
11. Kartın ön yüzü
12. Adil bir karıştırma
13. Bir noktada hangi kart var?
14. Tıkla, kartı çevir
15. Kurallar için tek yer
16. Aynı anda iki kart
17. Eş mi değil mi
18. Hamleleri say
19. Hamleleri ve eşleri göster
20. Bütün eşler bulundu
21. Tekrar oyna
22. Peşinden giden bir sayı
23. Yarı yolda yüz değiştir
24. Dönüşü canlandır
25. Kendin yap: en iyi oyunun