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

Hamleleri ve eşleri göster

Ne yapıyoruz

İki küçük dokunuş:

• Üstteki şeride hamle sayısını yaz: Moves: 3.
• Bulunan eşler açık yeşil olsun; böylece az önce açtığın kartlarla karışmazlar.

```js
ctx.fillStyle = 'white'
ctx.font = '18px sans-serif'
ctx.textAlign = 'left'
ctx.textBaseline = 'middle'
ctx.fillText('Moves: ' + moves, GAP, 22)

ctx.font = '44px sans-serif'
ctx.textAlign = 'center'

    ctx.fillStyle = card.matched ? '#bbf7d0' : '#f8fafc'
```

Ne işe yarıyor

• ctx.fillStyle = 'white', ctx.font = '18px sans-serif', ctx.textAlign = 'left' → beyaz, 18 piksel, sola hizalı yazı. ctx.textBaseline = 'middle' satırı zaten vardı; artık bu grubun içinde.
• ctx.fillText('Moves: ' + moves, GAP, 22) → + yazı ile sayıyı yapıştırır: 'Moves: 3'. Soldan 12, yukarıdan 22: şeridin ortası.
• Sonra boş bir satır: kartların yazı ayarları (44px, center) kendi grubunda kalır.
• card.matched ? '#bbf7d0' : '#f8fafc' → kısa soru: soru işaretinden önce soru, iki noktanın iki yanında iki cevap. "Eşleşti mi? Evetse açık yeşil, değilse beyaz."

Sıra sende

1. draw içinde ctx.textBaseline = 'middle' satırının üstüne üç yazı satırını yaz.
2. ctx.textBaseline = 'middle' satırının altına Moves satırını ve bir boş satır yaz.
3. Açık kart bölümündeki ctx.fillStyle = '#f8fafc' satırını ctx.fillStyle = card.matched ? '#bbf7d0' : '#f8fafc' yap.
4. Çalıştır ve oyna: üstte hamle sayısı artmalı, bulduğun eşler yeşile dönmeli.

Beceriler: Canvas üzerine çizim

← Hamleleri say Bütün eşler bulundu →

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