diff --git a/Games/keySymphony/index1.html b/Games/keySymphony/index1.html new file mode 100644 index 0000000000..8805824656 --- /dev/null +++ b/Games/keySymphony/index1.html @@ -0,0 +1,46 @@ + + + + + + KeySymphony + + + + +
+
+

+ KeySymphony +

+
+ Sound +
+ +
+ Show Keys +
+
+ +
+ + \ No newline at end of file diff --git a/Games/keySymphony/index1.js b/Games/keySymphony/index1.js new file mode 100644 index 0000000000..2247b0cc99 --- /dev/null +++ b/Games/keySymphony/index1.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", () => { + const pianoKeys = document.querySelectorAll(".Piano .key"), + volumeSlider = document.querySelector(".sound input"), + keyCheckbox = document.querySelector(".keys-checkbox input"); + + let allKeys = [], + audio = new Audio(); + + const playTune = (key) => { + audio.src = `tunes/${key}.wav`; + audio.play(); + + const clickedKey = document.querySelector(`[data-key="${key}"]`); + if (clickedKey) { + clickedKey.classList.add("active"); + setTimeout(() => { + clickedKey.classList.remove("active"); + }, 160); + } + }; + + const handleVolume = (e) => { + audio.volume = e.target.value / 100; + }; + + const showHideKeys = () => { + pianoKeys.forEach(key => key.classList.toggle("hide")); + }; + + pianoKeys.forEach(key => { + allKeys.push(key.dataset.key); + // Calling playTune function with passing data-key value as an argument + key.addEventListener("click", () => playTune(key.dataset.key)); + }); + + const pressedKey = (e) => { + if (allKeys.includes(e.key)) playTune(e.key); + }; + + keyCheckbox.addEventListener("click", showHideKeys); + volumeSlider.addEventListener("input", handleVolume); + document.addEventListener("keydown", pressedKey); +}); diff --git a/Games/keySymphony/style1.css b/Games/keySymphony/style1.css new file mode 100644 index 0000000000..158e467767 --- /dev/null +++ b/Games/keySymphony/style1.css @@ -0,0 +1,186 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:'Poppins',sans-serif; +} +body{ +display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background-color: rgb(207, 232, 255); +} +.wrapper{ + border-radius: 20px; + width:795px; + background-color: black; + padding: 32px 40px; + +} +.wrapper header{ + color: rgb(255, 255, 222); + display: flex; + align-items: center; + justify-content: center; + justify-content: space-between; +} +header h2{ + font-size:35px; +} +header .column{ + display: flex; + justify-content: center; + align-items: center; +} +header .column span{ + font-weight: 420; + font-size: 18px; + margin-right:15px; +} +.sound input{ + accent-color: #c3c018; +} +.keys-checkbox input{ + height:35px ; + width:65px; + cursor:pointer; + border-radius:30px ; + background: #118df3; + appearance: none; + outline:none; + position: relative; +} +.keys-checkbox input::before{ + content: ""; + border-radius: inherit; + position: absolute; + background-color: rgb(137, 239, 217); + width: 25px; + height: 25px; + top:50%; + left: 5px; + transform: translateY(-50%); + transition: all 0.2s ease; +} +.keys-checkbox input:checked::before{ + left:35px; + background-color: antiquewhite; +} +.Piano{ + display: flex; + margin-top: 40px; + /* padding: 20px 10px; */ + justify-content: center; + list-style: none; +} +.Piano .key{ + list-style:none; + /* color: rgb(143, 130, 112); */ + text-transform: uppercase; + cursor: pointer; + user-select: none; + position: relative; +} +.Piano .white{ + width:80px; + height:230px; + border: 1px solid black; + background: linear-gradient(#fff 96%,#eee 4%); + border-radius: 9px; + +} +.Piano .white:active{ + box-shadow:inset -5px 5px 20px rgba(0,0,0,0.2); + background-color: linear-gradient(to bottom, #fff 0%, #eee 100%); +} +.Piano .black{ + width:44px; + height:140px; + /* border: 1px solid black; */ + background: linear-gradient(#333 ,#000 ); + border-radius: 0 0 5px 5px; + z-index: 2; + margin: 0 -22px 0 -22px; +} +.Piano .black:active{ + box-shadow:inset -5px -10px 10px rgba(255,255,255,0.2); + background-color: linear-gradient(to bottom, #000 , #434343); +} +.Piano span{ + position: absolute; + bottom: 20px; + width: 100%; + font-size: 1.15rem; + text-align: center; +} +.Piano .key span { + position: absolute; + bottom: 20px; + width: 100%; + color: #A2A2A2; + font-size: 1.13rem; + text-align: center; + } + .Piano .key.hide span { + display: none; + } + .Piano .black span { + bottom: 13px; + color: #888888; + } +.Piano .key{ + list-style: none; + color: rgba(174, 174, 174, 0.856); +} +.Piano .key.hide span { + display: none; + } + .Piano .black span { + bottom: 13px; + color: #888888; + } + @media screen and (max-width: 815px) { + .wrapper { + padding: 25px; + } + header { + flex-direction: column; + } + header :where(h2, .column) { + margin-bottom: 13px; + } + .sound input { + max-width: 100px; + } + .Piano { + margin-top: 20px; + } + .Piano .key:where(:nth-child(9), :nth-child(10)) { + display: none; + } + .Piano .black { + height: 100px; + width: 40px; + margin: 0 -20px 0 -20px; + } + .Piano .white { + height: 180px; + width: 60px; + } + } + @media screen and (max-width: 615px) { + .Piano .key:nth-child(13), + .Piano .key:nth-child(14), + .Piano .key:nth-child(15), + .Piano .key:nth-child(16), + .Piano .key :nth-child(17) { + display: none; + } + .Piano .white { + width: 50px; + } + } \ No newline at end of file diff --git a/Games/keySymphony/tunes/;.wav b/Games/keySymphony/tunes/;.wav new file mode 100644 index 0000000000..a71fe4e48e Binary files /dev/null and b/Games/keySymphony/tunes/;.wav differ diff --git a/Games/keySymphony/tunes/a.wav b/Games/keySymphony/tunes/a.wav new file mode 100644 index 0000000000..fa6e07a38d Binary files /dev/null and b/Games/keySymphony/tunes/a.wav differ diff --git a/Games/keySymphony/tunes/d.wav b/Games/keySymphony/tunes/d.wav new file mode 100644 index 0000000000..7377899844 Binary files /dev/null and b/Games/keySymphony/tunes/d.wav differ diff --git a/Games/keySymphony/tunes/e.wav b/Games/keySymphony/tunes/e.wav new file mode 100644 index 0000000000..1325049800 Binary files /dev/null and b/Games/keySymphony/tunes/e.wav differ diff --git a/Games/keySymphony/tunes/f.wav b/Games/keySymphony/tunes/f.wav new file mode 100644 index 0000000000..31aa67be88 Binary files /dev/null and b/Games/keySymphony/tunes/f.wav differ diff --git a/Games/keySymphony/tunes/g.wav b/Games/keySymphony/tunes/g.wav new file mode 100644 index 0000000000..bd0e58c44b Binary files /dev/null and b/Games/keySymphony/tunes/g.wav differ diff --git a/Games/keySymphony/tunes/h.wav b/Games/keySymphony/tunes/h.wav new file mode 100644 index 0000000000..921b7d5e3f Binary files /dev/null and b/Games/keySymphony/tunes/h.wav differ diff --git a/Games/keySymphony/tunes/j.wav b/Games/keySymphony/tunes/j.wav new file mode 100644 index 0000000000..747367fe86 Binary files /dev/null and b/Games/keySymphony/tunes/j.wav differ diff --git a/Games/keySymphony/tunes/k.wav b/Games/keySymphony/tunes/k.wav new file mode 100644 index 0000000000..52598b1a6a Binary files /dev/null and b/Games/keySymphony/tunes/k.wav differ diff --git a/Games/keySymphony/tunes/l.wav b/Games/keySymphony/tunes/l.wav new file mode 100644 index 0000000000..95baa0b64e Binary files /dev/null and b/Games/keySymphony/tunes/l.wav differ diff --git a/Games/keySymphony/tunes/o.wav b/Games/keySymphony/tunes/o.wav new file mode 100644 index 0000000000..853e92da4b Binary files /dev/null and b/Games/keySymphony/tunes/o.wav differ diff --git a/Games/keySymphony/tunes/p.wav b/Games/keySymphony/tunes/p.wav new file mode 100644 index 0000000000..d97f784fb3 Binary files /dev/null and b/Games/keySymphony/tunes/p.wav differ diff --git a/Games/keySymphony/tunes/s.wav b/Games/keySymphony/tunes/s.wav new file mode 100644 index 0000000000..4d53816b8c Binary files /dev/null and b/Games/keySymphony/tunes/s.wav differ diff --git a/Games/keySymphony/tunes/t.wav b/Games/keySymphony/tunes/t.wav new file mode 100644 index 0000000000..1e50ef5c81 Binary files /dev/null and b/Games/keySymphony/tunes/t.wav differ diff --git a/Games/keySymphony/tunes/u.wav b/Games/keySymphony/tunes/u.wav new file mode 100644 index 0000000000..505f00e54a Binary files /dev/null and b/Games/keySymphony/tunes/u.wav differ diff --git a/Games/keySymphony/tunes/w.wav b/Games/keySymphony/tunes/w.wav new file mode 100644 index 0000000000..2a160b5594 Binary files /dev/null and b/Games/keySymphony/tunes/w.wav differ diff --git a/Games/keySymphony/tunes/y.wav b/Games/keySymphony/tunes/y.wav new file mode 100644 index 0000000000..e4caa7049b Binary files /dev/null and b/Games/keySymphony/tunes/y.wav differ diff --git a/README.md b/README.md index 624620560c..acd7c016f9 100644 --- a/README.md +++ b/README.md @@ -354,6 +354,8 @@ This repository also provides one such platforms where contributers come over an | [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) | | [Disney_Trivia](https://github.com/manmita/GameZone/tree/Disney_Trivia/Games/Disney_Trivia)| |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)| +|[KeySymphony](https://github.com/kunjgit/GameZone/tree/main/Games/KeySymphony)| +