Atölye › Satranç › 1/48. adım

Satranç: Koyu bir masa

Eksiksiz bir satranç oyunu ve onu oynayan bir bilgisayar yap. Veri olarak hamle desenleri, şahtan dışarı bakarak bulunan şah, deneyip geri alarak yasal hamleler, rok, geçerken alma, terfi, mat ve alfa-beta budamalı minimax arama.

Ne yapıyoruz

Bu oyunda her şeyi sayfadaki canvas'a (tuval) çizeceğiz: 480×520 piksellik boş bir dikdörtgen. Önce onu bulup çizim kalemini alacağız, sonra bütün tuvali koyu renge boyayacağız. Burası, satranç tahtasını üstüne koyacağımız masa.

Çizim satırlarını baştan draw (çiz) adlı bir fonksiyonun içine yazıyoruz; çünkü ileride taşlar oynadıkça resmi tekrar tekrar çizeceğiz.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

function draw() {
  ctx.fillStyle = '#1c1917'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
}

draw()
```

Ne işe yarıyor

document.getElementById('game') → sayfada kimliği (id) game olan öğeyi, yani canvas'ı bulur.
canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister. Adı ctx (context'in kısaltması); bütün çizim komutları ctx. ile başlayacak.
const → bir şeye kalıcı bir ad verir: bu ad hep aynı şeyi gösterir.
function draw() { ... } → fonksiyon tanımlar: süslü parantez içindeki satırlara draw adını verir. Bu satır tek başına bir şey çizmez; sadece tarifi yazar.
ctx.fillStyle = '#1c1917' → kalemin dolgu rengini seçer: çok koyu, sıcak bir kahve-siyah.
ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen çizer. İlk iki sayı sol üst köşesi: canvas'ta (0, 0) sol üst köşedir, x sağa, y aşağı doğru büyür. Son ikisi eni ve boyu: canvas'ın kendi boyu (480 ve 520), yani her yer.
En alttaki draw() → fonksiyonu çağırır: tarifi şimdi uygula.

Sıra sende

Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz. Sonra Çalıştır'a bas: sağdaki alanın tamamı koyu renge boyanmalı.

Beceriler: Canvas üzerine çizim

Bir sıra kare →

Satranç: Koyu bir masa

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar