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

Bir sıra kart

Ne yapıyoruz

Dört kartı dört ayrı satırla çizmek yerine bilgisayara "bunu tekrarla" diyeceğiz. Buna döngü (loop) denir.

Her kart bir öncekinin bir kart artı bir boşluk (85 + 12 = 97 piksel) sağında durur. Yani col numaralı kartın x'i: GAP + col * (CARD + GAP).

```js
for (let col = 0; col < SIZE; col++) {
  ctx.fillRect(GAP + col * (CARD + GAP), TOP + GAP, CARD, CARD)
}
```

Ne işe yarıyor

• for ( ... ) { ... } → "süslü parantezin içini tekrarla".
• let col = 0 → col (sütun) adında bir sayaç, 0'dan başlar. let de const gibi ad verir ama değeri sonradan değişebilir; böyle adlara değişken denir.
• col < SIZE → "col 4'ten küçük olduğu sürece devam et".
• col++ → her turdan sonra col'u 1 artır.
• GAP + col * (CARD + GAP) → * çarpma; parantez önce hesaplanır. col = 0 için 12, col = 1 için 12 + 97 = 109, sonra 206, 303.

Sıra sende

1. En alttaki ctx.fillRect(GAP, TOP + GAP, CARD, CARD) satırını sil.
2. Yerine üç satırlık döngüyü yaz.
3. Çalıştır: üstte yan yana dört mor kart görmelisin.

Beceriler: Döngüler

← Bir kart Dört sıra →

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