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

Bir kart

Ne yapıyoruz

Tahta 4×4 = 16 karttan oluşacak. Her kart 85 piksel, aralarında ve kenarlarda 12 piksel boşluk olacak. En üstte hamle sayacı için 40 piksellik bir şerit kalacak.

Bu sayılara ad veriyoruz ki kodda 85 yerine CARD yazalım: hem okunur olur, hem de değiştirmek istersen tek bir yeri değiştirirsin. Sonra ilk kartı çiziyoruz: kapalı kart, düz mor bir kare.

```js
const SIZE = 4 // cards per row and per column
const CARD = 85
const GAP = 12
const TOP = 40 // room for the move counter above the cards

ctx.fillStyle = '#6366f1'
ctx.fillRect(GAP, TOP + GAP, CARD, CARD)
```

Ne işe yarıyor

const SIZE = 4 → bir satırda (ve bir sütunda) 4 kart.
const CARD = 85 → kartın eni ve boyu. const GAP = 12 → kartlar arasındaki boşluk.
const TOP = 40 → üstte hamle sayacına ayrılan şerit.
Sayılar tam sığacak şekilde seçildi: dört 85'lik kart ve beş 12'lik boşluk 4 × 85 + 5 × 12 = 400 eder, yani canvas'ın eni.
ctx.fillStyle = '#6366f1' → mor: kartların arka yüzü.
ctx.fillRect(GAP, TOP + GAP, CARD, CARD) → soldan bir boşluk (12), şeridin bir boşluk altından (52) başlayan, 85×85'lik kare.
Kapalı kartların hepsi aynı düz kare olacak: oyunun bütün amacı da bu.

Sıra sende

const ctx = ... satırının altına bir boş satır bırak ve dört sabiti yaz.
Dosyanın en sonuna, bir boş satırdan sonra iki mor satırı yaz.
Çalıştır: sol üstte mor bir kare görmelisin.

Beceriler: Canvas üzerine çizim

← Masa Bir sıra kart →

Bir kart

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar