Atölye › Puzzle Bobble Tarzı Balon Atıcı › 4/31. adım

Izgarayı çiz

Ne yapıyoruz

Izgaradaki bir hücrenin ekrandaki yerini bir fonksiyon hesaplayacak: cellPos (hücrenin yeri). Bütün geometri bu tek fonksiyonda duracak; bu, ileride çok işimize yarayacak.

Şimdilik en basit dizilişi kullanıyoruz: her balon bir çap (40 piksel) sağda, her satır bir çap aşağıda. Sonra draw bütün hücreleri gezip dolu olanları çizecek. Üstte skor için koyu bir şerit bırakıyoruz. Test balonunun işi bitti.

```js
const TOP = 30 // room for the score

const cellPos = (r, c) => ({ x: R + c * 2 * R, y: TOP + R + r * 2 * R })

  ctx.fillStyle = '#312e81'
  ctx.fillRect(0, 0, canvas.width, TOP)

  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c] < 0) continue
      const p = cellPos(r, c)
      drawBubble(p.x, p.y, grid[r][c])
    }
  }
```

Ne işe yarıyor

const TOP = 30 → üstteki şeridin yüksekliği.
const cellPos = (r, c) => ({ x: ..., y: ... }) → bir { x, y } nesnesi geri veren ok fonksiyonu; nesnenin etrafındaki ( ) şart, yoksa { fonksiyon gövdesi sanılır.
- x: R + c * 2 * R → 0. sütun x = 20 (balon sol kenara değer), her sütun bir çap (40) sağda.
- y: TOP + R + r * 2 * R → 0. satır şeridin hemen altında (30 + 20 = 50), her satır bir çap aşağıda.
Şerit: '#312e81' renkli, TOP yüksekliğinde bir dikdörtgen.
İç içe iki döngü her hücreyi gezer; if (grid[r][c] < 0) continue → boş hücreyi atla.
const p = cellPos(r, c) → hücrenin yeri; drawBubble(p.x, p.y, grid[r][c]) → oraya, kendi renginde.

Sıra sende

const ROWS = 14 satırının altına TOP yaz.
let grid ... satırının altına bir boş satır bırak ve cellPos satırını yaz.
draw içinde test balonu satırını sil; yerine şeridi ve iki döngüyü yaz (şeritten sonra bir boş satır).
Çalıştır: üstte beş sıra renkli balon görmelisin.

Beceriler: Canvas üzerine çizim, Döngüler

← Hücrelerden bir ızgara İç içe oturan balonlar →

Izgarayı çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar