Atölye › Pac-Man Tarzı Labirent Kovalamaca › 5/42. adım
Yemleri haritadan değil, kümelerden çizeceğiz. Böylece bir yem kümeden çıkınca ekrandan da kendiliğinden kaybolacak.
Kümede adlar metin ('8,15'); çizmek için onları yeniden sayıya çevirmemiz gerek. Küçük yemler döşemenin
ortasında 4 × 4 kareler, güç yemleri 6 yarıçaplı daireler olacak.
```js
ctx.fillStyle = '#fde68a'
for (const k of pellets) {
const [col, row] = k.split(',').map(Number)
ctx.fillRect(col * TILE + 10, TOP + row * TILE + 10, 4, 4)
}
for (const k of powers) {
const [col, row] = k.split(',').map(Number)
ctx.beginPath()
ctx.arc(col * TILE + TILE / 2, TOP + row * TILE + TILE / 2, 6, 0, Math.PI * 2)
ctx.fill()
}
```for (const k of pellets) { → kümedeki her ad için bir tur.k.split(',') → metni virgülden böler: '8,15' → ['8', '15']..map(Number) → her parçayı Number ile sayıya çevirir: [8, 15].const [col, row] = ... → iki elemanlı diziyi açarak iki ada koyar.col * TILE + 10, boyut 4 → 24 piksellik döşemenin tam ortasında 4 × 4 bir kare (10 + 4 + 10 = 24).ctx.beginPath() → yeni bir şekle başla. ctx.arc(x, y, 6, 0, Math.PI * 2) → merkezi döşemenin ortası, yarıçapı 6
olan bir tam daire (açılar radyanla: Math.PI * 2 = 360°). ctx.fill() → içini boyar.fillStyle bir kez seçildi; iki döngü de aynı sarımsı rengi kullanır.draw içinde labirent döngüleri (}) ile biten iki satır) kapandıktan sonra bir boş satır bırak ve yem
satırlarını yaz (draw'un son }'inden önce).Beceriler: Canvas üzerine çizim