Atölye › Wolfenstein Tarzı 3B Labirent › 17/18. adım

Dokunmatik kontrol

Ne yapıyoruz

Telefonda ok tuşu yok. Ekranın sol üçte birini basılı tutmak sola, sağ üçte birini sağa döndürsün, ortası yürütsün. Kazandıktan sonra bir dokunuş yeniden oynatsın. Dokunuşlar aynı keys nesnesine yazıyor; update farkı anlamıyor bile.

```js
// Touch: hold the left third to turn left, the right third to turn right, the middle to walk.
canvas.addEventListener('pointerdown', (event) => {
  if (state === 'won') {
    reset()
    return
  }
  const rect = canvas.getBoundingClientRect()
  const third = ((event.clientX - rect.left) / rect.width) * 3
  keys[third < 1 ? 'ArrowLeft' : third < 2 ? 'ArrowUp' : 'ArrowRight'] = true
})
function stopTouch() {
  keys.ArrowLeft = false
  keys.ArrowUp = false
  keys.ArrowRight = false
}
canvas.addEventListener('pointerup', stopTouch)
canvas.addEventListener('pointercancel', stopTouch)
```

Ne işe yarıyor

(event.clientX - rect.left) / rect.width → dokunuşun tuvalin genişliğinde nereye düştüğü (0–1); tuval ekranda büyük ya da küçük gösterilse de doğru çalışır. * 3 → 0 ile 3 arası: hangi üçte bir.
keys[...] = true → sahte bir tuşa basar: sol üçte bir ArrowLeft, orta ArrowUp, sağ ArrowRight.
stopTouch → parmak kalkınca üçünü de bırakır. pointercancel → tarayıcı dokunuşu kendine alırsa (kaydırma gibi).

Sıra sende

update fonksiyonunun üstüne dokunma dinleyicilerini yaz. Çalıştır.

Beceriler: Klavye ve fare girdisi

← En iyi süre Kendin yap: koş →

Tüm adımlar