JavaScript ile Aynı Anda Birden Fazla Tuşa Basıldığını Tespit Etme

Web geliştirme dünyasında, kullanıcı deneyimini iyileştirmek için klavye kısayolları kullanmak oldukça yaygındır. "Ctrl + C" ile kopyalama yapmak veya oyunlarda karakteri hareket ettirirken aynı anda zıplatmak gibi işlemler, aslında birden fazla tuşun aynı anda basılmasını algılamamıza dayanır.

Peki, JavaScript kullanarak kendi web projelerimizde bu özelliği nasıl hayata geçirebiliriz? Gelin, adım adım inceleyelim.

Mantığı Anlamak

Bu işin sırrı, JavaScript’teki keydown (tuşa basıldığında) ve keyup (tuş bırakıldığında) olaylarını doğru yönetmekten geçiyor.

Temel mantığımız şu şekilde olacak:

Bir Durum Nesnesi Oluşturun: Hangi tuşların basılı olduğunu tutan bir nesne (object) tanımlayacağız. Başlangıçta tüm tuşları false olarak atayacağız.
Keydown (Tuşa Basılma): Kullanıcı bir tuşa bastığında, nesnedeki ilgili tuşu true yapacağız.
Kontrol: İki (veya daha fazla) tuşun aynı anda true olup olmadığını kontrol edip, işlemimizi başlatacağız.
Keyup (Tuş Bırakılma): Kullanıcı parmağını tuştan çektiği anda, ilgili tuşu tekrar false konumuna getireceğiz. Bu adım, sistemin hata yapmaması için oldukça kritiktir.

Uygulama (Kodlama Bölümü)

Örneğin, "A" ve "S" tuşlarına aynı anda basıldığında konsola bir mesaj yazdıran basit bir fonksiyon hazırlayalım:

// Hangi tuşların basılı olduğunu takip eden nesne
let keys = {
a: false,
s: false,
};

// Tuşa basıldığında çalışacak olay dinleyici
addEventListener("keydown", (event) => {
if (event.key === "a") {
keys.a = true;
}
if (event.key === "s") {
keys.s = true;
}

// Her iki tuş da basılı mı?
if (keys.a && keys.s) {
console.log("Harika! Hem A hem de S tuşuna aynı anda basıldı.");
}
});

// Tuş bırakıldığında durumu sıfırlayan olay dinleyici
addEventListener("keyup", (event) => {
if (event.key === "a") {
keys.a = false;
}
if (event.key === "s") {
keys.s = false;
}
});

Neden Bu Yöntem?

Yukarıdaki kodda keyup olayını kullanmamızın sebebi, tuşları serbest bıraktığımızda durumu sıfırlamaktır. Eğer bunu yapmazsak, tuşlara bir kez bastıktan sonra nesne içindeki değerler true olarak kalır ve uygulama sürekli "basılı" olduğunu sanarak hatalı sonuçlar döndürür.

Bu temel yapıyı öğrendikten sonra, sadece iki değil, üç veya daha fazla tuş kombinasyonunu (örneğin oyunlar için W + A + Shift) kontrol edecek şekilde kodunuzu kolayca genişletebilirsiniz.

Artık kendi web uygulamalarınızda kullanıcılarınıza özel klavye kısayolları tanımlamaya hazırsınız!