Atölye › Blackjack › 5/22. adım

Masadaki kartlar

Ne yapıyoruz

Her kart ince koyu çerçeveli beyaz bir dikdörtgen. Bir el yan yana, aralarında 8 piksel olan kartlar olarak çiziliyor: krupiyeninki üstte, seninki altta. Kartların yüzünü sonraki adımda yazacağız.

```js
const CARD_W = 64
const CARD_H = 90
const DEALER_Y = 70
const PLAYER_Y = 250

function drawCard(c, x, y) {
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(x, y, CARD_W, CARD_H)
  ctx.strokeStyle = '#0f172a'
  ctx.lineWidth = 1
  ctx.strokeRect(x, y, CARD_W, CARD_H)
}

function drawHand(hand, y) {
  hand.forEach((c, i) => drawCard(c, 20 + i * (CARD_W + 8), y))
}

  drawHand(dealer, DEALER_Y)
  drawHand(player, PLAYER_Y)
```

Ne işe yarıyor

strokeRect → dikdörtgenin yalnız çerçevesini strokeStyle renginde çizer; lineWidth kalınlığı.
hand.forEach((c, i) => ...) → her kartı eldeki sırasıyla verir. i. kart soldan 20 + i × 72 piksel.
drawCard(c, x, y) → c kartı şimdilik kullanılmıyor; yüzü yazarken lazım olacak.

Sıra sende

SUITS satırının altına dört boyut ve konum sabitini yaz.
draw fonksiyonunun üstüne drawCard ve drawHand yaz.
draw'da masadan sonra, bir boş satırla iki eli çizen satırları yaz. Çalıştır.

Beceriler: Canvas üzerine çizim

← Dağıt Kart yüzleri →

Tüm adımlar