Atölye › Tetris Tarzı Bloklar › 3/32. adım

Bir hücre çiz

Ne yapıyoruz

Kuyuya hücre çizecek bir fonksiyon yazıyoruz: drawCell(sütun, satır, renk). Hücre numarasını piksele çevirmek kolay: sütun × 24 ve satır × 24.

Bir incelik: her hücreyi yuvasından her kenarda 1 piksel küçük çizeceğiz. Aradaki ince koyu çizgi sayesinde üst üste yığılan bloklar tek bir leke değil, ayrı ayrı kareler gibi görünecek. Denemek için sol alt köşeye gri bir hücre çiziyoruz.

```js
function drawCell(col, row, color) {
  ctx.fillStyle = color
  ctx.fillRect(col * CELL + 1, row * CELL + 1, CELL - 2, CELL - 2)
}

drawCell(0, 19, '#94a3b8')
```

Ne işe yarıyor

function drawCell(col, row, color) { → üç parametre (girdi): sütun, satır, renk. Çağırırken verilen değerler içeride bu adlarla kullanılır.
col * CELL + 1 → hücrenin sol kenarı col * CELL; + 1 bir piksel içeriden başlat.
CELL - 2 → en ve boy 22 piksel: iki yandan birer piksel boşluk.
drawCell(0, 19, '#94a3b8') → deneme çağrısı: 0. sütun, 19. satır (en alt), gri. Bir sonraki adımda bunun yerine bütün tahtayı çizeceğiz.

Sıra sende

let board = ... satırının altına bir boş satır bırakıp drawCell fonksiyonunu yaz.
Dosyanın en sonuna, bir boş satırdan sonra drawCell(0, 19, '#94a3b8') yaz.
Çalıştır: kuyunun sol alt köşesinde gri bir kare görmelisin.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Sayı satırlarından tahta Bütün tahtayı çiz →

Bir hücre çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar