Atölye › 2048 › 24/26. adım

Kaydırmalar

Ne yapıyoruz

2048 en güzel telefonda, parmakla kaydırarak oynanır. Kaydırma hazır bir olay değil; onu bildiğimiz iki olaydan kurarız:

1. pointerdown: parmak (ya da fare) nereye bastı, hatırla.
2. pointerup: kalktığında ne kadar yol aldı, ölç: yatayda dx, dikeyde dy.

Hangisi daha büyükse o kazanır: çoğunlukla yanlamasına ise sol ya da sağ, çoğunlukla dikey ise yukarı ya da aşağı. İşaret (artı/eksi) yönü söyler.

```js
// A swipe is where the pointer came up compared to where it went down.
let swipeStart = null
canvas.addEventListener('pointerdown', (event) => {
  swipeStart = { x: event.clientX, y: event.clientY }
})
canvas.addEventListener('pointerup', (event) => {
  if (!swipeStart) return
  const dx = event.clientX - swipeStart.x
  const dy = event.clientY - swipeStart.y
  swipeStart = null
  if (Math.abs(dx) > Math.abs(dy)) move(dx > 0 ? 'right' : 'left')
  else move(dy > 0 ? 'down' : 'up')
  draw()
})
```

Ne işe yarıyor

• let swipeStart = null → basılan nokta; parmak kalkıkken null.
• pointerdown → event.clientX ve event.clientY parmağın sayfadaki yeri; bir nesne olarak saklanır.
• pointerup → başlangıç yoksa (!swipeStart) hiçbir şey yapma. Varsa dx (sağa pozitif) ve dy (aşağı pozitif) hesapla, başlangıcı unut.
• Math.abs(dx) > Math.abs(dy) → Math.abs işareti atar: yatay hareket dikeyden büyükse yatay bir kaydırma. dx > 0 ? 'right' : 'left' → sağa mı sola mı.
• else → dikey: dy > 0 aşağı, değilse yukarı.
• Burada sayfa pikseli yeterli, canvas pikseline çevirmeye gerek yok: kaydırmada önemli olan oyundaki bir yer değil, parmağın ne kadar yol aldığı.

Sıra sende

function cellX(col) { satırının üstüne yorumu, swipeStart satırını ve iki dinleyiciyi yaz; altlarında bir boş satır kalsın. Çalıştır, fareyle basılı tutup sürükleyerek dene.

Beceriler: Klavye ve fare girdisi

← Rekor Dokunmak kaydırmak değildir →

Tüm adımlar

1. Tahta
2. On altı hücre
3. Sayılardan bir ızgara
4. Her sayıya bir renk
5. Karolara sayılar
6. Büyük sayı, küçük yazı
7. Boş hücreleri bul
8. Yeni bir karo
9. Başlangıçta iki karo
10. Bir satırı kaydır
11. Eşit karoları birleştir
12. Sola hareket
13. Ok tuşu
14. Yalnız gerçek hamleler sayılır
15. Sağ, ters çevrilmiş sol
16. Yukarı ve aşağı sütunlardır
17. Skor
18. Hamle kaldı mı?
19. Oyun bitti
20. 2048 yapmak
21. Kazanma ve kaybetme ekranları
22. Devam için Boşluk
23. Rekor
24. Kaydırmalar
25. Dokunmak kaydırmak değildir
26. Kendin yap: geri al