[New Game] Drum kit added

shellygarg10 · Jul 18, 2024 · efae57a · efae57a
1 parent 17e0aae
commit efae57a
Show file tree

Hide file tree

Showing 21 changed files with 244 additions and 0 deletions.
diff --git a/Games/Drum_kit/Readme.md b/Games/Drum_kit/Readme.md
@@ -0,0 +1,27 @@
+# **Game_Name** 
+
+Dragon World Game (Issue: #926 - GSSOC '23)
+
+<br>
+
+## **Description 📃**
+Dragon world game is developed using HTML, CSS, JavaScript.
+Main target is to save an innocent creature from attack of dragon from continuous attacks. The number of times user will be able to save 
+the creature from attack from dragon, the points will be earned.
+
+
+## **functionalities 🎮**
+1. There will be an innocent creature and a dragon
+2. Player will try to save the creature from the attack of dragon
+3. Dragon will continuously attack the creature
+4. The number of times player will be able to save the creature, that many points will be gained
+5. If dragon hits the creature, the game will be over.
+<br>
+
+## **How to play? 🕹️**
+1. To make jump press the up arrow key
+2. To go forward press the forward arrow key
+3. To move backward press the backward arrow key
+
+## **Screenshots 📸**
+![Drum_kit](https://github.com/sujanrupu/dg/assets/103595490/06599e6c-8ee1-44f4-9f8a-a5134dfd2044)
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
@@ -881,6 +881,7 @@ This repository also provides one such platforms where contributers come over an
 |[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)|
 |[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>

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