kunjgit · kunjgit · Jun 30, 2024 · Jun 19, 2024 · Jun 30, 2024
diff --git a/Games/ShroomKnight/README.md b/Games/ShroomKnight/README.md
@@ -0,0 +1,47 @@
+# ShroomKnight
+
+<br>
+
+## **Description 📃**
+"ShroomKnight" is an engaging web game where players control a fairy hero tasked with defending against invading spiders. The fairy combats the spiders by spawning mushrooms, which serve as automated defense units. These mushrooms shoot bullets at regular intervals, aiming to eliminate the approaching spiders before they reach the middle of the screen.  Enjoy the game!
+
+## **Functionalities 🎮**
+
+
+1. **Character: Fairy**
+   - **Abilities:**
+     - Movement: Navigate using arrow keys or 'W, A, S, D'.
+     - Spawning Mushrooms: Press spacebar to place mushrooms.
+     - Health System: Health bar, Auto Increasing Health
+     - Weapon Use: Mushrooms automatically shoot bullets.
+
+2. **Enemies: Spiders**
+   - **Types:**
+     - Basic Spiders: Slow, weak
+     - Fast Spiders: Quick, agile
+     - Special Spiders: Unique abilities (e.g., web-slinging, venomous)
+   - **Behavior:**
+     - Chasing, Attacking, Retreating 
+
+<br>
+
+## **How to Play? 🕹️**
+
+- Use arrow keys or 'W, A, S, D' to move the Fairy!
+- Press the spacebar to spawn mushrooms!
+
+<br>
+
+## **Bugs:**
+* Minor bug with multiple keys pressed movement (LEFT, UP, AND SHOOT).
+
+<br>
+
+## **Screenshots 📸**
+
+![Game image] <img src="../../assets/images/ShroomKnight.png">
+<br>
+
+
+<br>
+----------------
diff --git a/Games/ShroomKnight/css/app.css b/Games/ShroomKnight/css/app.css
@@ -0,0 +1,121 @@
+body {
+    background: #38e790;
+	margin: 0;
+	padding: 0;
+}
+
+canvas{
+	margin:0 10% 0 10%;
+    border: 3px solid #050101;
+}
+.Header{  
+    margin-top: 2rem;
+    margin-left: 30rem;
+    margin-bottom: 1rem;   
+    text-align: center;
+    font-family:  'Ubuntu', sans-serif;
+    font-size: 3vw;
+    color:rgb(247, 29, 18) 	;
+    display: flex;
+    justify-content: center;
+    border: 3px solid #f4faf7;
+    border-radius: 30px;
+    background-color: aqua;
+    width: 500px;
+
+
+}
+
+.instructions1 {
+    width:280px;
+    height:40px;
+    text-align: center;
+    margin-left:11rem;
+    margin-top:1rem;
+    float: left;
+    font-family: sans-serif;
+    color: #faf5f5; 
+    border: 4px solid hsl(0, 0%, 6%);
+    background-color: #c659ee;
+    border-radius: 30px;
+    font-family: 'Ubuntu', sans-serif;  
+}
+.instructions2 {
+    width:280px;
+    height:40px;
+    text-align: center;
+    margin-left:10rem;
+    margin-top:1rem;
+    float: left;
+    font-family: sans-serif;
+    color: #f4f4f4;
+    border: 4px solid hsl(0, 0%, 6%);
+    background-color: #c659ee;
+    border-radius: 30px;
+    font-family: 'Ubuntu', sans-serif;
+}
+.instructions3 {
+     width:250px;
+     height:40px;
+     text-align: center;
+     margin-left:11rem;
+     margin-top:1rem;   
+    float: left;
+    font-family: sans-serif;
+    color: #f4eeee;
+    border: 4px solid hsl(0, 0%, 6%);
+    background-color: #c659ee;
+    border-radius: 30px;
+    font-family: 'Ubuntu', sans-serif;    
+}
+
+.score {
+    width: 200px;
+    height: 30px;
+    text-align: center;
+    margin-left: 40rem;
+    margin-bottom: 1rem;
+    color: #050101;
+    font-size: 1.5em;
+    border: 3px solid #f41d1d;
+    background-color: #ecf413;
+    border-radius: 40px;
+    font-family: 'Ubuntu', sans-serif;
+
+}
+
+#game-over, #game-over-overlay {
+    margin:0 10% 0 10%;
+    width: 1200px;
+    height: 520px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 4.1em;
+    z-index: 1;
+    display: none;
+}
+
+#game-over-overlay {
+    background-color: black;
+    opacity: .5;
+}
+
+#game-over {
+    height: 350px;
+    text-align: center;
+    color: white;
+}
+
+#game-over h1 {
+    font-size: 3em;
+    font-family: sans-serif;
+}
+
+#game-over button {
+    font-size: 1.5em;
+}
+
+.red { 
+	color: red;
+}
diff --git a/Games/ShroomKnight/img/Background.png b/Games/ShroomKnight/img/Background.png
diff --git a/Games/ShroomKnight/img/bullet.png b/Games/ShroomKnight/img/bullet.png
diff --git a/Games/ShroomKnight/img/hero.png b/Games/ShroomKnight/img/hero.png
diff --git a/Games/ShroomKnight/img/spider.png b/Games/ShroomKnight/img/spider.png
diff --git a/Games/ShroomKnight/img/sprites.png b/Games/ShroomKnight/img/sprites.png
diff --git a/Games/ShroomKnight/img/terrain.png b/Games/ShroomKnight/img/terrain.png
diff --git a/Games/ShroomKnight/img/tower.png b/Games/ShroomKnight/img/tower.png
diff --git a/Games/ShroomKnight/index.html b/Games/ShroomKnight/index.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+
+  <div class ="Header">ShroomKnight</div>
+
+		<div class="score">  Your Score: <span id="score"></span>
+		</div>
+
+
+	<div id="game-over-overlay">
+    </div>
+
+    <div id="game-over">
+      <h1>GAME OVER</h1>
+      <button id="play-again">Play Again</button>
+    </div>
+
+    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/input.js"></script>
+    <script type="text/javascript" src="js/sprite.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+
+
+    <div class="instructions2">  
+			<div> <b>W / Up Arrow</b> - <span class="red">Move up</span> </div>
+			<div> <b>S / Down Arrow</b> - <span class="red">Move down</span> </div>
+		</div>
+
+    <div class="instructions3">
+    <div> <b>Space</b> - <span class="red">Spawn a Mushroom</span> </div>
+		</div>
+
+    <div class="instructions1">
+			<div> <b>A/left Arrow</b> - <span class="red">Move left</span> </div>
+			<div> <b>D/right Arrow</b> - <span class="red">Move right</span> </div>
+    </div>
+
+
+
+ </body>
+</html>