Skip to content

Kullanıcıların klavye kullanarak sanal bir piyano çalmasına olanak tanıyan bir web uygulamasıdır

Notifications You must be signed in to change notification settings

engincanaraz/piano-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Piano Oyunu

Piano Oyunu Arayüzü

🎹 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.

🚀 Özellikler

  • 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ı.

🛠️ Kullanılan Teknolojiler

  • 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.

JavaScript Özellikleri

Projede kullanılan JavaScript özellikleri şunlardır:

  1. Event Listener Kullanımı:

    • Kullanıcı etkileşimlerini yakalamak için addEventListener metodu kullanılmıştır.
    • click, keydown, ve keyup olayları dinlenmiştir.
  2. 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.
  3. Dinamik Sınıf Ekleyip Çıkarma:

    • Basılan tuşlara görsel efekt eklemek için classList.add ve classList.remove metodları kullanılmıştır.
  4. DOM Seçiciler:

    • document.querySelectorAll ve document.getElementById metodları ile HTML öğeleri seçilmiştir.
  5. SetTimeout ile Zamanlama:

    • Tuş basma efektini belirli bir süre sonra kaldırmak için setTimeout kullanılmıştır.
  6. Veri Yapıları:

    • Nota isimleri ile klavye tuşlarını eşleştirmek için bir nesne (object) kullanılmıştır.

📁 Proje Dosya Yapısı

PianoGame/
├── index.html       # Ana HTML dosyası
├── styles.css       # Stil dosyası
├── index.js         # Ana JavaScript dosyası
├── sounds/          # Notalara ait ses dosyaları

🔧 Kurulum

  1. Bu projeyi bilgisayarınıza kopyalayın:

    git clone https://github.com/engincanaraz/piano-game.git
  2. Proje klasörüne gidin:

    cd piano-game
  3. index.html dosyasını tarayıcınızda açarak oyunu çalıştırın.

🎯 Nasıl Oynanır?

  1. Uygulamayı açın.
  2. Klavyenizdeki Q, W, E, R, T, Y, U tuşlarına basarak notaları çalın.
  3. Tıklama ve klavye basışıyla eş zamanlı olarak hem ses hem de görsel bir geri bildirim alın.

🤝 Katkı Sağlama

  1. Bu projeyi fork'layın.
  2. Kendi özelliğinizi geliştirin.
  3. Pull request göndererek katkıda bulunun.

About

Kullanıcıların klavye kullanarak sanal bir piyano çalmasına olanak tanıyan bir web uygulamasıdır

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published