Added event listeners for specific keyboard buttons and implemented t…

…he functionality to play music
kunjgit · May 11, 2024 · 7b84f08 · 7b84f08
1 parent 0f3b4eb
commit 7b84f08
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 25 deletions.
diff --git a/Games/Piano/Piano.md b/Games/Piano/Piano.md
@@ -16,6 +16,7 @@
 ## **How to play? 🕹️**
 <!-- add the steps how to play games -->
 - Can play the piano by clicking on the onscreen keys 
+- Can play the piano by Pressing Keys on Keyboard 
 
 <br>
 

diff --git a/Games/Piano/index.html b/Games/Piano/index.html
@@ -17,33 +17,33 @@
         padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
         <div id="piano">
             <div class="blacks">
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
-                <div class="key black"></div>
+                <div class="key black">Q</div>
+                <div class="key black">W</div>
+                <div class="key black">E</div>
+                <div class="key black">R</div>
+                <div class="key black">T</div>
+                <div class="key black">Y</div>
+                <div class="key black">U</div>
+                <div class="key black">I</div>
+                <div class="key black">O</div>
+                <div class="key black">P</div>
             </div>
 
             <div class="whites">
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
-                <div class="key white"></div>
+                <div class="key white">A</div>
+                <div class="key white">S</div>
+                <div class="key white">D</div>
+                <div class="key white">F</div>
+                <div class="key white">G</div>
+                <div class="key white">H</div>
+                <div class="key white">J</div>
+                <div class="key white">K</div>
+                <div class="key white">L</div>
+                <div class="key white">X</div>
+                <div class="key white">C</div>
+                <div class="key white">V</div>
+                <div class="key white">B</div>
+                <div class="key white">N</div>
             </div>
         </div>
     </div>

diff --git a/Games/Piano/script.js b/Games/Piano/script.js
@@ -9,4 +9,109 @@ pianoKeys.forEach((pianoKey, i) => {
     const newUrl = '24-piano-keys/key' + number + '.mp3'
 
     pianoKey.addEventListener('click', () => playsound(newUrl))
-})
+})
+
+// Keypress event logic
+function handleKeyPress(evt){
+    switch(evt.key){
+        case "q":
+            new Audio("24-piano-keys/key01.mp3").play();
+            break;
+
+        case "w":
+            new Audio("24-piano-keys/key02.mp3").play();
+            break;
+
+        case "e":
+            new Audio("24-piano-keys/key03.mp3").play();
+            break;
+
+        case "r":
+            new Audio("24-piano-keys/key04.mp3").play();
+            break;
+
+        case "t":
+            new Audio("24-piano-keys/key05.mp3").play();
+            break;
+
+        case "y":
+            new Audio("24-piano-keys/key06.mp3").play();
+            break;
+
+        case "u":
+            new Audio("24-piano-keys/key07.mp3").play();
+            break;
+
+        case "i":
+            new Audio("24-piano-keys/key08.mp3").play();
+            break;
+
+        case "o":
+            new Audio("24-piano-keys/key09.mp3").play();
+            break;
+
+        case "p":
+            new Audio("24-piano-keys/key10.mp3").play();
+            break;
+
+        case "a":
+            new Audio("24-piano-keys/key11.mp3").play();
+            break;
+
+        case "s":
+            new Audio("24-piano-keys/key12.mp3").play();
+            break;
+
+        case "d":
+            new Audio("24-piano-keys/key13.mp3").play();
+            break;
+
+        case "f":
+            new Audio("24-piano-keys/key14.mp3").play();
+            break;
+
+        case "g":
+            new Audio("24-piano-keys/key15.mp3").play();
+            break;
+
+        case "h":
+            new Audio("24-piano-keys/key16.mp3").play();
+            break;
+
+        case "j":
+            new Audio("24-piano-keys/key17.mp3").play();
+            break;
+
+        case "k":
+            new Audio("24-piano-keys/key18.mp3").play();
+            break;
+
+        case "l":
+            new Audio("24-piano-keys/key19.mp3").play();
+            break;
+
+        case "x":
+            new Audio("24-piano-keys/key20.mp3").play();
+            break;
+
+        case "c":
+            new Audio("24-piano-keys/key21.mp3").play();
+            break;
+
+        case "v":
+            new Audio("24-piano-keys/key22.mp3").play();
+            break;
+
+        case "b":
+            new Audio("24-piano-keys/key23.mp3").play();
+            break;
+
+        case "n":
+            new Audio("24-piano-keys/key24.mp3").play();
+            break;
+
+        default:
+    }
+}
+
+document.addEventListener('keypress', handleKeyPress)
diff --git a/Games/Piano/style.css b/Games/Piano/style.css
@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: helvetica;
 }
 
 body {
@@ -28,6 +29,10 @@ body {
 }
 
 .white {
+    display:flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 10px;
     width: 68px;
     height: 280px;
     border-radius: 0 0 5px 5px;
@@ -41,11 +46,16 @@ body {
 }
 
 .black {
+    display:flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 10px;
     width: 38px;
     height: 160px;
     border-radius: 0 0 5px 5px;
     position: absolute;
     background-color: #000;
+    color: white;
 }
 
 .black:nth-child(1) {