Atölye › Klondike Solitaire › 3/40. adım
Açık bir kartın köşesinde adı (Q♥), ortasında da büyük bir renk işareti olur. Kartlarda değeri ve rengi
sayı olarak tutuyoruz; iki dizi bu sayıları ekrandaki işaretlere çevirecek.
Kapalı kartın ise yüzü görünmez: onda yazı olmayacak.
```js
const SUITS = ['♠', '♥', '♦', '♣']
const RANKS = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']
if (!card.up) return
ctx.fillStyle = '#0f172a'
ctx.font = 'bold 14px sans-serif'
ctx.textAlign = 'left'
ctx.fillText(RANKS[card.rank] + SUITS[card.suit], x + 4, y + 16)
ctx.font = '28px sans-serif'
ctx.textAlign = 'center'
ctx.fillText(SUITS[card.suit], x + CW / 2, y + 54)
```const SUITS = ['♠', '♥', '♦', '♣'] → dört rengin işareti: maça, kupa, karo, sinek. Bir kartta renk sayı
olarak durur (0–3); SUITS[1] → '♥'. Dizide sayma 0'dan başlar.const RANKS = ['', 'A', '2', ..., 'K'] → değerlerin adları. Kartlarda değer 1 (as) ile 13 (papaz) arası;
RANKS[12] → 'Q' (kız). Baştaki boş yazı '' yalnız 0. sırayı doldurur ki numaralar kartlarla uyuşsun.if (!card.up) return → ! "değil" demek: kart açık değilse fonksiyon burada biter. Kapalı kartın sırtında
yazı olmaz.ctx.fillStyle = '#0f172a' → yazı rengi koyu lacivert (bir sonraki adımda kırmızıyı ekleyeceğiz).ctx.font = 'bold 14px sans-serif' → kalın, 14 piksel yazı.ctx.textAlign = 'left' → verilen x yazının sol ucu olsun.ctx.fillText(RANKS[card.rank] + SUITS[card.suit], x + 4, y + 16) → 'Q' + '♥' = 'Q♥'; iki yazıyı + uç uca
ekler. Kartın sol üst köşesinden biraz içeriye yazılır.textAlign = 'center' ile x artık yazının ortası;
x + CW / 2 kartın tam ortası.const CW = 56 ... satırının üstüne SUITS ve RANKS satırlarını yaz. İşaretleri (♠ ♥ ♦ ♣) klavyeden
yazmak zorsa buradan kopyalayabilirsin.drawCardAt içinde ctx.strokeRect(x, y, CW, CH) satırının altına sekiz yeni satırı yaz.Q♥, ortada büyük bir ♥ görmelisin.Beceriler: Diziler ve nesneler, Canvas üzerine çizim
← Bir kart çiz Kırmızı ve siyah →