Atölye › Hafıza Kartları › 1/25. adım
Kartları ikişer ikişer çevir ve eşlerini bul. Adil karıştırma, neye tıklandığını bulma, zamanlayıcılar ve kart çevirme animasyonu.
Bir hafıza kartları oyunu yazacağız: 16 kart kapalı durur, ikişer ikişer açıp aynı meyveleri eşleştirirsin.
Oyundaki her şey sayfadaki bir canvas (tuval) üzerine çizilir: 400 piksel eninde, 440 piksel boyunda boş bir dikdörtgen. Resim yapmadan önce iki şey lazım: kâğıt ve kalem. Bu adımda ikisini de alıyoruz; ekranda henüz bir şey değişmeyecek.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```document → sayfanın kendisi. Sayfadaki her şeye buradan ulaşırız..getElementById('game') → "kimliği (id) game olan öğeyi bul". Nokta (.) "bunun içindeki şu komut" demek;
parantez ( ) komuta bilgi verir. Tırnak içindeki 'game' bir yazıdır (metin).const canvas = → bulunan şeye canvas adını verir. Kutuya etiket yapıştırmak gibi: bundan sonra hep bu adla
çağırırız. const "bu ad hep aynı şeyi gösterecek" demek; = "sağdakini soldaki ada ver".canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister.const ctx = → kaleme ctx adını verir (context, yani bağlam kelimesinin kısaltması). Bütün çizim satırları
ctx. ile başlayacak: "kalemle şunu yap".Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar onları okumaz, insanlar için not) altına
yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas (ya da Ctrl + Enter). Ekran değişmez, ama alttaki
kontroller yeşil olmalı.
Beceriler: Canvas üzerine çizim