Atölye › Satranç › 2/48. adım
Satranç tahtası 8 × 8 kareden oluşur. Her kare 56 piksel olsun. Önce bu ölçülere ad vereceğiz, sonra tahtanın en üst sırasını çizeceğiz: yan yana 8 kare, bir açık bir koyu.
8 kareyi tek tek yazmak yerine bir döngü kullanacağız: "şunu 8 kez yap, her seferinde bir kare sağa kay".
```js
const SQ = 56 // one square
const LEFT = 16
const TOP = 56 // room for the messages
for (let c = 0; c < 8; c++) {
const x = LEFT + c * SQ
const y = TOP
ctx.fillStyle = c % 2 === 0 ? '#e7d8b8' : '#b58863'
ctx.fillRect(x, y, SQ, SQ)
}
```const SQ = 56 → bir karenin eni ve boyu (square). LEFT = 16 tahtanın soldan, TOP = 56 üstten boşluğu; üstteki
boşluğa ileride mesajlar yazacağız. // sonrası yorum: bilgisayar okumaz.for (let c = 0; c < 8; c++) { → döngü: c'yi 0'dan başlatır, c < 8 doğru olduğu sürece içeriyi yapar ve
her turdan sonra c++ ile 1 artırır. Yani c sırayla 0, 1, 2, ... 7 olur: sütun numarası.const x = LEFT + c * SQ → karenin soldan uzaklığı: c bir artınca kare 56 piksel sağa kayar.const y = TOP → bu sıranın bütün kareleri aynı yükseklikte.c % 2 → % bölümden kalan: c çiftse 0, tekse 1.koşul ? a : b → "koşul doğruysa a, değilse b". Çift sütunlar açık ('#e7d8b8'), tekler koyu ('#b58863').ctx.fillRect(x, y, SQ, SQ) → o sütunun karesini boyar.const ctx = ... satırının altında bir boş satır bırakıp üç ölçü satırını yaz.draw fonksiyonunun içinde, arka planı boyayan ctx.fillRect(0, 0, ...) satırının altına bir boş satır bırak ve
döngüyü yaz (fonksiyonun kapanan }'inden önce).Beceriler: Canvas üzerine çizim, Döngüler
← Koyu bir masa 64 karenin hepsi →