Atölye › Ritim Şeritleri › 1/35. adım
Notalar çizgiye ulaştıkça onlara vur. Metin olarak yazılmış bir şarkı, zamana göre yerleştirilip saatten çizilen notalar, kusursuz ve iyi için zamanlama pencereleri, ıskalar, çarpanı yükselten kombolar, doğruluk ve not, ve telefonda dokunulabilen şeritler.
Bir ritim oyunu yapıyoruz: renkli notalar dört şeritte yukarıdan aşağı kayar; nota alttaki çizgiye geldiği an o şeridin tuşuna basarsın. Müzikle el çırpmak gibi: erken ya da geç değil, tam zamanında.
Önce bir sahne lazım. Sayfada game adında 400×560 piksellik bir canvas (tuval) zaten var; sağdaki alan o.
Onu bulacağız, çizim kalemini alacağız ve tamamını koyu renge boyayacağız.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document → sayfanın kendisi. .getElementById('game') → "kimliği (id) game olan öğeyi bul".const canvas = → bulunan şeye canvas adını verir. const "bu ad hep aynı şeyi gösterecek" demektir.canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister. Adı ctx (context'in kısaltması);
bütün çizim satırları ctx. ile başlayacak.ctx.fillStyle = '#0f172a' → kalemin dolgu rengini seçer. # ile başlayan kod bir renktir; bu çok koyu bir
lacivert.ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen çizer. Dört sayı sırayla: sol üst
köşenin x'i ve y'si, sonra genişlik ve yükseklik. Canvas'ta (0, 0) sol üst köşedir; x sağa, y
aşağı doğru büyür. canvas.width ve canvas.height tuvalin tam boyu (400 ve 560), yani her yer boyanır.Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar bunları okumaz, insan için nottur) altına
yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas: sağdaki alanın tamamı koyu laciverte dönmeli.
Beceriler: Canvas üzerine çizim