Merge branch 'main' into detona

.github/CONTRIBUTING_GUIDELINE.md

@@ -24,6 +24,43 @@ in case you are stuck:
 
 <br>
 
+### Alternatively contribute using GitHub Desktop
+
+1. **Open GitHub Desktop:**
+   Launch GitHub Desktop and log in to your GitHub account if you haven't already.
+
+2. **Clone the Repository:**
+   - If you haven't cloned the GameZone repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository."
+   - Choose the GameZone repository from the list of repositories on GitHub and clone it to your local machine.
+
+3. **Switch to the Correct Branch:**
+   - Ensure you are on the branch that you want to submit a pull request for.
+   - If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch.
+
+4. **Make Changes:**
+   Make your changes to the code or files in the repository using your preferred code editor.
+
+5. **Commit Changes:**
+   - In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit.
+   - Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to <branch-name>" button to commit your changes to the local branch.
+
+6. **Push Changes to GitHub:**
+   After committing your changes, click the "Push origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub.
+
+7. **Create a Pull Request:**
+  - Go to the GitHub website and navigate to your fork of the GameZone repository.
+  - You should see a button to "Compare & pull request" between your fork and the original repository. Click on it.
+
+8. **Review and Submit:**
+   - On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request.
+   - Once you're satisfied, click the "Create pull request" button to submit your pull request.
+
+9. **Wait for Review:**
+    Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the GameZone repository.
+
+⭐️ Support the Project
+If you find this project helpful, please consider giving it a star on GitHub! Your support helps to grow the project and reach more contributors.
+
 ## **Issue Report Process 📌**
 
 1. Go to the project's issues.
@@ -40,29 +77,58 @@ in case you are stuck:
 * Folder naming convention
     - ```Game_Name```  ex.  ```Tilting_Maze```,```Rock_Paper_Scissors``` (first letter should be capital and if you need space use underscore **_** )      
 * files in the folder 
-    - Main html file should be named as **index.html** , not something else like ```Tilting_Maze.html```
+    - Main html file should be named as **index.html** , not something else like ```Tilting_Maze.html```(Preferred)
     - Game files - ```index.html``` , ```script.js``` , ```style.css```(not stictly to follow this but you should have separate file for each kind)
-    - It is preferred if the main html file is directly added to the main folder of you game like ```Tilting_Maze/index.html``` along with other files like *style.css*, *script.js*
+    - It is preferred if the main html file is directly added to the main folder of you game like ```Tilting_Maze/index.html``` along with other files like **style.css**, **script.js**
     - you can have other folders if you are having assets for your game 
-    - Create```README.md``` for your Game using this [TEMPLATE](../Games/FOLDER_README_TEMPLATE.md).Although, it is not compulsory to follow this README template ,you can use your own *README* template whichever you prefer, to explain your Game
+    - Create```README.md``` for your Game using this [TEMPLATE](../Games/FOLDER_README_TEMPLATE.md).Although, it is not compulsory to follow this README template ,you can use your own *README* template whichever you prefer, to explain functionality and code of your Game
 * naming convention for the screenshot you will add in ```assets/images```
     - Remember preview image should be in ```assets/images``` and not in main folder of Game itself.
-    - name of image should be same as your game name
-    - ex. ```Tilting_Maze.jpeg``` or .jpg or .png any of the image format, but don't add image format in the name itself , it is self-assigned to a image,you don't need to add it manually, otherwise it becomes ```Tilting_Maze.jpeg.jpeg```
-    - There should be only one ScreenShot of the game in ```assets/images``` and that too with same name as the Game(Exactly Same).
+    - Name of image should be same as your Game name
+    - ex. ```Tilting_Maze.jpeg``` or .jpg or .png any of the image format, but don't add image format in the name itself , it is self-assigned to a image, you don't need to add it manually, otherwise it becomes ```Tilting_Maze.jpeg.jpeg```
+    - There should be only one ScreenShot of the game in ```assets/images``` and that too with same name as the Game (Exactly Same).
 * Note:-All Other data except the ScreenShot of your Game, should be in it's main folder , don't add it to other folders of the project.
 
+<br>
+
+## Add Game to assets/js/gamesData.json
+
+* This is to Show your game on the main Website
+   - Go to the end of gamesData.json and add :
+   - **,**
+         " **No.** ":{
+            "gameTitle" : " **Title** ",
+            "gameUrl": " **Main Folder** ",
+            "thumbnailUrl":" **Preview Image** " 
+         }
+   - **No.**: Number for your Game , it should be the next number with respect to the file. eg: if the last no. in file at present is *625* you should put *626* at the place of **No.**
+   - **Title:** this is the title for your game that will be shown on the website, if your game name is ```Super_Mario_Game``` ,put Title as ```Super Mario Game```
+   - **Main Folder :** This is the reference to *index.html* 
+      - if your index.html is directly in main game folder ,put the main folder name eg: ```Super_Mario_Game```
+      - if your index.html is in subfolder , give path to it 
+      eg: ```Super_Mario_Game/public``` (assuming index.html is in public folder of Super_Mario_Game folder)
+      - if your main html file's name is not index.html , you need to specify the main html file also. eg:```Super_Mario_Game/mario.html``` or if in sub folder ```Super_Mario_Game/public/mario.html```
+   - **Preview Image:** This is the image that will be shown as preview for your game , here you provide the name of the image that you added to **assets/images** folder, along with format type. Eg. ```Super_Mario_Game.png``` or ```Super_Mario_Game.jpg``` or with any other format.
+
+**Note:-** 
+
+   -  Do not modify anything else in the rest of the file, you only need to add your game in the end of the file. 
+   - Don't forget to add the comma for new entry (already give in above sample but this is a reminder as one might miss it to see in the sample)
+
+
 <br>
 
 ## **Pull Request Process 🚀**
 
 1. Ensure that you have self reviewed your code 😀
 2. Make sure you have added the proper description for the functionality of the code
-3. You have added README file in your repository .
-4. You have added the thumbnail of the project into ```assets/images``` for website preview
-5. Add your game screenshot in the assets folder by following the proper conversion specified over here
-6. You have added your game name and link in main README.md
-7. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀
+3. You have added README file in your Game folder.
+4. You have added the thumbnail of the project/Game into ```assets/images``` for website preview
+5. Added your game screenshot in the assets folder by following the proper conversion specified over here
+6. You have added your game name and link in GameZone's README.md
+7. You have Added your game to ```assets\js\gamesData.json```.
+8. you have reviewed that your Game loads on the website with preview image and works when opened.
+9. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀
 
 <br>
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,10 +15,11 @@ Fixes # <your_issue_number>
 - [ ] My changes generates no new warnings.
 - [ ] I have followed proper naming convention showed in [CONTRIBUTING GUIDELINE](https://github.com/kunjgit/GameZone/blob/main/.github/CONTRIBUTING_GUIDELINE.md)
 - [ ] I have added screenshot for website preview in assets/images 
-- [ ] I have added entries for my game in main README.md
-- [ ] I have added README.md in my folder 
+- [ ] I have added entries for my game in GameZone's README.md
+- [ ] I have added README.md in my Game folder 
 - [ ] I have added working video of the game in README.md (optional)
 - [ ] I have specified the respective issue number for which I have requested the new game.
+- [ ] I have added my Game to gamesData.json file and it is loading properly on main website as intended.
 
 
 <hr>

CONTRIBUTING.md

@@ -73,17 +73,21 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
 <br>
 
 ## **File naming conventions 📁**
-- Give unique name for your game that is not already existed 
+- Give unique name for your game that don't exist already. 
 * Folder naming convention
-    - ```Game_Name```  ex.  ```Tilting_Maze``` (first letter should be capital and if you need space use _ )  
+    - ```Game_Name```  ex.  ```Tilting_Maze```,```Rock_Paper_Scissors``` (first letter should be capital and if you need space use underscore **_** )      
 * files in the folder 
-    - ```index.html``` , ```script.js``` , ```style.css```(not stictly to follow this but you should have separate )
+    - Main html file should be named as **index.html** , not something else like ```Tilting_Maze.html```(Preferred)
+    - Game files - ```index.html``` , ```script.js``` , ```style.css```(not stictly to follow this but you should have separate file for each kind)
+    - It is preferred if the main html file is directly added to the main folder of you game like ```Tilting_Maze/index.html``` along with other files like **style.css**, **script.js**
     - you can have other folders if you are having assets for your game 
-    - ```README.md``` for your folder using template [TEMPLATE](../Games/FOLDER_README_TEMPLATE.md) 
-    - It is not compulsory to follow this README template only you can have your own 
+    - Create```README.md``` for your Game using this [TEMPLATE](../Games/FOLDER_README_TEMPLATE.md).Although, it is not compulsory to follow this README template ,you can use your own *README* template whichever you prefer, to explain functionality and code of your Game
 * naming convention for the screenshot you will add in ```assets/images```
-    - name of image should be same as your game name
-    - ex. ```Tilting_Maze.jpeg``` or .jpg or .png any of the image formate
+    - Remember preview image should be in ```assets/images``` and not in main folder of Game itself.
+    - Name of image should be same as your Game name
+    - ex. ```Tilting_Maze.jpeg``` or .jpg or .png any of the image format, but don't add image format in the name itself , it is self-assigned to a image, you don't need to add it manually, otherwise it becomes ```Tilting_Maze.jpeg.jpeg```
+    - There should be only one ScreenShot of the game in ```assets/images``` and that too with same name as the Game (Exactly Same).
+* Note:-All Other data except the ScreenShot of your Game, should be in it's main folder , don't add it to other folders of the project.
 
 <br>
 
@@ -98,7 +102,7 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
             "gameUrl": " **Main Folder** ",
             "thumbnailUrl":" **Preview Image** " 
          }
-   - **No.**: Number for your Game , it should be the next number with respect to the file. eg: it the last no. in file at present is *625* you should put *626* at the place of **No.**
+   - **No.**: Number for your Game , it should be the next number with respect to the file. eg: if the last no. in file at present is *625* you should put *626* at the place of **No.**
    - **Title:** this is the title for your game that will be shown on the website, if your game name is ```Super_Mario_Game``` ,put Title as ```Super Mario Game```
    - **Main Folder :** This is the reference to *index.html* 
       - if your index.html is directly in main game folder ,put the main folder name eg: ```Super_Mario_Game```
@@ -111,15 +115,18 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
 
    -  Do not modify anything else in the rest of the file, you only need to add your game in the end of the file. 
    - Don't forget to add the comma for new entry (already give in above sample but this is a reminder as one might miss it to see in the sample)
+<br>
 ## **Pull Request Process 🚀**
 
 1. Ensure that you have self reviewed your code 😀
 2. Make sure you have added the proper description for the functionality of the code
-3. You have added README file in your repository .
-4. You have added the thumbnail of the project into ```assets/images``` for website preview
-5. Add your game screenshot in the assets folder by following the proper conversion specified over here
-6. You have added your game name and link in main README.md
-7. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀
+3. You have added README file in your Game folder.
+4. You have added the thumbnail of the project/Game into ```assets/images``` for website preview
+5. Added your game screenshot in the assets folder by following the proper conversion specified over here
+6. You have added your game name and link in GameZone's README.md
+7. You have Added your game to ```assets\js\gamesData.json```.
+8. you have reviewed that your Game loads on the website with preview image and works when opened.
+9. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀
 
 <br>
 

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)

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>

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);
+}