Merge pull request #4310 from jaydeep099/jaydeep099

added restart button and enhanced text style and size
kunjgit · Jun 12, 2024 · 1018627 · 1018627
2 parents af94d8b + e0bf740
commit 1018627
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/Games/Tilting_Maze/index.html b/Games/Tilting_Maze/index.html
@@ -8,13 +8,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tilting Maze</title>
   <link rel="icon" href="/assets/images/Tilting_Maze.png">
-<link rel="stylesheet" href="style.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-<div style="text-align: left; margin-left: 40px;
-margin-top: 30px;
-font-size: 30px;
-padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
-<div id="center">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+  <div style="text-align: left; margin-left: 40px; margin-top: 30px; font-size: 30px; padding: 5px;">
+    <a href="https://kunjgit.github.io/GameZone/">
+      <i style="color:black;" class="fas fa-home home-icon"></i>
+    </a>
+  </div>
+</head>
+<body>
+  <div id="center">
     <div id="game">
       <div id="maze">
         <div id="end"></div>
@@ -31,11 +35,14 @@ <h3><b>Instructions:</b></h3>
         Click the joystick to start!
         <p>Move every ball to the center. Ready for hard mode? Press H</p>
       </div>
+      <button id="restart-btn">Restart</button>
     </div>
   </div>
 
   <div id="youtube-card">
     How to simulate ball movement in a maze with JavaScript
   </div>
 
-  <script src="script.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Tilting_Maze/script.js b/Games/Tilting_Maze/script.js
@@ -679,4 +679,10 @@ Math.minmax = (value, limit) => {
         gameInProgress = false;
       } else throw error;
     }
-  }
+  }
+  const restartBtn = document.getElementById("restart-btn");
+
+
+  restartBtn.addEventListener("click", function() {
+    resetGame(); 
+  });
diff --git a/Games/Tilting_Maze/style.css b/Games/Tilting_Maze/style.css
@@ -6,9 +6,9 @@ body {
   --joystick-head-color: #f06449;
   --ball-color: #f06449;
   --end-color: #7d82b8;
-  --text-color: #210124;
-
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  --text-color: #210124;  
+  font-size:100%;
+  font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: var(--background-color);
 }
 
@@ -265,4 +265,25 @@ a:visited {
     width: 300px;
     background-color: white;
   }
-}
+}
+#restart-btn {
+  background-color: var(--ball-color);
+  color: var(--background-color);
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+  display: block;
+}
+
+#restart-btn:hover {
+  background-color: var(--end-color);
+  transform: scale(1.05);
+}
+
+#restart-btn:active {
+  background-color: var(--joystick-head-color);
+  transform: scale(1);
+}