Atölye › Pong › 22/26. adım

Raketle nişan al

Ne yapıyoruz

Şu an top raketten hep aynı açıyla sekiyor; oyuncu nişan alamıyor. Gerçek Pong'da topun raketin neresine çarptığı, nereye gideceğini belirler: üst kenara yakınsa yukarı, alt kenara yakınsa aşağı, ortadaysa düz gider. İki raketin sekme kodunu da tek bir bounceOff fonksiyonunda topluyoruz.

```js
function bounceOff(paddle) {
  // -1 at the paddle's top edge, 0 in the middle, 1 at the bottom edge
  const offset = (ball.y + BALL / 2 - (paddle.y + PADDLE_H / 2)) / (PADDLE_H / 2)
  const speed = Math.abs(ball.vx)
  ball.vy = offset * 5
  if (paddle === left) {
    ball.vx = speed
    ball.x = left.x + PADDLE_W
  } else {
    ball.vx = -speed
    ball.x = right.x - BALL
  }
}

  if (ball.vx < 0 && touches(left)) bounceOff(left)
  if (ball.vx > 0 && touches(right)) bounceOff(right)
```

Ne işe yarıyor

• ball.y + BALL / 2 → topun ortası; paddle.y + PADDLE_H / 2 → raketin ortası.
• İkisinin farkı / (PADDLE_H / 2) → raketin yarı boyuna bölünce sonuç -1 ile 1 arası olur: üst kenar -1, orta 0, alt kenar 1. Buna offset (kayma) diyoruz.
• ball.vy = offset * 5 → kenara ne kadar yakınsa o kadar dik açı: en fazla 5 yukarı ya da aşağı.
• Math.abs(ball.vx) → mutlak değer: işaretsiz hız (-4 → 4).
• Sol raket topu sağa (speed), sağ raket sola (-speed) yollar; top da raketin önüne alınır (içine gömülmesin).
• update'teki iki uzun blok artık tek satır: bounceOff(left) ve bounceOff(right).

Sıra sende

1. touches fonksiyonunun altına bir boş satır bırakıp bounceOff fonksiyonunu yaz.
2. update içindeki iki raket bloğunu (if (ball.vx < 0 && touches(left)) { ... } ve sağdakini) sil; yerine iki tek satırlık çağrıyı yaz.
3. Çalıştır ve topa raketin kenarıyla vur.

Beceriler: Hız ve yerçekimi, Fonksiyonlar

← Yeniden oyna Her vuruşta hızlan →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Siyah saha
3. Filenin bir parçası
4. Bütün file
5. İki raket
6. Çizen bir fonksiyon
7. Oyun döngüsü
8. Basılı tuşları hatırla
9. Raketleri oynat
10. Sahada kal
11. Top
12. Top hareket eder
13. Üstten ve alttan sek
14. Top rakete değiyor mu?
15. Raketler geri vurur
16. Yeniden servis
17. Skoru tut
18. Skoru göster
19. Beşe ilk ulaşan
20. Kim kazandı?
21. Yeniden oyna
22. Raketle nişan al
23. Her vuruşta hızlan
24. Bilgisayar rakip
25. Tek ya da iki oyuncu
26. Kendin yap: servis beklemesi