Atölye › Sokoban › 14/29. adım
Şimdi ok tuşlarını bağlıyoruz. Tarayıcıya "bir tuşa basılınca bana haber ver" deriz: buna olay dinlemek (event listener) denir; kapı zili gibi, çalınca ne yapılacağını önceden söylersin.
Sokoban sıra tabanlı bir oyun: bir tuş = bir adım. Saniyede 60 kez çizen bir döngüye gerek yok; tuşa basılınca durumu değiştirir ve resmi bir kez yeniden çizeriz.
```js
const directions = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }
document.addEventListener('keydown', (event) => {
if (directions[event.key]) {
event.preventDefault()
move(...directions[event.key])
}
draw()
})
```const directions = { ArrowLeft: [-1, 0], ... } → bir nesne, burada bir tablo gibi: sol tarafta ad
(anahtar), sağ tarafta değer. directions['ArrowUp'] → [0, -1].document.addEventListener('keydown', (event) => { ... }) → sayfada bir tuşa basıldığında süslü parantez içini
çalıştır. event basılan tuşun bilgilerini taşır; event.key tuşun adı ('ArrowUp' gibi).if (directions[event.key]) → tabloda olmayan bir tuş sorulursa undefined (yok) gelir ve if girmez. Yani "bu bir
ok tuşu mu?"event.preventDefault() → tarayıcının o tuşla yapacağı kendi işini engeller: ok tuşları normalde sayfayı kaydırır.move(...directions[event.key]) → ... çifti açıp iki ayrı değer olarak verir: move(0, -1) gibi.draw() → her tuştan sonra yeni durumu çiz.function draw() { satırının üstüne directions tablosunu ve dinleyiciyi yaz; aralarda birer boş satır kalsın.Beceriler: Klavye ve fare girdisi
← Bir adım Kutular yolu kapatır →