added restart button and enhanced text style and size

kunjgit · Jun 5, 2024 · 7fd1321 · 7fd1321
1 parent 94d4e99
commit 7fd1321
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/Games/Tilting_Maze/index.html b/Games/Tilting_Maze/index.html
@@ -1,20 +1,22 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-
 <head>
   <meta charset="utf-8" />
-
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <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>
@@ -32,10 +34,11 @@ <h3><b>Instructions:</b></h3>
         <p>Move every ball to the center. Ready for hard mode? Press H</p>
       </div>
     </div>
+    <button id="restart-btn">Restart</button>
   </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
@@ -7,8 +7,8 @@ body {
   --ball-color: #f06449;
   --end-color: #7d82b8;
   --text-color: #210124;
-
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size:100%;
+  font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: var(--background-color);
 }
 
@@ -265,4 +265,26 @@ 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);
+}