Atölye › Space Invaders Tarzı › 3/21. adım

Gemiyi oynat

Ne yapıyoruz

Bir ok tuşu basılı tutuldukça gemi o yöne her karede 4 piksel kaysın. Hangi tuşların basılı olduğunu bir keys nesnesi hatırlıyor: basılınca true, bırakılınca false.

```js
const SHIP_SPEED = 4

const keys = {}

document.addEventListener('keydown', (event) => {
  keys[event.key] = true
})
document.addEventListener('keyup', (event) => {
  keys[event.key] = false
})

function update() {
  if (keys.ArrowLeft) ship.x -= SHIP_SPEED
  if (keys.ArrowRight) ship.x += SHIP_SPEED
}

  update()
```

Ne işe yarıyor

keys[event.key] = true → basılan tuşun adıyla bir alan: keys.ArrowLeft = true. Bırakınca false.
update() → her karede: sol ok basılıysa sola, sağ ok basılıysa sağa 4 piksel.
Döngüde update() çizimden önce.

Sıra sende

SHIP_H satırının altına SHIP_SPEED yaz.
ship satırının altına keys nesnesini, iki tuş dinleyicisini ve update fonksiyonunu yaz.
loop içinde draw()'ın üstüne update() yaz.
Çalıştır, oyuna tıkla ve oklarla gemiyi oynat.

Beceriler: Klavye ve fare girdisi

← Oyun döngüsü Ekranda kal →

Tüm adımlar