Atölye › Ritim Şeritleri › 9/35. adım
Şimdi notaları görünür yapıyoruz. draw, listedeki her notaya bakacak: vurulmamışsa ve ekranın içindeyse onu kendi
şeridinin renginde küçük bir blok olarak çizecek.
Ekranın çok yukarısında (henüz gelmemiş) ya da çok aşağısında (geçip gitmiş) olan notaları çizmeyiz; boşuna emek.
```js
for (const n of notes) {
if (n.hit) continue
const y = noteY(n)
if (y < -20 || y > canvas.height + 20) continue
ctx.fillStyle = COLORS[n.lane]
ctx.fillRect(LEFT + n.lane * LANE_W + 8, y - 10, LANE_W - 16, 20)
}
```for (const n of notes) { → "listedeki her nota için, ona n de ve içini yap". 49 nota, 49 tur.if (n.hit) continue → nota vurulduysa continue: "bu turu atla, sıradakine geç".const y = noteY(n) → notanın şu anki yüksekliği.if (y < -20 || y > canvas.height + 20) continue → || "ya da": ekranın üstünden yukarıda ya da altından
aşağıdaysa çizme.ctx.fillStyle = COLORS[n.lane] → notanın şeridinin rengi.ctx.fillRect(LEFT + n.lane * LANE_W + 8, y - 10, LANE_W - 16, 20) → şeridin içinde, yanlardan 8 piksel içeride,
20 piksel boyunda bir blok. y - 10'dan başladığı için ortası tam y'de.draw içinde, şerit döngüsünün kapanan }'sinin altına ve fonksiyonun son }'sinden önce nota döngüsünü yaz.
Çalıştır: ekranın en tepesinde, ilk şeritte yarısı görünen kırmızı bir nota olmalı.
Beceriler: Döngüler, Canvas üzerine çizim
← Yeri saat belirler İşleyen bir saat →