Atölye › Puzzle Bobble Tarzı Balon Atıcı › 5/31. adım
Gerçek balonlar kutudaki bilyeler gibi sıkı dizilir: her iki satırdan biri yarım balon sağa kayar ve her balon, üstündeki iki balonun arasındaki çukura oturur. Buna altıgen ızgara denir; bal peteğindeki desen.
Izgaramız yine düz bir iki boyutlu dizi; değişen yalnız cellPos, yani geometri:
R kadar sağa kayar;```js
const ROW_H = R * Math.sqrt(3) // rows overlap so the bubbles nest
const cols = (r) => (r % 2 === 0 ? COLS : COLS - 1)
const cellPos = (r, c) => ({ x: R + c * 2 * R + (r % 2) * R, y: TOP + R + r * ROW_H })
for (let c = 0; c < cols(r); c++) grid[r].push(r < 5 ? Math.floor(Math.random() * COLORS.length) : -1)
for (let c = 0; c < cols(r); c++) {
```r % 2 → % bölümden kalan: çift satırda 0, tek satırda 1. (r % 2) * R → tek satırlar R kadar sağa.const ROW_H = R * Math.sqrt(3) → satır yüksekliği. Neden √3? Bir balon ve oturduğu iki balonun merkezleri kenarı
2R olan bir eşkenar üçgen yapar; o üçgenin yüksekliği 2R × √3 / 2 = R × √3 ≈ 1.73 R. Yani 2R yerine 1.73 R:
satırlar iç içe geçer. Math.sqrt karekök alır.const cols = (r) => (r % 2 === 0 ? COLS : COLS - 1) → çift satırda 10, tek satırda 9 hücre.reset ve draw içindeki döngüler artık COLS yerine cols(r)'ye kadar gidiyor.const ROWS = 14 satırının altına ROW_H yaz.cellPos satırının üstüne cols satırını yaz; cellPos'u kodda görüldüğü gibi değiştir.reset ve draw içindeki c < COLS yazılarını c < cols(r) yap.Beceriler: Diziler ve nesneler, Canvas üzerine çizim