Atölye › Yılan › 11/28. adım

Ok tuşlarıyla yönlendir

Ne yapıyoruz

Şimdi kontrol oyuncuda: bir ok tuşuna basılınca dir'i değiştireceğiz.

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.

```js
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') dir = { x: 0, y: -1 }
  if (event.key === 'ArrowDown') dir = { x: 0, y: 1 }
  if (event.key === 'ArrowLeft') dir = { x: -1, y: 0 }
  if (event.key === 'ArrowRight') dir = { x: 1, y: 0 }
})
```

Ne işe yarıyor

• document.addEventListener('keydown', (event) => { ... }) → "sayfada bir tuşa basıldığında (keydown) süslü parantez içini çalıştır". (event) => { } adı olmayan kısa bir fonksiyon; event basılan tuşun bilgilerini taşır.
• event.key → basılan tuşun adı: 'ArrowUp' (yukarı ok), 'ArrowDown', 'ArrowLeft', 'ArrowRight'.
• if (event.key === 'ArrowUp') dir = { x: 0, y: -1 } → eğer basılan tuş yukarı oksa, yönü yukarı yap. === "tam olarak eşit mi?" diye sorar (tek = ise "değer ver" demek, karıştırma).
• Dört satır dört yön için.

Sıra sende

1. let last = 0 satırının altında bir boş satır bırak ve dinleyiciyi yaz.
2. Çalıştır, sonra oyuna bir kez tıkla (klavye oyuna gitsin) ve ok tuşlarıyla kareyi yönlendir.

Beceriler: Klavye ve fare girdisi

← Gidilecek yön Listeden bir gövde →

Tüm adımlar

1. Canvas'ı bul
2. Kalemi al
3. Tahtayı boya
4. Hücrelerle düşün
5. Yeri bir değişkende tut
6. Çizen bir fonksiyon
7. Hareket ettiren bir fonksiyon
8. Oyun döngüsü
9. Yavaşlat
10. Gidilecek yön
11. Ok tuşlarıyla yönlendir
12. Listeden bir gövde
13. Bütün gövdeyi yürüt
14. Yeme bir yer seç
15. Yemi çiz
16. Ye ve büyü
17. Yemi yılanın üstüne koyma
18. Yön tablosu
19. Geri dönüş yok
20. Duvara çarpma
21. Kendine çarpma
22. Oyun bitti yazısı
23. Skoru göster
24. Oyunu başlatan tek fonksiyon
25. Boşlukla yeniden oyna
26. En iyi skoru hatırla
27. Büyüdükçe hızlan
28. Kendin yap: duvarlardan geç