From 7fd13212d874c58fb8eacf695191f8eac02dc4c9 Mon Sep 17 00:00:00 2001 From: jaydeep099 Date: Wed, 5 Jun 2024 16:28:11 +0530 Subject: [PATCH] added restart button and enhanced text style and size --- Games/Tilting_Maze/index.html | 27 +++++++++++++++------------ Games/Tilting_Maze/script.js | 8 +++++++- Games/Tilting_Maze/style.css | 28 +++++++++++++++++++++++++--- 3 files changed, 47 insertions(+), 16 deletions(-) diff --git a/Games/Tilting_Maze/index.html b/Games/Tilting_Maze/index.html index deca918994..74982f1691 100644 --- a/Games/Tilting_Maze/index.html +++ b/Games/Tilting_Maze/index.html @@ -1,20 +1,22 @@ - - Tilting Maze - - -
-
+ + + +
+ + + +
+ + +
@@ -32,10 +34,11 @@

Instructions:

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

+
-
How to simulate ball movement in a maze with JavaScript
- - \ No newline at end of file + + + diff --git a/Games/Tilting_Maze/script.js b/Games/Tilting_Maze/script.js index 89c9eba2af..9f5df548e1 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..f1a18bc1ff 100644 --- 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; } -} \ 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); +}