Atölye › Klondike Solitaire › 2/40. adım

Bir kart çiz

Ne yapıyoruz

Oyunun her kartı küçük bir nesne olacak: { rank, suit, up } → değeri, rengi (maça, kupa...) ve açık mı kapalı mı olduğu. Bu adımda tek bir kartı istediğimiz yere çizen drawCardAt (kartı şurada çiz) fonksiyonunu yazıyoruz.

Açık kart beyaz, kapalı kart (arkası dönük) mavi olacak. Denemek için masanın sol üstüne geçici bir test kartı çizeceğiz.

```js
const CW = 56 // card width
const CH = 78

function drawCardAt(card, x, y) {
  ctx.fillStyle = card.up ? '#ffffff' : '#1d4ed8'
  ctx.fillRect(x, y, CW, CH)
  ctx.strokeStyle = '#0f172a'
  ctx.lineWidth = 1
  ctx.strokeRect(x, y, CW, CH)
}

  drawCardAt({ rank: 12, suit: 1, up: true }, 16, 40)
```

Ne işe yarıyor

const CW = 56 ve const CH = 78 → kartın eni ve boyu (piksel). Sayıları bir kez adlandırıyoruz.
function drawCardAt(card, x, y) → üç şey alır: çizilecek kart ve sol üst köşesinin yeri.
card.up ? '#ffffff' : '#1d4ed8' → koşul işleci: koşul ? evetse : hayırsa. Kart açıksa (card.up doğruysa) beyaz, değilse mavi. Kısa bir if/else gibi düşün.
ctx.fillRect(x, y, CW, CH) → kartın gövdesi.
ctx.strokeStyle, ctx.lineWidth, ctx.strokeRect(...) → fillRect içini doldurur, strokeRect ise yalnız çerçeve çizer: rengi strokeStyle, kalınlığı lineWidth (1 piksel).
drawCardAt({ rank: 12, suit: 1, up: true }, 16, 40) → draw içinde, masanın hemen ardından geçici bir test kartı: açık bir kart, (16, 40) noktasında. (12 kız, 1 kupa demek; birazdan göreceğiz.)

Sıra sende

const ctx = ... satırının altına bir boş satır bırak ve CW, CH satırlarını yaz.
function draw() { satırının üstüne drawCardAt fonksiyonunu yaz; aralarında bir boş satır kalsın.
draw içinde ctx.fillRect(...) satırının altına bir boş satır bırak ve test kartı satırını yaz (iki boşluk içeriden).
Çalıştır: sol üstte beyaz, çerçeveli bir kart görmelisin.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Yeşil masa Kartın yüzü →

Bir kart çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar