Atölye › Bomberman Tarzı Arena › 10/42. adım
Oyuncu nereye gitmek istiyor? Ok tuşlarını basılı tuttukça yürüyecek. İki tuş birden basılıysa en son basılan kazanır; oyuncular bunu bekler.
Basılı tuşları bir listede (held) tutacağız: basılan tuş listenin sonuna eklenir, bırakılan tuş listeden çıkar.
Son eleman yönetir. Onu bırakınca kontrol hâlâ basılı olan tuşa geçer.
Her ok tuşunun satıra ve sütuna ne eklediğini de bir yön tablosunda (DIRS) tutuyoruz. Bu adımda oyuncu henüz
yürümeyecek; önce tuşları doğru dinleyelim.
```js
const DIRS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] }
let held // arrow keys being held, the last one pressed at the end
held = []
document.addEventListener('keydown', (event) => {
if (DIRS[event.key]) {
event.preventDefault()
if (!held.includes(event.key)) held.push(event.key)
}
})
document.addEventListener('keyup', (event) => {
held = held.filter((k) => k !== event.key)
})
```const DIRS = { ArrowUp: [-1, 0], ... } → yön tablosu: her tuşa [satır farkı, sütun farkı]. Yukarı bir satır
az (-1), sağ bir sütun fazla.let held → basılı ok tuşları; reset onu boş liste yapar.document.addEventListener('keydown', (event) => { ... }) → bir tuşa basılınca çalışır; event.key tuşun adı
('ArrowRight' gibi).if (DIRS[event.key]) → köşeli parantez, adı bir değişkende duran alanı okur. Tuş tabloda yoksa undefined gelir
ve if yanlış sayar: ok tuşu değilse hiçbir şey yapma.event.preventDefault() → tarayıcının ok tuşuyla sayfayı kaydırmasını engeller.if (!held.includes(event.key)) held.push(event.key) → includes "listede var mı?", ! "değil". Basılı tutulan
tuş keydown'ı tekrar tekrar gönderir; listeye bir kez girsin.keyup → tuş bırakılınca: held.filter((k) => k !== event.key) bırakılan tuş dışındakileri tutar.const ENEMY_STARTS = ... satırının üstüne DIRS satırını yaz.let player satırının altına let held yaz.reset içinde player = ... satırının altına held = [] yaz.function drawCircle( satırının üstüne iki dinleyiciyi yaz.Beceriler: Klavye ve fare girdisi