diff --git a/Games/Virtual_Piano/README.MD b/Games/Virtual_Piano/README.MD new file mode 100644 index 0000000000..fe7257c664 --- /dev/null +++ b/Games/Virtual_Piano/README.MD @@ -0,0 +1,35 @@ +# **Virtual Piano** + +--- + +
+ +## **Description 📃** + +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. +

+ +## **functionalities 🎮** + +- 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. + +
+ +## **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 + +
+ +## **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 new file mode 100644 index 0000000000..23703f09f8 --- /dev/null +++ b/Games/Virtual_Piano/index.html @@ -0,0 +1,56 @@ + + + + + + + Piano Simulator + + + + + + + + + + + + +
+
+

Virtual Piano

+
+ Volume +
+
+ Keys +
+
+ +
+ + + + + \ No newline at end of file diff --git a/Games/Virtual_Piano/src/scripts/engine.js b/Games/Virtual_Piano/src/scripts/engine.js new file mode 100644 index 0000000000..dc88e55198 --- /dev/null +++ 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 new file mode 100644 index 0000000000..351aa495b0 --- /dev/null +++ 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 new file mode 100644 index 0000000000..1fb0e2b58e --- /dev/null +++ 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 new file mode 100644 index 0000000000..a71fe4e48e Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/;.wav differ diff --git a/Games/Virtual_Piano/src/tunes/a.wav b/Games/Virtual_Piano/src/tunes/a.wav new file mode 100644 index 0000000000..fa6e07a38d Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/a.wav differ diff --git a/Games/Virtual_Piano/src/tunes/d.wav b/Games/Virtual_Piano/src/tunes/d.wav new file mode 100644 index 0000000000..7377899844 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/d.wav differ diff --git a/Games/Virtual_Piano/src/tunes/e.wav b/Games/Virtual_Piano/src/tunes/e.wav new file mode 100644 index 0000000000..1325049800 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/e.wav differ diff --git a/Games/Virtual_Piano/src/tunes/f.wav b/Games/Virtual_Piano/src/tunes/f.wav new file mode 100644 index 0000000000..31aa67be88 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/f.wav differ diff --git a/Games/Virtual_Piano/src/tunes/g.wav b/Games/Virtual_Piano/src/tunes/g.wav new file mode 100644 index 0000000000..bd0e58c44b Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/g.wav differ diff --git a/Games/Virtual_Piano/src/tunes/h.wav b/Games/Virtual_Piano/src/tunes/h.wav new file mode 100644 index 0000000000..921b7d5e3f Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/h.wav differ diff --git a/Games/Virtual_Piano/src/tunes/j.wav b/Games/Virtual_Piano/src/tunes/j.wav new file mode 100644 index 0000000000..747367fe86 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/j.wav differ diff --git a/Games/Virtual_Piano/src/tunes/k.wav b/Games/Virtual_Piano/src/tunes/k.wav new file mode 100644 index 0000000000..52598b1a6a Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/k.wav differ diff --git a/Games/Virtual_Piano/src/tunes/l.wav b/Games/Virtual_Piano/src/tunes/l.wav new file mode 100644 index 0000000000..95baa0b64e Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/l.wav differ diff --git a/Games/Virtual_Piano/src/tunes/o.wav b/Games/Virtual_Piano/src/tunes/o.wav new file mode 100644 index 0000000000..853e92da4b Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/o.wav differ diff --git a/Games/Virtual_Piano/src/tunes/p.wav b/Games/Virtual_Piano/src/tunes/p.wav new file mode 100644 index 0000000000..d97f784fb3 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/p.wav differ diff --git a/Games/Virtual_Piano/src/tunes/s.wav b/Games/Virtual_Piano/src/tunes/s.wav new file mode 100644 index 0000000000..4d53816b8c Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/s.wav differ diff --git a/Games/Virtual_Piano/src/tunes/t.wav b/Games/Virtual_Piano/src/tunes/t.wav new file mode 100644 index 0000000000..1e50ef5c81 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/t.wav differ diff --git a/Games/Virtual_Piano/src/tunes/u.wav b/Games/Virtual_Piano/src/tunes/u.wav new file mode 100644 index 0000000000..505f00e54a Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/u.wav differ diff --git a/Games/Virtual_Piano/src/tunes/w.wav b/Games/Virtual_Piano/src/tunes/w.wav new file mode 100644 index 0000000000..2a160b5594 Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/w.wav differ diff --git a/Games/Virtual_Piano/src/tunes/y.wav b/Games/Virtual_Piano/src/tunes/y.wav new file mode 100644 index 0000000000..e4caa7049b Binary files /dev/null and b/Games/Virtual_Piano/src/tunes/y.wav differ diff --git a/Games/Virtual_Piano/virtual-piano-game.png b/Games/Virtual_Piano/virtual-piano-game.png new file mode 100644 index 0000000000..bf495578af Binary files /dev/null and b/Games/Virtual_Piano/virtual-piano-game.png differ diff --git a/Games/Virtual_Piano/virtual-piano.png b/Games/Virtual_Piano/virtual-piano.png new file mode 100644 index 0000000000..17b14ee3a9 Binary files /dev/null and b/Games/Virtual_Piano/virtual-piano.png differ diff --git a/README.md b/README.md index 5be3c89116..f0fbbe477f 100644 --- 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 new file mode 100644 index 0000000000..17b14ee3a9 Binary files /dev/null and b/assets/images/virtual-piano.png differ