Atölye › Puzzle Bobble Tarzı Balon Atıcı › 3/31. adım
Balonlar tavandan satırlar hâlinde sarkar. Onları iki boyutlu bir dizide tutacağız: grid[r][c]. Yani bir
satırlar listesi; her satır da bir hücreler listesi. Bir sinemanın koltuk planı gibi: sıra numarası ve koltuk numarası.
Her hücrede bir renk numarası (0–4) ya da boşsa -1 olacak. Yeni oyun (reset) ilk beş satırı rastgele renklerle
dolduracak, gerisini boş bırakacak. Bu adımda ekranda bir şey değişmeyecek; ızgarayı bir sonraki adımda çizeceğiz.
```js
const COLS = 10 // bubbles in an even row; odd rows have one less and sit half a bubble to the right
const ROWS = 14
let grid // grid[r][c]: a color index, or -1 for an empty cell
function reset() {
grid = []
for (let r = 0; r < ROWS; r++) {
grid.push([])
for (let c = 0; c < COLS; c++) grid[r].push(r < 5 ? Math.floor(Math.random() * COLORS.length) : -1)
}
}
reset()
```const COLS = 10 → bir satırdaki balon sayısı; yorum tek satırlar için planı şimdiden söylüyor (birazdan).
const ROWS = 14 → satır sayısı.let grid → ızgara; yorum: grid[r][c] bir renk numarası ya da boş hücre için -1.grid = [] → boş liste. for (let r = 0; r < ROWS; r++) → her satır için:grid.push([]) → ızgaraya yeni, boş bir satır ekle.for (let c = 0; c < COLS; c++) grid[r].push(...) → o satıra 10 hücre ekle.Math.random() 0 ile 1 arasında rastgele sayı; * COLORS.length → 0 ile 4.99...; Math.floor küsuratı atar →
0–4 arası rastgele bir renk.r < 5 ? renk : -1 → ilk beş satır renkli, gerisi boş.reset() → oyunu başta bir kez kur.const R = 20 ... satırının altına COLS ve ROWS satırlarını yaz.COLORS satırının altına bir boş satır bırak; let grid satırını ve reset fonksiyonunu yaz.requestAnimationFrame(loop) satırının hemen üstüne reset() yaz.Beceriler: Diziler ve nesneler