Atölye › Frogger Tarzı Karşıya Geçiş › 4/22. adım

Zıpla

Ne yapıyoruz

Her ok tuşu kurbağayı bir kare zıplatsın; tahtanın dışına asla. Tuşu basılı tutmak durmadan zıplatmasın: bir basış, bir zıplama. Salon oyunundaki gibi, her adım bir karar.

```js
function hop(dx, dy) {
  frog.x = Math.min(COLS - 1, Math.max(0, frog.x + dx))
  frog.y = Math.min(START_ROW, Math.max(0, frog.y + dy))
}

const DIRECTIONS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }
document.addEventListener('keydown', (event) => {
  const direction = DIRECTIONS[event.key]
  if (direction) {
    event.preventDefault()
    // One hop per press: holding the key down does not hop again.
    if (!event.repeat) hop(...direction)
  }
})
```

Ne işe yarıyor

Math.max(0, frog.x + dx) → 0'ın altına inmesin; Math.min(COLS - 1, ...) → 11'i geçmesin. İkisi birlikte sayıyı bir aralıkta tutar.
DIRECTIONS → her okun [dx, dy] çifti; başka tuşlarda undefined.
hop(...direction) → ... (yayma) çiftin iki sayısını iki ayrı argüman yapar: hop(0, -1) gibi.
event.preventDefault() → okların sayfayı kaydırmasını engeller.
!event.repeat → basılı tutulan tuşun otomatik tekrarlarını yok say.

Sıra sende

frog satırının altına hop fonksiyonunu, DIRECTIONS tablosunu ve keydown dinleyicisini yaz. Çalıştır, oyuna tıkla ve oklarla zıpla.

Beceriler: Klavye ve fare girdisi

← Çizmeye devam Kaydırarak zıpla →

Tüm adımlar