JavaScript
Hareket ve etkileşim
keydown olayı ile oyuncuyu hareket ettirip oyun döngüsünde pozisyon güncellersin.
Klavye girdisi
Oyuncuyu klavyeyle hareket ettirmek için keydown ve keyup olaylarını dinleriz. Bir tuşa basılınca keys[event.key] = true, bırakılınca keys[event.key] = false yazarız. event.key basılan tuşun adını verir; ok tuşları için ArrowLeft, ArrowRight, ArrowUp ve ArrowDown değerlerini alırız.
Olayları window.addEventListener ile bağlarız. Tuş durumlarını bir keys nesnesinde tutmak, birden çok tuşa aynı anda basmayı da destekler.
Konum güncelleme
Çizim döngüsünde her karede bir update işlevi çağırırız. Bu işlev keys nesnesine bakar ve ok tuşlarına göre player.x ile player.y değerlerini değiştirir. Örneğin sol ok basılıysa player.x -= 4 ile oyuncuyu sola kaydırırız.
Hız değeri (4 piksel/kare) ne kadar büyükse oyuncu o kadar hızlı hareket eder. update işlevini draw içinde, çizimden sonra çağırırız.
Uygulama Oyuncuyu ok tuşlarıyla hareket ettir
keys adında boş bir nesne tanımla. window.addEventListener("keydown", ...) ile tuşa basıldığında keys[event.key] = true, window.addEventListener("keyup", ...) ile bırakıldığında keys[event.key] = false yaz. Sonra bir update işlevi ekle: ArrowLeft basılıysa player.x -= 4, ArrowRight basılıysa player.x += 4, ArrowUp basılıysa player.y -= 4, ArrowDown basılıysa player.y += 4. Son olarak draw işlevinin sonuna update() çağrısı ekle.
Örnek çözümü göster
const keys = {};
window.addEventListener("keydown", (event) => {
keys[event.key] = true;
});
window.addEventListener("keyup", (event) => {
keys[event.key] = false;
});
function update() {
if (keys["ArrowLeft"]) player.x -= 4;
if (keys["ArrowRight"]) player.x += 4;
if (keys["ArrowUp"]) player.y -= 4;
if (keys["ArrowDown"]) player.y += 4;
}
// draw işlevinin sonuna update(); ekle
Kendini test et
-
Klavye tuşuna basıldığını yakalamak için hangi olay kullanılır?
Cevabı göster
keydown — Doğru! keydown bir tuşa basıldığı an tetiklenir.
-
keydown olayını dinle
window.addEventListener(____, (event) => { keys[event.key] = true; });
Cevabı göster
window.addEventListener("keydown", (event) => { keys[event.key] = true; });
-
Olay kavramlarını eşleştir
- keydown
- Tuşa basıldı
- keyup
- Tuş bırakıldı
- addEventListener
- Olayı dinle
- event.key
- Basılan tuş
Sıradaki ders: Çarpışma algılama
