Atölye › XOX › 14/33. adım

Tıklamayı dinle

Ne yapıyoruz

Oyuncu fareyle oynayacak. Tarayıcıya "canvas'a tıklanınca bana haber ver" deriz. Buna olay dinlemek (event listener) denir: kapı zili gibi; zil çalınca ne yapacağını önceden söylersin.

Önce basit bir deneme: nereye tıklanırsa tıklansın orta kutuya oynayalım ve tahtayı yeniden çizelim.

```js
canvas.addEventListener('click', (event) => {
  play(4)
  draw()
})
```

Ne işe yarıyor

canvas.addEventListener('click', (event) => { ... }) → "canvas'a her tıklandığında (click) süslü parantezin içini çalıştır". (event) => { } 10. adımda gördüğün kısa fonksiyon yazımı.
event → tıklamanın bilgilerini taşır (farenin yeri gibi). Bir sonraki adımda kullanacağız.
play(4) → 4 numaralı kutuya (orta) oyna.
draw() → tahtayı yeniden çiz. Tahta değişince ekranı biz güncelleriz; kendiliğinden olmaz.
Bu oyunda hareket eden bir şey yok, o yüzden sürekli çalışan bir oyun döngüsüne gerek yok. Tıklamadan sonra bir kez çizmek yeter. Satranç, kart ve bulmaca oyunları genelde böyle yazılır.

Sıra sende

play fonksiyonunun altına, function draw() { satırının üstüne dinleyiciyi yaz; araya boş satırlar bırak.
draw fonksiyonu aşağıda tanımlı olsa da sorun değil: tıklama olduğunda bütün dosya çoktan okunmuş olur.
Çalıştır ve tahtaya iki kez tıkla.

Beceriler: Klavye ve fare girdisi

← Dolu kutuya oynanmaz Hangi kutuya tıklandı? →

Tıklamayı dinle

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar