Merge pull request #4880 from somilyadav7/main

Added Virtual Piano Game
kunjgit · Jul 18, 2024 · 236f53a · 236f53a
2 parents 1ac6bbd + 4842ce1
commit 236f53a
Show file tree

Hide file tree

Showing 26 changed files with 261 additions and 1 deletion.
diff --git a/Games/Virtual_Piano/README.MD b/Games/Virtual_Piano/README.MD
@@ -0,0 +1,35 @@
+# **Virtual Piano** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+An interactive virtual piano game built with HTML, CSS, and JavaScript. The objective of the game is to play musical notes by pressing the keys on the virtual piano, which correspond to real piano keys.
+</p>
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+- Play Musical Notes: Press the keys on the virtual piano to play corresponding musical notes.
+- Keyboard Support: Use the keyboard to play notes for a more intuitive experience.
+- Sound Effects: Realistic piano sound effects for each key.
+
+<br>
+
+## **How to play? 🕹️**
+- Open the index.html file
+- Start typing the keys to play the sound
+- You can adjust the volume and allow visible of keys
+
+<br>
+
+## **Screenshots 📸**
+
+### Home
+
+![Home](virtual-piano.png)
+
+### Game
+
+![Game](virtual-piano-game.png)
diff --git a/Games/Virtual_Piano/index.html b/Games/Virtual_Piano/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Piano Simulator</title>
+
+  <!-- styles -->
+  <link rel="stylesheet" href="./src/styles/reset.css">
+  <link rel="stylesheet" href="./src/styles/main.css">
+
+  <!-- fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;0,700;1,100;1,200;1,300;1,400&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <div class="container">
+    <header>
+      <h2>Virtual Piano</h2>
+      <div class="column volume-slider">
+        <span>Volume</span> <input type="range" min="0" max="1" value="0.5" step="any">
+      </div>
+      <div class="column keys-check">
+        <span>Keys</span> <input type="checkbox" checked>
+      </div>
+    </header>
+    <ul class="piano-keys">
+      <li class="key white" data-key="a"><span>a</span></li>
+      <li class="key black" data-key="w"><span>w</span></li>
+      <li class="key white" data-key="s"><span>s</span></li>
+      <li class="key black" data-key="e"><span>e</span></li>
+      <li class="key white" data-key="d"><span>d</span></li>
+      <li class="key black" data-key="f"><span>f</span></li>
+      <li class="key white" data-key="t"><span>t</span></li>
+      <li class="key black" data-key="g"><span>g</span></li>
+      <li class="key white" data-key="y"><span>y</span></li>
+      <li class="key black" data-key="h"><span>h</span></li>
+      <li class="key white" data-key="u"><span>u</span></li>
+      <li class="key black" data-key="j"><span>j</span></li>
+      <li class="key white" data-key="k"><span>k</span></li>
+      <li class="key black" data-key="o"><span>o</span></li>
+      <li class="key white" data-key="l"><span>l</span></li>
+      <li class="key black" data-key="p"><span>p</span></li>
+      <li class="key white" data-key=";"><span>;</span></li>
+    </ul>
+  </div>
+
+  <script src="./src/scripts/engine.js" defer></script>
+</body>
+
+</html>
diff --git a/Games/Virtual_Piano/src/scripts/engine.js b/Games/Virtual_Piano/src/scripts/engine.js
@@ -0,0 +1,40 @@
+const pianoKeys = document.querySelectorAll(".piano-keys .key");
+const volumeSlider = document.querySelector(".volume-slider input");
+const keysCheck = document.querySelector(".keys-check input");
+
+let mapedKeys = [];
+let audio = new Audio("src/tunes/a.wav");
+
+const playTune = (key) => {
+  audio.src = `src/tunes/${key}.wav`;
+  audio.play();
+
+  const clickedKey = document.querySelector(`[data-key="${key}"]`);
+  clickedKey.classList.add("active");
+  setTimeout(() => {
+    clickedKey.classList.remove("active");
+  }, 150);
+};
+
+pianoKeys.forEach((key) => {
+  key.addEventListener("click", () => playTune(key.dataset.key));
+  mapedKeys.push(key.dataset.key);
+});
+
+document.addEventListener("keydown", (e) => {
+  if (mapedKeys.includes(e.key)) {
+    playTune(e.key);
+  }
+});
+
+const handleVolume = (e) => {
+  audio.volume = e.target.value;
+};
+
+const showHideKeys = () => {
+  pianoKeys.forEach((key) => key.classList.toggle("hide"));
+};
+
+volumeSlider.addEventListener("input", handleVolume);
+
+keysCheck.addEventListener("click", showHideKeys);
diff --git a/Games/Virtual_Piano/src/styles/main.css b/Games/Virtual_Piano/src/styles/main.css
@@ -0,0 +1,122 @@
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: #e3f2fd;
+  color: #fff;
+}
+
+.container {
+  width: 780px;
+  border-radius: 20px;
+  padding: 35px 40px;
+  background-color: black;
+}
+
+.container header {
+  color: #b2b2b2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+header h2 {
+  font-size: 1.6rem;
+}
+
+header .column {
+  display: flex;
+  align-items: center;
+}
+
+header .column span {
+  font-weight: 500;
+  margin-right: 15px;
+  font-size: 1.19rem;
+}
+
+.volume-slider input {
+  accent-color: #fff;
+}
+
+.keys-check input {
+  width: 60px;
+  height: 30px;
+  appearance: none;
+  border-radius: 30px;
+  background-color: #4b4b4b;
+  cursor: pointer;
+  position: relative;
+}
+
+.keys-check input::before {
+  content: "";
+  height: 20px;
+  width: 20px;
+  background-color: #8c8c8c;
+  top: 50%;
+  left: 0.3rem;
+  border-radius: inherit;
+  position: absolute;
+  transform: translateY(-50%);
+  transition: all 0.3s ease;
+}
+
+.keys-check input:checked::before {
+  left: 2.1rem;
+  background-color: #fff;
+}
+
+.piano-keys {
+  display: flex;
+  margin-top: 40px;
+}
+.piano-keys .key {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  color: #a2a2a2;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.piano-keys .white {
+  width: 70px;
+  height: 230px;
+  border: 1px solid black;
+  border-radius: 8px;
+  background: linear-gradient(#fff 96%, #eee 4%);
+}
+
+.piano-keys .black {
+  width: 44px;
+  height: 140px;
+  z-index: 2;
+  margin: 0 -22px 0 -22px;
+  border: 1px solid black;
+  border-radius: 0 0 5px 5px;
+  background: linear-gradient(#333, #000);
+}
+
+.piano-keys span {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+  font-size: 1.13rem;
+}
+
+.piano-keys .white.active {
+  box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(to bottom #fff 0%, #eee 100%);
+}
+
+.piano-keys .black.active {
+  box-shadow: inset -5px 5px 10px rgba(255, 255, 255, 0.1);
+  background: linear-gradient(to bottom #000, #434343);
+}
+
+.piano-keys .key.hide span {
+  display: none;
+}
diff --git a/Games/Virtual_Piano/src/styles/reset.css b/Games/Virtual_Piano/src/styles/reset.css
@@ -0,0 +1,7 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  outline: none;
+  font-family: "Poppins", sans-serif;
+}
diff --git a/Games/Virtual_Piano/src/tunes/;.wav b/Games/Virtual_Piano/src/tunes/;.wav
diff --git a/Games/Virtual_Piano/src/tunes/a.wav b/Games/Virtual_Piano/src/tunes/a.wav
diff --git a/Games/Virtual_Piano/src/tunes/d.wav b/Games/Virtual_Piano/src/tunes/d.wav
diff --git a/Games/Virtual_Piano/src/tunes/e.wav b/Games/Virtual_Piano/src/tunes/e.wav
diff --git a/Games/Virtual_Piano/src/tunes/f.wav b/Games/Virtual_Piano/src/tunes/f.wav
diff --git a/Games/Virtual_Piano/src/tunes/g.wav b/Games/Virtual_Piano/src/tunes/g.wav
diff --git a/Games/Virtual_Piano/src/tunes/h.wav b/Games/Virtual_Piano/src/tunes/h.wav
diff --git a/Games/Virtual_Piano/src/tunes/j.wav b/Games/Virtual_Piano/src/tunes/j.wav
diff --git a/Games/Virtual_Piano/src/tunes/k.wav b/Games/Virtual_Piano/src/tunes/k.wav
diff --git a/Games/Virtual_Piano/src/tunes/l.wav b/Games/Virtual_Piano/src/tunes/l.wav
diff --git a/Games/Virtual_Piano/src/tunes/o.wav b/Games/Virtual_Piano/src/tunes/o.wav
diff --git a/Games/Virtual_Piano/src/tunes/p.wav b/Games/Virtual_Piano/src/tunes/p.wav
diff --git a/Games/Virtual_Piano/src/tunes/s.wav b/Games/Virtual_Piano/src/tunes/s.wav
diff --git a/Games/Virtual_Piano/src/tunes/t.wav b/Games/Virtual_Piano/src/tunes/t.wav
diff --git a/Games/Virtual_Piano/src/tunes/u.wav b/Games/Virtual_Piano/src/tunes/u.wav
diff --git a/Games/Virtual_Piano/src/tunes/w.wav b/Games/Virtual_Piano/src/tunes/w.wav
diff --git a/Games/Virtual_Piano/src/tunes/y.wav b/Games/Virtual_Piano/src/tunes/y.wav
diff --git a/Games/Virtual_Piano/virtual-piano-game.png b/Games/Virtual_Piano/virtual-piano-game.png
diff --git a/Games/Virtual_Piano/virtual-piano.png b/Games/Virtual_Piano/virtual-piano.png
diff --git a/README.md b/README.md
@@ -178,7 +178,7 @@ This repository also provides one such platforms where contributers come over an
 | [Save Princess](https://github.com/kunjgit/GameZone/tree/main/Games/Save_Princess)                               | [RoadFighter](https://github.com/kunjgit/GameZone/tree/main/Games/RoadFighter)                          | [Guitar Game](https://github.com/kunjgit/GameZone/tree/main/Games/Guitar_Game)                               | [Solitaire](https://github.com/kunjgit/GameZone/tree/main/Games/Solitaire)                                         | [Lady Tiger Hunter](https://github.com/kunjgit/GameZone/tree/main/Games/Lady_Tiger_Hunter)                  |
 | [Stone Paper Scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Stone_paper_scissor)                   | [Flashlight_Pointer_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Flashlight_Pointer_Game)  | [Pig game](https://github.com/KanchanBora/GameZone/tree/main/Games/Pig_game)                                 | [Asteroids 3D](https://github.com/kunjgit/GameZone/tree/main/Games/Asteroids_3D)                                   | [Lamb Lane](https://github.com/sahaycodes/GameZone/tree/meme/Games/Lamb_Lane)                               |
 | [Dinoffline](https://github.com/kunjgit/GameZone/tree/main/Games/Dinoffline)                                     | [Maths Sprint Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maths_Sprint_Game)              | [Etch a Sketch](https://github.com/kunjgit/GameZone/tree/main/Games/Etch_a_Sketch)                           | [QuizzApp](https://github.com/kunjgit/GameZone/tree/main/Games/QuizzApp)                                           | [Chess Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chess_Game)                                |
-
+| [Virtual Piano](https://github.com/kunjgit/GameZone/tree/main/Games/Virtual_Piano)|
 | [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)|
 | [Which Color](https://github.com/sahaycodes/GameZone/tree/main/Games/Which_Color)                                | [Snail_Game](https://github.com/sahaycodes/GameZone/tree/meme/Games/Snail_Game)                         | [Solitaire](https://github.com/kunjgit/GameZone/tree/main/Games/Solitaire_up)                                | [Slime Attack](https://github.com/apu52/GameZone/tree/Slime-Attack-game/Games/Slime_attack_game)                   | [Star_Trek_Trivia](https://github.com/kunjgit/GameZone/tree/starTrek-trivia/Games/Star_Trek_Trivia)         |
 | [Pokemon_Card_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pokemon_Card_Game)                       | [Digit Dilemma](https://github.com/kunjgit/GameZone/tree/main/Games/Digit_Dilemma)                      | [Tennis](https://github.com/kunjgit/GameZone/tree/main/Games/Tennis)                                         | [Illusion](https://github.com/kunjgit/GameZone/tree/main/Games/Illusion)                                           | [Block Buster](https://github.com/sahaycodes/GameZone/tree/meme/Games/Block_Buster)                         |

diff --git a/assets/images/virtual-piano.png b/assets/images/virtual-piano.png