Atölye › Mario Tarzı Platform › 3/37. adım
Şimdi yazıyı resme çeviriyoruz. İç içe iki döngüyle her döşemeyi gezeceğiz; zemin (#) ve tuğla (B) ise o yere
32×32'lik bir kare çizeceğiz. Hangi harfin hangi renk olduğunu bir nesne söyleyecek: COLORS.
```js
const COLORS = { '#': '#78350f', B: '#c2410c' }
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const tile = LEVEL[row][col]
if (tile === '#' || tile === 'B') {
ctx.fillStyle = COLORS[tile]
ctx.fillRect(col * TILE, row * TILE, TILE, TILE)
}
}
}
```const COLORS = { '#': '#78350f', B: '#c2410c' } → harften renge bir sözlük: zemin kahverengi, tuğla turuncu.
# özel bir işaret olduğu için anahtar olarak tırnak ister; B istemez.for (let row = 0; row < ROWS; row++) → her satır için; içindeki for → o satırın her sütunu için. İç içe iki döngü:
11 × 64 döşemenin hepsi bir kez.const tile = LEVEL[row][col] → o yerdeki harf.if (tile === '#' || tile === 'B') → zemin veya tuğla ise çiz; hava (.) ve diğerleri çizilmez.ctx.fillStyle = COLORS[tile] → köşeli parantezle sözlükten okuma: COLORS['#'] → '#78350f'.ctx.fillRect(col * TILE, row * TILE, TILE, TILE) → döşemenin piksel yeri = sütun ve satır × 32. 9. sütun, 6. satır →
(288, 192).const COLS = ... satırının altına COLORS satırını yaz.draw içinde gökyüzünü boyayan fillRect satırının altına bir boş satır bırak ve iki döngüyü yaz.Beceriler: Canvas üzerine çizim, Döngüler
← Metinden bir bölüm Ne katı? →