Added new game

Games/keyboard_kit_game/CONTRIBUTING.md

@@ -0,0 +1,87 @@
+### Contributing guidelines
+
+## 👩🏽‍💻 Prerequisite Skills to Contribute
+
+### Contribute in project
+
+- [Node.js](https://nodejs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- 
+---
+
+## 💥 How to Contribute
+
+- Take a look at the existing [Issues](https://github.com/ayushlohmod/drumkit/issues) or [create a new issue](https://github.com/ayushlohmod/drumkit/issues/new/choose)!
+- [Fork the Repo](https://github.com/ayushlohmod/drumkit/fork). Then, create a branch for any issue that you are working on. Finally, commit your work.
+- Create a [Pull Request](https://github.com/ayushlohmod/drumkit/compare) (PR), which will be promptly reviewed and given suggestions for improvements by the community.
+- Add screenshots or screen captures to your Pull Request to help us understand the effects of the changes proposed in your PR.
+
+---
+
+## 🌟 HOW TO MAKE A PULL REQUEST:
+
+1. Start by making a Fork of the [drumkit](https://github.com/ayushlohmod/drumkit) repository. Click on the <a href="https://github.com/ayushlohmod/drumkit/fork"><img src="https://i.imgur.com/G4z1kEe.png" height="21" width="21"></a>Fork symbol at the top right corner.
+
+2. Clone your new fork of the repository in the terminal/CLI on your computer with the following command:
+
+```bash
+git clone https://github.com/<your-github-username>/drumkit
+```
+
+3. Navigate to the newly created trick-generator project directory:
+```bash
+cd drumkit
+```
+
+4. Set upstream command:
+```bash
+git remote add upstream https://github.com/ayushlohmod/drumkit.git
+```
+
+5. Create a new branch:
+```bash
+git checkout -b YourBranchName
+```
+
+6. Sync your fork or your local repository with the origin repository:
+
+- In your forked repository, click on "Fetch upstream"
+- Click "Fetch and merge"
+
+### Alternatively, Git CLI way to Sync forked repository with origin repository:
+```bash
+git fetch upstream
+```
+
+```bash
+git merge upstream/main
+```
+
+### [Github Docs](https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github) for Syncing
+
+7. Make your changes to the source code.
+
+8. Stage your changes and commit:
+
+⚠️ Make sure not to commit package.json or package-lock.json file
+
+```bash
+git commit -m "<your_commit_message>"
+```
+
+9. Push your local commits to the remote repository:
+```bash
+git push origin YourBranchName
+```
+
+10. Create a [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)!
+
+11. Congratulations! You've made your first contribution to [drumkit](https://github.com/ayushlohmod/drumkit/graphs/contributors)!
+
+🏆 After this, the maintainers will review the PR and will merge it if it helps move the Drum Kit project forward. Otherwise, it will be given constructive feedback and suggestions for the changes needed to add the PR to the codebase.
+
+---
+
+## 💥 Issues
+
+In order to discuss changes, you are welcome to [open an issue](https://github.com/ayushlohmod/drumkit/issues/new/choose) about what you would like to contribute. Enhancements are always encouraged and appreciated.

Games/keyboard_kit_game/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ayush Lohmod
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Games/keyboard_kit_game/README.md

@@ -0,0 +1,50 @@
+## keyboard Kit
+A website To play keyboard sounds in your browser.
+### ⚒️ Languages / Tools
+ <table>
+	 <tbody>
+  <tr>
+   <td align="Center" width="25%"> 
+ <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5" target="_blank" rel="noreferrer"><img src="https://cdn.svgporn.com/logos/html-5.svg" width="36" height="36" alt="HTML" /></a>
+    <br>HTML
+    </td>   
+
+   <td align="Center" width="25%">
+        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank" rel="noreferrer"><img src="https://cdn.svgporn.com/logos/css-3.svg" width="36" height="36" alt="CSS" /></a>
+	<br>CSS
+    </td> 
+  <td align="Center" width="25%">
+	  <a href="https://www.typescriptlang.org/" target="_blank" rel="noreferrer"><img src="https://img.icons8.com/color/144/000000/typescript.png" width="36" height="36" alt="Typescript" /></a>
+	<br>Javascript
+    </td>   
+	  </tr>
+</tbody>
+  </table>
+
+<br>
+
+
+## **Functionalities 🎮**
+
+Game consists of following functionalities :
+
+<ol>
+<li>User can play diffrent drum sounds by the keyboard keys written on the drum</li>
+<li>User can play many sounds at a time</li>
+<li>Diffrent sounds like kick,tom,crash and snare has been included.</li>
+</ol>
+
+## **How to Play? 🕹️**
+
+- See which sound you wanna play on the drum keyboard letter is written.
+- Press that key and boom sound get played.
+- Repeat the above steps with diffrent sounds to play in the rhythm.
+
+
+
+## 👩🏽‍💻 Contributing
+
+- Contributions make the open source community such an amazing place to learn, inspire, and create.
+- Any contributions you make are greatly appreciated.
+- Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.
+

Games/keyboard_kit_game/index.html

@@ -0,0 +1,32 @@
+<!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"></script>
+
+
+  <footer>
+    Made with ❤️ in London.
+  </footer>
+</body>
+
+</html>

Games/keyboard_kit_game/index.js

@@ -0,0 +1,92 @@
+//alert("it is connected");
+
+
+
+
+var numberslector = document.querySelectorAll(".drum").length;
+
+for ( var i = 0; i < numberslector; i++){
+
+
+    document.querySelectorAll(".drum")[i].addEventListener("click", audioplay);
+
+    function audioplay () {
+
+        var buttoninnerhtml = this.innerHTML;
+
+        makesound (buttoninnerhtml);
+        buttonanimation(buttoninnerhtml);
+
+    }
+
+    document.addEventListener("keypress" , function(event){
+
+        //console.log(event);
+        makesound(event.key);
+        buttonanimation(event.key);
+    });
+
+function makesound(key){
+
+
+    switch (key) {
+        case "w":
+            var crash = new Audio("sounds/crash.mp3");
+            crash.play();
+          break;
+
+        case "a":
+            var kick = new Audio("sounds/kick-bass.mp3");
+            kick.play();
+        break;
+
+        case "s":
+            var snare = new Audio("sounds/snare.mp3");
+            snare.play();
+        break;
+
+        case "d":
+            var tom1 = new Audio("sounds/tom-1.mp3");
+            tom1.play();
+        break;
+
+        case "j":
+            var tom2 = new Audio("sounds/tom-2.mp3");
+            tom2.play();
+        break;
+
+        case "k":
+            var tom3 = new Audio("sounds/tom-3.mp3");
+            tom3.play();
+        break;
+
+        case "l":
+            var tom4 = new Audio("sounds/tom-4.mp3");
+            tom4.play();
+        break;
+
+
+        default:console.log(innerHTML);
+            break;
+    }
+
+
+}
+ function buttonanimation(currentkey){
+
+
+    var activebutton = document.querySelector("." + currentkey);
+
+    activebutton.classList.add("pressed");
+
+    setTimeout (function(){
+    activebutton.classList.remove("pressed");
+    },100);
+
+
+}
+}
+
+
+
+

Games/keyboard_kit_game/styles.css

@@ -0,0 +1,82 @@
+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/crash.png");
+}
+
+.a {
+  background-image: url("images/kick.png");
+
+}
+
+.s {
+  background-image: url("images/snare.png");
+}
+
+.d {
+  background-image: url("images/tom1.png");
+}
+
+.j {
+  background-image: url("images/tom2.png");
+}
+
+.k {
+  background-image: url("images/tom3.png");
+}
+
+.l {
+  background-image: url("images/tom4.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;
+}