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

Dönüşü canlandır

Ne yapıyoruz

Son dokunuş: kart dönüyormuş gibi görünsün. 2 boyutlu ekranda 3 boyutlu dönüşü taklit etmek için kartı yatayda sıkıştırırız: tam genişlik → ince bir çizgi → yine tam genişlik. Bir kapıyı yandan izlemek gibi: kapandıkça incelir.

Bu genişliği kosinüs (Math.cos) kendiliğinden verir. En ince anı, tam yüz değiştirdiği an (flip = 0.5) olur.

```js
// Squeeze the card horizontally to fake a 3D turn: full width, a thin line halfway, full width again.
const width = CARD * Math.abs(Math.cos(card.flip * Math.PI))
const x = cardX(card) + (CARD - width) / 2
const y = cardY(card)
if (card.flip >= 0.5) {
  ctx.fillStyle = card.matched ? '#bbf7d0' : '#f8fafc'
  ctx.fillRect(x, y, width, CARD)
  ctx.fillText(card.symbol, cardX(card) + CARD / 2, y + CARD / 2)
} else {
  ctx.fillStyle = '#6366f1'
  ctx.fillRect(x, y, width, CARD)
}
```

Ne işe yarıyor

• Math.PI → π sayısı (3.14...). card.flip * Math.PI → flip 0'dan 1'e giderken 0'dan π'ye.
• Math.cos(...) → kosinüs: 0'da 1, π/2'de 0, π'de −1. Math.abs eksi işaretini atar: 1 → 0 → 1.
• const width = CARD * ... → kartın genişliği: 85 → 0 → 85.
• const x = cardX(card) + (CARD - width) / 2 → sıkışan kısmın yarısı kadar sağa kay: kart ortada kalır.
• fillRect(x, y, width, CARD) → iki yüzde de yeni genişlik.
• ctx.fillText(card.symbol, cardX(card) + CARD / 2, ...) → meyve kartın gerçek ortasında (x artık kaydığı için cardX(card) kullanıyoruz).

Sıra sende

1. draw içindeki kart döngüsünün başına yorum satırını ve const width = ... satırını yaz.
2. const x = cardX(card) satırını const x = cardX(card) + (CARD - width) / 2 yap.
3. İki fillRect içinde üçüncü sayıyı CARD yerine width yap.
4. fillText içinde x + CARD / 2 kısmını cardX(card) + CARD / 2 yap.
5. Çalıştır ve oyna: kartlar daralıp genişleyerek dönmeli. Tebrikler, oyunun bitti!

Beceriler: Oyun döngüsü, Canvas üzerine çizim

← Yarı yolda yüz değiştir Kendin yap: en iyi oyunun →

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