Atölye › Tetris Tarzı Bloklar › 12/32. adım

Oklarla oynat

Ne yapıyoruz

Şimdi ok tuşlarını bağlıyoruz: sol, sağ ve aşağı. Üçü de aynı fonksiyon, yalnız (dx, dy) farklı. Parça duvarlardan geçemeyecek, çünkü her hareket önce fits'e soruyor.

Tuşa basınca ekranı elle yeniden çiziyoruz (draw()); çünkü ekranı sürekli yenileyen bir döngümüz henüz yok.

```js
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') tryMove(-1, 0)
  if (event.key === 'ArrowRight') tryMove(1, 0)
  if (event.key === 'ArrowDown') tryMove(0, 1)
  draw()
})
```

Ne işe yarıyor

document.addEventListener('keydown', (event) => { ... }) → "sayfada bir tuşa basıldığında bu fonksiyonu çalıştır". Buna olay dinlemek (event listener) denir. Fonksiyon hemen çalışmaz; her basışta tarayıcı onu çağırır ve basışın bilgisini event adıyla verir.
event.key → basılan tuşun adı: 'ArrowLeft' sol ok, 'ArrowRight' sağ ok, 'ArrowDown' aşağı ok.
=== → "tam olarak eşit mi?" diye sorar.
draw() → değişikliği ekrana yansıt.

Sıra sende

Dinleyiciyi function drawCell( satırının üstüne yaz; altında bir boş satır kalsın.
Çalıştır, oyuna bir kez tıkla (klavye oyuna gitsin) ve oklarla T'yi gezdir. Duvardan geçmemeli.

Beceriler: Klavye ve fare girdisi

← Önce dene, sonra taşı Matrisi döndür →

Oklarla oynat

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar