diff --git a/Games/Drummer_Kit/README.md b/Games/Drummer_Kit/README.md new file mode 100644 index 0000000000..28106163de --- /dev/null +++ b/Games/Drummer_Kit/README.md @@ -0,0 +1,6 @@ +# Drummmer_Kit + +A simple drum kit game made using javascript to understand the concept of event listeners in DOM. + +![image](https://github.com/user-attachments/assets/510acce4-20f9-403e-b665-f68dbfa324ed) + diff --git a/Games/Drummer_Kit/app.js b/Games/Drummer_Kit/app.js new file mode 100644 index 0000000000..9a755d20a3 --- /dev/null +++ b/Games/Drummer_Kit/app.js @@ -0,0 +1,34 @@ +let allKeys = document.querySelectorAll('li') + +//FUNCTIONS +const play =(audio)=>{ + if(!audio) return; + audio.currentTime=0 + audio.play() +} +const playKey = (event)=>{ + let audio=document.querySelector(`audio[data-key="${event.keyCode}"]`) + play(audio) + let pressed=document.querySelector(`li[data-key="${event.keyCode}"]`) + pressed.classList.add('playing') +} + +const playClick=(event)=>{ + let clickedKey=event.target.getAttribute("data-key") + let audio=document.querySelector(`audio[data-key="${clickedKey}"]`) + play(audio) + let pressed=document.querySelector(`li[data-key="${clickedKey}"]`) + pressed.classList.add('playing') +} +//ACTIONS +allKeys.forEach(key=>key.addEventListener('transitionend',()=>{ + key.classList.remove('playing') +})) +window.addEventListener('keydown',playKey) + +window.addEventListener('click',playClick) + + + + + diff --git a/Games/Drummer_Kit/assets/bg-1.jpg b/Games/Drummer_Kit/assets/bg-1.jpg new file mode 100644 index 0000000000..9b8b91b8c1 Binary files /dev/null and b/Games/Drummer_Kit/assets/bg-1.jpg differ diff --git a/Games/Drummer_Kit/assets/dj.jpg b/Games/Drummer_Kit/assets/dj.jpg new file mode 100644 index 0000000000..6452aaa39c Binary files /dev/null and b/Games/Drummer_Kit/assets/dj.jpg differ diff --git a/Games/Drummer_Kit/index.html b/Games/Drummer_Kit/index.html new file mode 100644 index 0000000000..3fa267ab07 --- /dev/null +++ b/Games/Drummer_Kit/index.html @@ -0,0 +1,40 @@ + + + + + + + + DJ Starter Kit + + + + +
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Games/Drummer_Kit/sounds/boom.wav b/Games/Drummer_Kit/sounds/boom.wav new file mode 100644 index 0000000000..8d6423bcdb Binary files /dev/null and b/Games/Drummer_Kit/sounds/boom.wav differ diff --git a/Games/Drummer_Kit/sounds/clap.wav b/Games/Drummer_Kit/sounds/clap.wav new file mode 100644 index 0000000000..ef952e5eb4 Binary files /dev/null and b/Games/Drummer_Kit/sounds/clap.wav differ diff --git a/Games/Drummer_Kit/sounds/hihat.wav b/Games/Drummer_Kit/sounds/hihat.wav new file mode 100644 index 0000000000..885cb196a3 Binary files /dev/null and b/Games/Drummer_Kit/sounds/hihat.wav differ diff --git a/Games/Drummer_Kit/sounds/kick.wav b/Games/Drummer_Kit/sounds/kick.wav new file mode 100644 index 0000000000..8fe46dea0c Binary files /dev/null and b/Games/Drummer_Kit/sounds/kick.wav differ diff --git a/Games/Drummer_Kit/sounds/openhat.wav b/Games/Drummer_Kit/sounds/openhat.wav new file mode 100644 index 0000000000..50637521dc Binary files /dev/null and b/Games/Drummer_Kit/sounds/openhat.wav differ diff --git a/Games/Drummer_Kit/sounds/ride.wav b/Games/Drummer_Kit/sounds/ride.wav new file mode 100644 index 0000000000..e5829dfef9 Binary files /dev/null and b/Games/Drummer_Kit/sounds/ride.wav differ diff --git a/Games/Drummer_Kit/sounds/snare.wav b/Games/Drummer_Kit/sounds/snare.wav new file mode 100644 index 0000000000..c4edfc7534 Binary files /dev/null and b/Games/Drummer_Kit/sounds/snare.wav differ diff --git a/Games/Drummer_Kit/sounds/tink.wav b/Games/Drummer_Kit/sounds/tink.wav new file mode 100644 index 0000000000..1f3c7b9191 Binary files /dev/null and b/Games/Drummer_Kit/sounds/tink.wav differ diff --git a/Games/Drummer_Kit/sounds/tom.wav b/Games/Drummer_Kit/sounds/tom.wav new file mode 100644 index 0000000000..9e2cdf691e Binary files /dev/null and b/Games/Drummer_Kit/sounds/tom.wav differ diff --git a/Games/Drummer_Kit/style.css b/Games/Drummer_Kit/style.css new file mode 100644 index 0000000000..cf51138948 --- /dev/null +++ b/Games/Drummer_Kit/style.css @@ -0,0 +1,61 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); + + + +*,::after,::before{ + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url(./assets/bg-1.jpg); + background-size: 270%; + background-repeat: no-repeat; + font-family: 'Roboto', sans-serif; +} + +ul{ + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 8vw; +} + +ul li{ + height: 10vh; + width: 20vw; + border: 2px solid white; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: 800; + background-color: rgb(12, 12, 11); + opacity: 50%; + transition: 0.1s linear; +} +.playing{ + border: rgb(84, 31, 191) solid; + color:rgb(84, 31, 191); + box-shadow: 0 0 8px rgb(84, 31, 191); + transform: scale(1.1); + opacity: 1; +} + +@media (min-width:1025px){ + body{ + background-size: 100%; + } + ul{ + display: flex; + grid-gap:1.5rem + } + ul li{ + width: 6vw; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 2e386fde31..688c2f7bf6 100644 --- a/README.md +++ b/README.md @@ -461,6 +461,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach | [Sky_Lift_Dash](https://github.com/kunjgit/GameZone/tree/main/Games/Sky_Lift_Dash) | | [Block_Vault](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Vault) | | [Random_Choice_Picker](https://github.com/kunjgit/GameZone/tree/main/Games/Random_Choice_Picker) | +| [Drummer_Kit](https://github.com/kunjgit/GameZone/tree/main/Games/Drummer_Kit) |
diff --git a/assets/images/Drummer_Kit.png b/assets/images/Drummer_Kit.png new file mode 100644 index 0000000000..188e568d66 Binary files /dev/null and b/assets/images/Drummer_Kit.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index cbcb6f7714..07dfe9fdd9 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -3229,17 +3229,11 @@ "gameUrl": "Block_Vault", "thumbnailUrl": "Block_Vault.png" }, - - - - "646":{ "gameTitle" : "Harry Potter Wizard Quiz", "gameUrl": "Harry_Potter_Wizard_Quiz/start.html", "thumbnailUrl": "Harry_Potter_Wizard_Quiz.png" - } - - + }, "647":{ "gameTitle" : "Droop Dash Game", "gameUrl": "Drop_Dash_Game", @@ -3250,11 +3244,15 @@ "gameTitle" : "Gravity Switch Game", "gameUrl": "Gravity_Switch_Game", "thumbnailUrl": "Gravity_Switch_Game.png" - + }, "649":{ "gameTitle" : "Random Choice Picker", "gameUrl": "Random_Choice_Picker", "thumbnailUrl": "Drop_Dash_Game.png" - + }, + "648":{ + "gameTitle" : "Drummer Kit", + "gameUrl": "Drummer_Kit", + "thumbnailUrl": "Drummer_Kit.png" } }