Atölye › Ritim Şeritleri › 4/35. adım

Vuruş çizgisi

Ne yapıyoruz

Her şeridin altına renkli bir vuruş çizgisi koyuyoruz: nota tam bu çizgiye geldiğinde basacaksın. Her şeridin kendi rengi olacak: kırmızı, turuncu, yeşil, mavi.

Dört rengi tek tek adlandırmak yerine bir dizi (array) içinde tutarız: sıralı bir liste, bir alışveriş listesi gibi. Şerit numarasıyla listeden kendi rengini alır.

```js
const HIT_Y = 480 // where a note should be when you press
const COLORS = ['#f43f5e', '#f59e0b', '#22c55e', '#3b82f6']

  ctx.fillRect(x + 2, 0, LANE_W - 4, canvas.height)
  ctx.fillStyle = COLORS[lane]
  ctx.fillRect(x + 6, HIT_Y - 4, LANE_W - 12, 8)
}
```

Ne işe yarıyor

const HIT_Y = 480 → vuruş çizgisinin yüksekliği: yukarıdan 480. piksel. Satır sonundaki // bir yorum.
const COLORS = [...] → köşeli parantez bir dizi açar: virgülle ayrılmış dört renk.
COLORS[lane] → listeden sırası lane olan renk. Sayma 0'dan başlar: COLORS[0] kırmızı ('#f43f5e'), COLORS[3] mavi.
ctx.fillRect(x + 6, HIT_Y - 4, LANE_W - 12, 8) → 8 piksel kalınlığında bir çubuk. HIT_Y - 4'ten başlayıp 8 piksel indiği için ortası tam HIT_Y'de. Yanlardan 6'şar piksel içeride.
Bu iki satır döngünün içinde: her şerit kendi çubuğunu kendi rengiyle çizer.

Sıra sende

const LEFT = ... satırının altına HIT_Y ve COLORS satırlarını yaz.
Döngünün içinde, şeridi çizen ctx.fillRect(x + 2, ...) satırının altına çubuğun iki satırını yaz (döngünün kapanan }'sinden önce).
Çalıştır: şeritlerin altına yakın dört renkli çizgi görmelisin.

Beceriler: Diziler ve nesneler

← Döngüyle dört şerit Çizen bir fonksiyon →

Vuruş çizgisi

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar