Atölye › Ritim Şeritleri › 13/35. adım
Şimdi oyuncu işin içine giriyor. Dört şerit için dört tuş: D, F, J, K (klavyede parmaklarının zaten durduğu yer) ya da dört ok tuşu. Bir tuşa basınca o şerit yanacak.
Hangi tuşun hangi şeride gittiğini küçük bir tablo tutacak; bir sözlük gibi: tuşu ararsın, karşısında şerit
numarası yazar. İşi yapan ise tek bir fonksiyon olacak: press(lane), "şu şeride basıldı".
```js
const KEYS = { d: 0, f: 1, j: 2, k: 3, ArrowLeft: 0, ArrowDown: 1, ArrowUp: 2, ArrowRight: 3 }
function press(lane) {
lit[lane] = 8
}
document.addEventListener('keydown', (event) => {
const lane = KEYS[event.key] ?? KEYS[event.key.toLowerCase()]
if (lane === undefined) return
event.preventDefault()
press(lane)
})
```const KEYS = { d: 0, f: 1, ... } → bir nesne (object): anahtar: değer çiftlerinden oluşan küçük bir
sözlük. KEYS['j'] → 2, KEYS['ArrowUp'] → 2. Tabloda olmayan bir tuş sorulursa sonuç undefined
("tanımsız", yani yok) olur.function press(lane) { → lane parametre: çağırırken verdiğin şerit numarası. press(1) dersen içeride
lane 1 olur.lit[lane] = 8 → o şeridin geri sayımını 8 yap: şerit 8 kare yanar.document.addEventListener('keydown', (event) => { ... }) → "sayfada bir tuşa basıldığında içini çalıştır".
Buna olay dinlemek denir: kapı zili gibi, çalınca ne yapılacağını önceden söylersin. event basılan tuşun
bilgilerini taşır; event.key tuşun adı ('d', 'ArrowUp').KEYS[event.key] ?? KEYS[event.key.toLowerCase()] → a ?? b: "a yoksa b'yi kullan". Önce tuşun kendisine
bakarız; Caps Lock açıkken 'D' gelir ve tabloda yoktur, o zaman .toLowerCase() ile küçük harfe çevirip yeniden
ararız.if (lane === undefined) return → bu tuş bizi ilgilendirmiyorsa burada dur. return fonksiyondan hemen çıkar.event.preventDefault() → tarayıcının o tuşla kendi yaptığı işi engeller: ok tuşları sayfayı kaydırmasın.press(lane) → kararı press verir.const LEAD = ... satırının altına KEYS satırını yaz.function update() { satırının üstüne press fonksiyonunu yaz; altında bir boş satır kalsın.function draw() { satırının üstüne (yani update'in altına) keydown dinleyicisini yaz; altında bir boş
satır kalsın.Beceriler: Klavye ve fare girdisi
← Yanan şeritler Tuşları göster →