From 7b84f081fe61f465ad3e3d1a44714b53f0edb175 Mon Sep 17 00:00:00 2001
From: shubhanshu kaintura
<78632385+shubhanshukaintura@users.noreply.github.com>
Date: Sat, 11 May 2024 13:54:57 +0530
Subject: [PATCH] Added event listeners for specific keyboard buttons and
implemented the functionality to play music
---
Games/Piano/Piano.md | 1 +
Games/Piano/index.html | 48 +++++++++---------
Games/Piano/script.js | 107 ++++++++++++++++++++++++++++++++++++++++-
Games/Piano/style.css | 10 ++++
4 files changed, 141 insertions(+), 25 deletions(-)
diff --git a/Games/Piano/Piano.md b/Games/Piano/Piano.md
index 7cd67988b0..d74c9e8fd8 100644
--- a/Games/Piano/Piano.md
+++ b/Games/Piano/Piano.md
@@ -16,6 +16,7 @@
## **How to play? 🕹️**
- Can play the piano by clicking on the onscreen keys
+- Can play the piano by Pressing Keys on Keyboard
diff --git a/Games/Piano/index.html b/Games/Piano/index.html
index c4d4d67d62..21fd7ddac4 100644
--- a/Games/Piano/index.html
+++ b/Games/Piano/index.html
@@ -17,33 +17,33 @@
padding: 5px; ">
-
-
-
-
-
-
-
-
-
-
+
Q
+
W
+
E
+
R
+
T
+
Y
+
U
+
I
+
O
+
P
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
A
+
S
+
D
+
F
+
G
+
H
+
J
+
K
+
L
+
X
+
C
+
V
+
B
+
N
diff --git a/Games/Piano/script.js b/Games/Piano/script.js
index 7f1d0968ec..ab7cb9c86d 100644
--- 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))
-})
\ No newline at end of file
+})
+
+// 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)
\ No newline at end of file
diff --git a/Games/Piano/style.css b/Games/Piano/style.css
index 3c271c0d3f..b2f7480f8d 100644
--- 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) {