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

İlk şerit

Ne yapıyoruz

Notalar dört şeritte kayacak; her şerit 70 piksel geniş. Dört şerit 4 × 70 = 280 piksel eder, canvas ise 400 piksel. Şeritleri ortalamak için soldan ve sağdan eşit boşluk bırakacağız: (400 − 280) ÷ 2 = 60 piksel.

Bu sayılara birer ad verip ilk şeridi yukarıdan aşağı uzanan bir şerit olarak çiziyoruz.

```js
const LANES = 4
const LANE_W = 70
const LEFT = (canvas.width - LANES * LANE_W) / 2

ctx.fillStyle = '#1e293b'
ctx.fillRect(LEFT + 2, 0, LANE_W - 4, canvas.height)
```

Ne işe yarıyor

const LANES = 4 → şerit sayısı. const LANE_W = 70 → bir şeridin eni (width).
Adlar büyük harfle yazıldı: bu, "oyun boyunca hiç değişmeyen ayar" demenin alışılmış yolu.
const LEFT = (canvas.width - LANES * LANE_W) / 2 → soldaki boşluk. Parantez içi önce hesaplanır: 400 − 4 × 70 = 120; / bölme: 120 ÷ 2 = 60. (* çarpma, çarpma da çıkarmadan önce yapılır.)
ctx.fillRect(LEFT + 2, 0, LANE_W - 4, canvas.height) → şerit, x = 62'den başlar ve 66 piksel geniştir; yukarıdan (0) aşağıya kadar (canvas.height) uzanır. Her yandan 2 piksel içeri çekiyoruz ki yan yana şeritlerin arasında ince bir boşluk kalsın.

Sıra sende

const ctx = ... satırının altında bir boş satır bırak ve üç sabiti (LANES, LANE_W, LEFT) yaz.
Dosyanın en sonuna, arka planı boyayan iki satırın altına şeridi çizen iki satırı yaz.
Çalıştır: solda, yukarıdan aşağı uzanan biraz daha açık renkli bir şerit görmelisin.

Beceriler: Canvas üzerine çizim

← Notalar için bir sahne Döngüyle dört şerit →

İlk şerit

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar