Atölye › Pac-Man Tarzı Labirent Kovalamaca › 3/42. adım
Haritayı ekrana dökme zamanı. Her sıranın her harfine bakacağız:
# → mavi bir kare. Döşemeden her yanda 2 piksel küçük çizeceğiz; duvarlar aralarında ince çizgiler olan
bloklar gibi görünecek.- → hayalet evi: döşemenin tamamı koyu mor.Her harfin hangi sıra ve sütunda olduğunu da bilmemiz gerek; çünkü karenin yeri ona göre hesaplanır.
```js
MAZE.forEach((line, row) => {
;[...line].forEach((ch, col) => {
if (ch === '#') {
ctx.fillStyle = '#1d4ed8'
ctx.fillRect(col * TILE + 2, TOP + row * TILE + 2, TILE - 4, TILE - 4)
}
if (ch === '-') {
ctx.fillStyle = '#312e81'
ctx.fillRect(col * TILE, TOP + row * TILE, TILE, TILE)
}
})
})
```MAZE.forEach((line, row) => { ... }) → forEach dizinin her elemanı için fonksiyonu çalıştırır. İkinci ad
(row) elemanın sıra numarasıdır: ilk turda line en üst sıranın metni, row 0.[...line] → metni harflerine ayırır: [...'#.o'] → ['#', '.', 'o']. İçteki forEach her harfi (ch) ve
sütununu (col) verir.; → satır [ ile başlıyor. JavaScript satır sonlarında bazen noktalı virgül varsaymaz ve bu satırı bir
üstteki satıra yapıştırabilir. Önüne ; koymak bunu önler.col * TILE + 2 → sütunun soldan uzaklığı, artı 2 piksel boşluk. TOP + row * TILE + 2 → üstten uzaklık (skor
alanı dahil). TILE - 4 → iki yandan 2'şer piksel eksik: 20 × 20.'-' → ev: col * TILE ile tam döşeme, boşluksuz.draw içinde arka planı boyayan ctx.fillRect(0, 0, ...) satırının altına bir boş satır bırak ve döngüleri
yaz (draw'un kapanan }'inden önce).Beceriler: Canvas üzerine çizim, Diziler ve nesneler