Atölye › Satranç › 6/48. adım
Taşları resim olarak değil, yazı olarak çizeceğiz: bilgisayarın harf takımında (Unicode) satranç sembolleri var:
♚ ♛ ♜ ♝ ♞ ♟. Her taş türüne bir sembol eşleyen bir sözlük yapacağız. draw her kareyi boyadıktan sonra, karede
taş varsa sembolünü karenin tam ortasına yazacak; beyazsa beyaz, siyahsa siyah renkle.
```js
const GLYPHS = { K: '♚', Q: '♛', R: '♜', B: '♝', N: '♞', P: '♟' }
ctx.fillRect(x, y, SQ, SQ)
const piece = board[r][c]
if (piece) {
ctx.font = '44px serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = piece[0] === 'w' ? '#f8fafc' : '#0f172a'
ctx.fillText(GLYPHS[piece[1]], x + SQ / 2, y + SQ / 2 + 3)
}
```const GLYPHS = { K: '♚', ... } → bir nesne (object): ad: değer çiftleri. GLYPHS['N'] → '♞'. Sözlükte
bir kelimeye bakmak gibi. İki taraf da aynı dolu sembolleri kullanacak, yalnız rengi farklı olacak.const piece = board[r][c] → bu karedeki taş ('wN' gibi) ya da ''.if (piece) { → boş metin '' "yanlış" sayılır; yani karede taş varsa içeriyi yap.ctx.font = '44px serif' → yazı boyu ve yazı tipi.textAlign = 'center', textBaseline = 'middle' → yazının ortası verilen noktaya gelsin (yatay ve dikey).piece[0] === 'w' ? '#f8fafc' : '#0f172a' → beyaz taş kırık beyaz, siyah taş lacivert-siyah.ctx.fillText(GLYPHS[piece[1]], x + SQ / 2, y + SQ / 2 + 3) → türün sembolünü yazar. x + SQ / 2 karenin
ortası; + 3 sembol gözle ortalı dursun diye onu biraz aşağı iter.const TOP = 56 ... satırının hemen altına GLYPHS satırını yaz. Sembolleri buradan kopyalayabilirsin.draw içinde, iki döngünün içindeki ctx.fillRect(x, y, SQ, SQ) satırının hemen altına taşı çizen satırları
yaz (içteki döngünün kapanan }'inden önce).Beceriler: Canvas üzerine çizim
← Renk ve tür Beyaza bir dış çizgi →