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

Masa

Ne yapıyoruz

İlk çizimimizi yapıyoruz: bütün canvas'ı koyu çivit mavisine boyayacağız. Kartları dizeceğimiz masa burası.

Çizim hep iki hareketle olur: önce kalemin rengini seçersin, sonra o renkle bir şekli doldurursun. Boyacı gibi: fırçayı boyaya bandır, sonra duvara sür.

```js
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

Ne işe yarıyor

• ctx.fillStyle = '#1e1b4b' → kalemin dolgu rengini seçer. Renkler 'white' gibi İngilizce adla ya da # ile başlayan kodla yazılır. Kodları ezberlemen gerekmez, verileni aynen yaz.
• ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen boyar. Dört sayı sırayla:
  • 0, 0 → dikdörtgenin sol üst köşesi. Canvas'ta (0, 0) sol üst köşedir; x sağa, y aşağı doğru büyür (okuldaki grafiğin tersine).
  • canvas.width, canvas.height → genişlik ve yükseklik: canvas'ın kendi eni ve boyu (400 ve 440). Yani bütün tuval.

Sıra sende

const ctx = ... satırının altında bir satır boşluk bırak, iki satırı yaz ve Çalıştır'a bas. Oyun alanı koyu renge boyanmalı.

Beceriler: Canvas üzerine çizim

← Canvas'ı ve kalemi al Bir kart →

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