From e0bf74052997e4e97db887d5b4022a3644beb37f Mon Sep 17 00:00:00 2001 From: jaydeep099 Date: Fri, 7 Jun 2024 10:40:32 +0530 Subject: [PATCH] added restart button and enhanced text style and size --- Games/Tilting_Maze/index.html | 23 +++++++++++++++-------- Games/Tilting_Maze/script.js | 8 +++++++- Games/Tilting_Maze/style.css | 29 +++++++++++++++++++++++++---- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/Games/Tilting_Maze/index.html b/Games/Tilting_Maze/index.html index deca918994..d721528de9 100644 --- a/Games/Tilting_Maze/index.html +++ b/Games/Tilting_Maze/index.html @@ -8,13 +8,17 @@ Tilting Maze - - -
-
+ + + +
+ + + +
+ + +
@@ -31,6 +35,7 @@

Instructions:

Click the joystick to start!

Move every ball to the center. Ready for hard mode? Press H

+
@@ -38,4 +43,6 @@

Instructions:

How to simulate ball movement in a maze with JavaScript
- \ No newline at end of file + + + \ No newline at end of file diff --git a/Games/Tilting_Maze/script.js b/Games/Tilting_Maze/script.js index 89c9eba2af..f292d19c64 100644 --- 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; } - } \ No newline at end of file + } + const restartBtn = document.getElementById("restart-btn"); + + + restartBtn.addEventListener("click", function() { + resetGame(); + }); \ No newline at end of file diff --git a/Games/Tilting_Maze/style.css b/Games/Tilting_Maze/style.css index 918af7e892..626bb8e2e1 100644 --- 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; } -} \ No newline at end of file +} +#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); +}