Atölye › Sudoku › 2/28. adım

Çizgiler ve kutular

Ne yapıyoruz

Sudoku tahtası dokuz tane 3 × 3'lük kutuya bölünür. Hücreler arasına ince gri çizgiler, kutuların etrafına kalın koyu çizgiler çekiyoruz. 10 dikey ve 10 yatay çizgi var; her üçüncüsü kalın.

```js
// Thin lines between cells, thick ones around each box.
for (let i = 0; i <= 9; i++) {
  ctx.fillStyle = i % 3 === 0 ? '#0f172a' : '#94a3b8'
  const w = i % 3 === 0 ? 3 : 1
  ctx.fillRect(LEFT + i * SIZE - w / 2, TOP, w, 9 * SIZE)
  ctx.fillRect(LEFT, TOP + i * SIZE - w / 2, 9 * SIZE, w)
}
```

Ne işe yarıyor

for (let i = 0; i <= 9; i++) → 0'dan 9'a (9 dahil): 10 çizgi. Kenarlar da çizgi.
i % 3 === 0 → 0, 3, 6, 9: kutu sınırları. Onlar koyu ve 3 piksel; diğerleri gri ve 1 piksel.
ctx.fillRect(LEFT + i * SIZE - w / 2, TOP, w, 9 * SIZE) → dikey çizgi: ince, uzun bir dikdörtgen. - w / 2 onu hücre sınırının tam ortasına yerleştirir.
İkinci fillRect aynısının yatay hâli.

Sıra sende

draw içinde hücre döngüsünün altına yorumu ve çizgi döngüsünü yaz. Çalıştır: tahtanın kutuları belirmeli.

Beceriler: Canvas üzerine çizim

← Dokuza dokuz Metinden bir bulmaca →

Tüm adımlar