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

Peşinden giden bir sayı

Ne yapıyoruz

Kartlar şu an anında açılıyor. Gerçekten dönsünler istiyoruz. Bunun için önemli bir fikir: gerçek durum ile görünen durum ayrı.

• card.faceUp gerçek: kurallar yalnız buna bakar, eskisi gibi.
• card.flip ise 0 (arka yüz) ile 1 (ön yüz) arasında bir sayı ve her karede gerçeği biraz kovalar. Bir kedinin oyuncağın peşinden gitmesi gibi: oyuncak (gerçek) zıplar, kedi (görünen) adım adım yetişir.

Bu adımda sayıyı yürütüyoruz; çizime bir sonraki adımda bağlayacağız.

```js
    flip: 0, // 0 = showing its back, 1 = showing its face; follows faceUp over a few frames

function loop() {
  for (const card of cards) {
    card.flip = card.faceUp ? Math.min(1, card.flip + 0.1) : Math.max(0, card.flip - 0.1)
  }
  draw()
```

Ne işe yarıyor

• flip: 0, → her yeni kartın görünen hâli: arka yüz. Sondaki yorum ne anlama geldiğini söylüyor.
• loop içinde her karede, her kart için:
  • card.faceUp ? ... : ... → kart (gerçekte) açıksa ilk kısım, kapalıysa ikinci kısım.
  • Math.min(1, card.flip + 0.1) → 0.1 artır, ama Math.min iki sayıdan küçüğünü seçtiği için 1'i asla geçme.
  • Math.max(0, card.flip - 0.1) → 0.1 azalt, ama Math.max büyüğünü seçtiği için 0'ın altına inme.
• 10 karede (saniyenin altıda biri) dönüş tamamlanır. Görünen bir değeri hedefe doğru azar azar yürütmeye tweening denir; oyunlardaki animasyonların neredeyse hepsi böyledir.

Sıra sende

1. newGame içinde matched: false, satırının altına flip: 0, ... satırını yaz.
2. loop içinde draw() satırının üstüne for döngüsünü yaz.
3. Çalıştır: ekran aynı; kontroller sayının yürüdüğüne bakacak.

Beceriler: Oyun döngüsü, Oyun durumları

← Tekrar oyna Yarı yolda yüz değiştir →

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