Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 4/29. adım
Altı renk mücevher var: COLORS. Tahtayı bir tabloda tutacağız: 8 satır, her satır 8 sayı. Hücrede rengin kendisini
değil, COLORS listesindeki sıra numarasını (0–5) tutuyoruz: 0 kırmızı, 3 mavi... Sayıları karşılaştırmak
kolay; rengi yalnız çizerken arayacağız.
newBoard() (yeni tahta) tabloyu rastgele mücevherlerle dolduracak. Bu adımda ekranda bir şey değişmeyecek; tahta
şimdilik yalnız bilgi.
```js
const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899']
let board // board[row][col]: a color index
const randomGem = () => Math.floor(Math.random() * COLORS.length)
function newBoard() {
board = []
for (let r = 0; r < N; r++) {
board.push([])
for (let c = 0; c < N; c++) {
board[r].push(randomGem())
}
}
}
newBoard()
requestAnimationFrame(loop)
```const COLORS = [...] → altı renk; sıra numaraları 0'dan 5'e.let board → tahta. Yanındaki yorum içinde ne olduğunu söylüyor: board[satır][sütun] bir renk sırası.const randomGem = () => ... → kısa yazılmış bir fonksiyon (ok fonksiyonu): hiçbir şey almaz, =>'nin sağını
verir. randomGem() diye çağrılır.Math.random() → 0 ile 1 arası (1 hariç) rastgele bir sayı. * COLORS.length (× 6) → 0 ile 5,99 arası.Math.floor(...) → aşağı yuvarla: 0, 1, 2, 3, 4 ya da 5.function newBoard() { →board = [] → boş bir listeyle başla.board.push([]) → push listenin sonuna ekler: her satır için boş bir satır listesi.board[r].push(randomGem()) → o satıra rastgele bir mücevher ekle. İç döngü 8 kez: satırda 8 mücevher.newBoard() → döngü başlamadan ilk tahtayı kurar.const TOP = 72 ... satırının altına COLORS satırını yaz.function draw() { satırının üstüne let board, randomGem ve newBoard'u yaz; aralarında birer boş satır
bırak.requestAnimationFrame(loop) satırının üstüne newBoard() yaz.Beceriler: Diziler ve nesneler
← Oyun döngüsü Mücevherleri çiz →