🎹 Piano Oyunu, kullanıcıların bilgisayar klavyesini kullanarak sanal bir piyano çalmasına olanak tanıyan eğlenceli ve interaktif bir web uygulamasıdır. Bu proje, temel web geliştirme becerilerinizi geliştirmek ve müzik yapmayı keşfetmek için harika bir araçtır.
- Klavye tuşlarını kullanarak piyano notalarını çalma.
- Görsel olarak etkileyici bir arayüz.
- "Do", "Re", "Mi", "Fa", "Sol", "La", "Si" notalarını destekler.
- Duyulabilir ses efektleri ve tuş basma animasyonları.
- Klavye ile etkileşim ve dinamik tıklama olayları.
- HTML: Yapısal iskeleti oluşturmak için.
- CSS: Göz alıcı bir tasarım ve animasyonlar için.
- JavaScript: Etkileşimli ve dinamik davranışlar için.
Projede kullanılan JavaScript özellikleri şunlardır:
-
Event Listener Kullanımı:
- Kullanıcı etkileşimlerini yakalamak için
addEventListener
metodu kullanılmıştır. click
,keydown
, vekeyup
olayları dinlenmiştir.
- Kullanıcı etkileşimlerini yakalamak için
-
Ses Oynatma:
Audio
nesnesi kullanılarak her nota için ayrı ses dosyaları oynatılmıştır.playbackRate
ayarı ile ses hızlandırılmıştır.
-
Dinamik Sınıf Ekleyip Çıkarma:
- Basılan tuşlara görsel efekt eklemek için
classList.add
veclassList.remove
metodları kullanılmıştır.
- Basılan tuşlara görsel efekt eklemek için
-
DOM Seçiciler:
document.querySelectorAll
vedocument.getElementById
metodları ile HTML öğeleri seçilmiştir.
-
SetTimeout ile Zamanlama:
- Tuş basma efektini belirli bir süre sonra kaldırmak için
setTimeout
kullanılmıştır.
- Tuş basma efektini belirli bir süre sonra kaldırmak için
-
Veri Yapıları:
- Nota isimleri ile klavye tuşlarını eşleştirmek için bir nesne (
object
) kullanılmıştır.
- Nota isimleri ile klavye tuşlarını eşleştirmek için bir nesne (
PianoGame/
├── index.html # Ana HTML dosyası
├── styles.css # Stil dosyası
├── index.js # Ana JavaScript dosyası
├── sounds/ # Notalara ait ses dosyaları
-
Bu projeyi bilgisayarınıza kopyalayın:
git clone https://github.com/engincanaraz/piano-game.git
-
Proje klasörüne gidin:
cd piano-game
-
index.html
dosyasını tarayıcınızda açarak oyunu çalıştırın.
- Uygulamayı açın.
- Klavyenizdeki
Q
,W
,E
,R
,T
,Y
,U
tuşlarına basarak notaları çalın. - Tıklama ve klavye basışıyla eş zamanlı olarak hem ses hem de görsel bir geri bildirim alın.
- Bu projeyi fork'layın.
- Kendi özelliğinizi geliştirin.
- Pull request göndererek katkıda bulunun.