kunjgit · kunjgit · Jul 24, 2024 · Jul 18, 2024 · Jul 21, 2024 · Jul 23, 2024
diff --git a/Games/Drum_kit/Readme.md b/Games/Drum_kit/Readme.md
@@ -0,0 +1,20 @@
+# **Game_Name** 
+
+Drum Kit [Issue #4876]
+
+<br>
+
+## **Description 📃**
+Drum kit game is developed using HTML, CSS, JavaScript.
+Main target is to have experience of drum kit sound and have fun.
+
+
+## **functionalities 🎮**
+1. Have experience of drum kit sound and have fun.
+<br>
+
+## **How to play? 🕹️**
+1. User can click on drum image.
+2. User can play using keyboard too.
+## **Screenshots 📸**
+![Drum_kit](./images/asset.png)
diff --git a/Games/Drum_kit/images/asset.png b/Games/Drum_kit/images/asset.png
diff --git a/Games/Drum_kit/images/crash.png b/Games/Drum_kit/images/crash.png
diff --git a/Games/Drum_kit/images/kick.png b/Games/Drum_kit/images/kick.png
diff --git a/Games/Drum_kit/images/snare.png b/Games/Drum_kit/images/snare.png
diff --git a/Games/Drum_kit/images/tom1.png b/Games/Drum_kit/images/tom1.png
diff --git a/Games/Drum_kit/images/tom2.png b/Games/Drum_kit/images/tom2.png
diff --git a/Games/Drum_kit/images/tom3.png b/Games/Drum_kit/images/tom3.png
diff --git a/Games/Drum_kit/images/tom4.png b/Games/Drum_kit/images/tom4.png
diff --git a/Games/Drum_kit/index.html b/Games/Drum_kit/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Drum Kit</title>
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
+</head>
+
+<body>
+
+  <h1 id="title">Drum 🥁 Kit</h1>
+  <div class="set">
+    <button class="w drum">w</button>
+    <button class="a drum">a</button>
+    <button class="s drum">s</button>
+    <button class="d drum">d</button>
+    <button class="j drum">j</button>
+    <button class="k drum">k</button>
+    <button class="l drum">l</button>
+  </div>
+
+  <script src="index.js" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/Games/Drum_kit/index.js b/Games/Drum_kit/index.js
@@ -0,0 +1,103 @@
+// document.querySelector("button").addEventListener("click" , handleClick);
+
+// function handleClick(){
+//     alert("I got clicked");
+// }
+
+
+// SOUND EVENT ONLY 
+
+// var noOfButtons = document.querySelectorAll(".drum").length ;
+// for(var i=0; i< noOfButtons ; i++){
+//     document.querySelectorAll(".drum")[i].addEventListener("click" , function(){
+//         var buttonInnerHTML = this.innerHTML;
+//         switch(buttonInnerHTML){
+//             case "w" :
+//                 var tom1 = new Audio("sounds/tom-1.mp3");
+//                 tom1.play();
+//                 break;
+//             case "a" :
+//                 var tom2 = new Audio("sounds/tom-2.mp3");
+//                 tom2.play();
+//                 break;
+//             case "s" :
+//                 var tom3 = new Audio("sounds/tom-3.mp3");
+//                 tom3.play();
+//                 break;
+//             case "d" :
+//                 var tom4 = new Audio("sounds/tom-4.mp3");
+//                 tom4.play();
+//                 break;
+//             case "j" :
+//                 var snare = new Audio("sounds/snare.mp3");
+//                 snare.play();
+//             case "k" :
+//                 var crash = new Audio("sounds/crash.mp3");
+//                 crash.play();
+//                 break;
+//             case "l" :
+//                 var kick = new Audio("sounds/kick-bass.mp3");
+//                 kick.play();
+//                 break;
+//             default : console.log();            
+//         }
+//     });
+// }
+
+
+// DETECT BUTTON PRESS
+var noOfButtons = document.querySelectorAll(".drum").length ;
+for(var i=0; i< noOfButtons ; i++){
+    document.querySelectorAll(".drum")[i].addEventListener("click" , function(){
+        var buttonInnerHTML = this.innerHTML;
+        makeSound(buttonInnerHTML);
+        buttonAnimation(buttonInnerHTML);
+    });
+}
+// DETECT KEYBOARD PRESS 
+document.addEventListener("keydown" , function(event){
+    makeSound(event.key);
+    buttonAnimation(event.key);
+});
+
+function makeSound(key){
+    switch(key){
+        case "w" :
+            var tom1 = new Audio("sounds/tom-1.mp3");
+            tom1.play();
+            break;
+        case "a" :
+            var tom2 = new Audio("sounds/tom-2.mp3");
+            tom2.play();
+            break;
+        case "s" :
+            var tom3 = new Audio("sounds/tom-3.mp3");
+            tom3.play();
+            break;
+        case "d" :
+            var tom4 = new Audio("sounds/tom-4.mp3");
+            tom4.play();
+            break;
+        case "j" :
+            var snare = new Audio("sounds/snare.mp3");
+            snare.play();
+        case "k" :
+            var crash = new Audio("sounds/crash.mp3");
+            crash.play();
+            break;
+        case "l" :
+            var kick = new Audio("sounds/kick-bass.mp3");
+            kick.play();
+            break;
+        default : console.log();            
+    }
+}
+
+function buttonAnimation(currentKey){
+    var active = document.querySelector("." + currentKey);
+    active.classList.add("pressed");
+
+    setTimeout(function(){
+        active.classList.remove("pressed");
+    },100);
+}
diff --git a/Games/Drum_kit/sounds/crash.mp3 b/Games/Drum_kit/sounds/crash.mp3
diff --git a/Games/Drum_kit/sounds/kick-bass.mp3 b/Games/Drum_kit/sounds/kick-bass.mp3
diff --git a/Games/Drum_kit/sounds/snare.mp3 b/Games/Drum_kit/sounds/snare.mp3
diff --git a/Games/Drum_kit/sounds/tom-1.mp3 b/Games/Drum_kit/sounds/tom-1.mp3
diff --git a/Games/Drum_kit/sounds/tom-2.mp3 b/Games/Drum_kit/sounds/tom-2.mp3
diff --git a/Games/Drum_kit/sounds/tom-3.mp3 b/Games/Drum_kit/sounds/tom-3.mp3
diff --git a/Games/Drum_kit/sounds/tom-4.mp3 b/Games/Drum_kit/sounds/tom-4.mp3
diff --git a/Games/Drum_kit/styles.css b/Games/Drum_kit/styles.css
@@ -0,0 +1,86 @@
+body {
+    text-align: center;
+    background-color: #283149;
+  }
+
+  h1 {
+    font-size: 5rem;
+    color: #DBEDF3;
+    font-family: "Arvo", cursive;
+    text-shadow: 3px 0 #DA0463;
+
+  }
+
+  footer {
+    color: #DBEDF3;
+    font-family: sans-serif;
+  }
+
+  .w {
+    background-image: url("images/tom1.png");
+  }
+
+  .a {
+    background-image: url("images/tom2.png");
+  }
+
+  .s {
+    background-image: url("images/tom3.png");
+  }
+
+  .d {
+    background-image: url("images/tom4.png");
+  }
+
+  .j {
+    background-image: url("images/snare.png");
+  }
+
+  .k {
+    background-image: url("images/crash.png");
+  }
+
+  .l {
+    background-image: url("images/kick.png");
+  }
+
+  .set {
+    margin: 10% auto;
+  }
+
+  .game-over {
+    background-color: red;
+    opacity: 0.8;
+  }
+
+  .pressed {
+    box-shadow: 0 3px 4px 0 #DBEDF3;
+    opacity: 0.5;
+  }
+
+  .red {
+    color: red;
+  }
+
+  .drum {
+    outline: none;
+    border: 10px solid #404B69;
+    font-size: 5rem;
+    font-family: 'Arvo', cursive;
+    line-height: 2;
+    font-weight: 900;
+    color: #DA0463;
+    text-shadow: 3px 0 #DBEDF3;
+    border-radius: 15px;
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    text-align: center;
+    margin: 10px;
+    background-color: white;
+  }
+
+  .pressed{
+    box-shadow: 0px 3px 4px 0 #DBEDF3;
+    opacity: 0.5;
+  }
diff --git a/README.md b/README.md
@@ -522,11 +522,11 @@ This repository also provides one such platforms where contributers come over an
 | [Simon_Says](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Says) |
 |[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)|
 |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)|
+
 |[Matching_Pair](https://github.com/kunjgit/GameZone/tree/main/Games/Matching_pair)
 
 |[Otherworldly_Odyssey](./Games/Otherworldly_Odyssey/)|
 </center>
- </center>
 | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game)                                       | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics)                  | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian)                       | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game)                       | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) |  [Colour_Generator_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Colour_Generator_Game) |
 | [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor)                  | [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game)  | [Mancala_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Mancala_Game)  | [2048_win](https://github.com/kunjgit/GameZone/tree/main/Games/2048_win) |  [Dice_Roller](https://github.com/kunjgit/GameZone/tree/main/Games/Dice_Roller)                  |   [Chrome_Dino_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dino_Game) | 
 | [Catch_The_Circle](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Circle)  | [Shrek_Vs_Wild](https://github.com/kunjgit/GameZone/tree/main/Games/Shrek_Vs_Wild)  | [Balloon_Buster](https://github.com/kunjgit/GameZone/tree/main/Games/Balloon_Buster) | [Pokemon_Stats_Card](https://github.com/kunjgit/GameZone/tree/main/Games/Pokemon_Stats_Card) | [Steampunk_FlappyBird](https://github.com/kunjgit/GameZone/tree/main/Games/Steampunk_FlappyBird)  | 
@@ -549,7 +549,8 @@ This repository also provides one such platforms where contributers come over an
  | [Ultimate_Football_Manager](https://github.com/kunjgit/GameZone/tree/main/Games/Ultimate_Football_Manager) | [Zombie_Shooter](https://github.com/kunjgit/GameZone/tree/main/Games/Zombie_Shooter)| [Ganesh_QR_Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Ganesh_QR_Maker) | [Brain_Card_game](https://github.com/Kunjgit/GameZone/tree/main/Games/Brain_Card_game)| [Wheel_of_Fortunes](https://github.com/kunjgit/GameZone/tree/main/Games/Wheel_of_Fortunes)|
 |[Samurai_Fighting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Samurai_Fighting_Game)| [Tic-tac-toe](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-tac-toe)| [Quest_For_Riches](https://github.com/kunjgit/GameZone/tree/main/Games/Quest_For_Riches)| [Pattern Creation Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pattern_Creation_Game)| [Magic_8_ball_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Magic_8_ball) |
 | [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) | [UNO game with computer](https://github.com/kunjgit/GameZone/tree/main/Games/UNO_game_with_Computer) | [Dice_Rolling_Simulator](https://github.com/priyashuu/GameZone/tree/main/Games/Dice_rolling_simulator)| [Space_Dominators](https://github.com/kunjgit/GameZone/tree/main/Games/Space_Dominators)| [Simon_Says](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Says) |
-|[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)| [Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys) | [Penalty_Shootout_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Penalty_Shootout_Game)| 
+|[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)| [Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys) | [Penalty_Shootout_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Penalty_Shootout_Game)| |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)|
+| [Drum_kit] (https://github.com/kunjgit/GameZone/tree/main/Games/Drum_kit)|
 </center>
 <br>
 <p align="right"><a href="#top">Back to top</a></p>

diff --git a/assets/images/Drum_kit.png b/assets/images/Drum_kit.png