Skip to content

Commit 3c7f558

Browse files
kunjgitkunjgit
authored
Merge pull request #5163 from SanskarSinghiit/main
Adds Drummer Kit game 🥁
2 parents 7648cac + 8a7e53e commit 3c7f558

File tree

18 files changed

+149
-9
lines changed

18 files changed

+149
-9
lines changed

‎Games/Drummer_Kit/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Drummmer_Kit
2+
3+
A simple drum kit game made using javascript to understand the concept of event listeners in DOM.
4+
5+
![image](https://github.com/user-attachments/assets/510acce4-20f9-403e-b665-f68dbfa324ed)
6+

‎Games/Drummer_Kit/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
let allKeys = document.querySelectorAll('li')
2+
3+
//FUNCTIONS
4+
const play =(audio)=>{
5+
if(!audio) return;
6+
audio.currentTime=0
7+
audio.play()
8+
}
9+
const playKey = (event)=>{
10+
let audio=document.querySelector(`audio[data-key="${event.keyCode}"]`)
11+
play(audio)
12+
let pressed=document.querySelector(`li[data-key="${event.keyCode}"]`)
13+
pressed.classList.add('playing')
14+
}
15+
16+
const playClick=(event)=>{
17+
let clickedKey=event.target.getAttribute("data-key")
18+
let audio=document.querySelector(`audio[data-key="${clickedKey}"]`)
19+
play(audio)
20+
let pressed=document.querySelector(`li[data-key="${clickedKey}"]`)
21+
pressed.classList.add('playing')
22+
}
23+
//ACTIONS
24+
allKeys.forEach(key=>key.addEventListener('transitionend',()=>{
25+
key.classList.remove('playing')
26+
}))
27+
window.addEventListener('keydown',playKey)
28+
29+
window.addEventListener('click',playClick)
30+
31+
32+
33+
34+

‎Games/Drummer_Kit/assets/bg-1.jpg‎

293 KB
Loading

‎Games/Drummer_Kit/assets/dj.jpg‎

1.44 MB
Loading

‎Games/Drummer_Kit/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>DJ Starter Kit</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div id="intruments">
14+
<ul>
15+
<li class="intru" data-key="81">Q</li>
16+
<li class="intru" data-key="76">L</li>
17+
<li class="intru" data-key="70">F</li>
18+
<li class="intru" data-key="66">B</li>
19+
<li class="intru" data-key="75">K</li>
20+
<li class="intru" data-key="84">T</li>
21+
<li class="intru" data-key="89">Y</li>
22+
<li class="intru" data-key="82">R</li>
23+
<li class="intru" data-key="69">E</li>
24+
</ul>
25+
</div>
26+
27+
<audio data-key="81" src="sounds/clap.wav"></audio>
28+
<audio data-key="76" src="sounds/hihat.wav"></audio>
29+
<audio data-key="70" src="sounds/kick.wav"></audio>
30+
<audio data-key="66" src="sounds/openhat.wav"></audio>
31+
<audio data-key="75" src="sounds/boom.wav"></audio>
32+
<audio data-key="84" src="sounds/ride.wav"></audio>
33+
<audio data-key="89" src="sounds/snare.wav"></audio>
34+
<audio data-key="82" src="sounds/tom.wav"></audio>
35+
<audio data-key="69" src="sounds/tink.wav"></audio>
36+
<script src="app.js "></script>
37+
38+
</body>
39+
40+
</html>

‎Games/Drummer_Kit/sounds/boom.wav‎

130 KB
Binary file not shown.

‎Games/Drummer_Kit/sounds/clap.wav‎

63.4 KB
Binary file not shown.

‎Games/Drummer_Kit/sounds/hihat.wav‎

50.9 KB
Binary file not shown.

‎Games/Drummer_Kit/sounds/kick.wav‎

15.2 KB
Binary file not shown.

‎Games/Drummer_Kit/sounds/openhat.wav‎

238 KB
Binary file not shown.

0 commit comments

Comments
 (0)