Merge pull request #4561 from tanishaprasad/main

Added Mathematics Escape Room Game
kunjgit · Jul 6, 2024 · a76548a · a76548a
2 parents 671a572 + 4993e23
commit a76548a
Show file tree

Hide file tree

Showing 8 changed files with 307 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Games/MathematicsEscapeRoom/MathematicsEscapeRoom.mp4 b/Games/MathematicsEscapeRoom/MathematicsEscapeRoom.mp4
diff --git a/Games/MathematicsEscapeRoom/README.md b/Games/MathematicsEscapeRoom/README.md
@@ -0,0 +1,44 @@
+# Mathematics Escape Room Game
+
+Welcome to the Mathematics Escape Room game! Test your math skills and solve puzzles to escape from each room. Each room presents a new mathematical challenge that you must solve to progress to the next room. Are you ready for the challenge?
+
+## Features
+
+- **Interactive Puzzles:** Solve math puzzles to find the key and progress to the next room.
+- **Engaging Gameplay:** Each room presents a unique mathematical challenge.
+- **Dynamic Interface:** Enjoy a visually appealing interface with an animated background and interactive elements.
+
+## How to Play
+
+### Starting the Game
+
+1. Open `index.html` in your web browser.
+
+### Game Interface
+
+- You will see the game title and the current room description.
+- Enter your answer in the input box provided.
+- Click the "Check Answer" button or press Enter to submit your answer.
+
+### Solving Puzzles
+
+- Each room presents a math puzzle.
+- Enter the correct answer to unlock the next room.
+- If the answer is correct, you will proceed to the next room. If not, try again!
+
+### Game Completion
+
+- Successfully escape from all rooms to complete the game.
+- A congratulatory message will appear when you finish all rooms.
+
+## Screenshots
+
+<br>
+![image](../../assets/images/MathematicsEscapeRoom.png)
+<br>
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript
diff --git a/Games/MathematicsEscapeRoom/index.html b/Games/MathematicsEscapeRoom/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mathematics Escape Room</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+   <div class="home_btn">
+        <a href="https://kunjgit.github.io/GameZone/">
+          <i style="color:white;" class="fas fa-home home-icon"></i>
+        </a>
+  </div>
+  <div class="container">
+    <h1 class="game-title">Mathematics Escape Room</h1>
+    <div id="room" class="room">
+      <p class="room-description">You are in Room 1. Solve the puzzle to find the key to Room 2!</p>
+      <input type="text" id="answer" class="answer-input" placeholder="Enter your answer">
+      <button id="check-btn" class="check-btn">Check Answer</button>
+      <p id="message" class="message"></p>
+    </div>
+  </div>
+  <div id="video-container">
+    <video autoplay loop muted>
+      <source src="MathematicsEscapeRoom.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+  </div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/MathematicsEscapeRoom/script.js b/Games/MathematicsEscapeRoom/script.js
@@ -0,0 +1,71 @@
+const roomDescription = document.querySelector('.room-description');
+const answerInput = document.getElementById('answer');
+const checkBtn = document.getElementById('check-btn');
+const message = document.getElementById('message');
+
+// Define puzzles and answers for each room
+const puzzles = [
+  { room: 1, question: 'What is 2 + 2?', answer: '4' },
+  { room: 2, question: 'What is 5 * 3?', answer: '15' },
+  { room: 3, question: 'What is 8 - 3?', answer: '5' },
+  { room: 4, question: 'What is 10 / 2?', answer: '5' },
+  { room: 5, question: 'What is 4 * 6?', answer: '24' },
+  { room: 6, question: 'What is 12 + 7?', answer: '19' },
+  { room: 7, question: 'What is 15 - 9?', answer: '6' },
+  { room: 8, question: 'What is 18 / 3?', answer: '6' },
+  { room: 9, question: 'What is 9 * 9?', answer: '81' },
+  { room: 10, question: 'What is 25 - 12?', answer: '13' },
+  { room: 11, question: 'What is 30 / 5?', answer: '6' },
+  { room: 12, question: 'What is 11 * 4?', answer: '44' },
+  { room: 13, question: 'What is 45 - 27?', answer: '18' },
+  { room: 14, question: 'What is 64 / 8?', answer: '8' },
+  { room: 15, question: 'What is 16 * 3?', answer: '48' },
+  { room: 16, question: 'What is 72 + 18?', answer: '90' },
+  { room: 17, question: 'What is 100 - 85?', answer: '15' },
+  { room: 18, question: 'What is 144 / 12?', answer: '12' },
+  { room: 19, question: 'What is 25 * 5?', answer: '125' },
+  { room: 20, question: 'What is 99 - 64?', answer: '35' },
+];
+
+let currentRoom = 0;
+
+function displayRoom() {
+  const currentPuzzle = puzzles[currentRoom];
+  roomDescription.textContent = `You are in Room ${currentPuzzle.room}. ${currentPuzzle.question}`;
+  answerInput.value = '';
+  answerInput.focus();
+}
+
+function checkAnswer() {
+  const userAnswer = answerInput.value.trim().toLowerCase();
+  const currentPuzzle = puzzles[currentRoom];
+
+  if (userAnswer === currentPuzzle.answer.toLowerCase()) {
+    message.textContent = 'Correct answer! Moving to the next room...';
+    message.style.color = '#008000'; // Green color for correct answer message
+
+    // Move to the next room
+    currentRoom++;
+    if (currentRoom < puzzles.length) {
+      setTimeout(displayRoom, 1000); // Display next room after 1 second
+    } else {
+      roomDescription.textContent = 'Congratulations! You have escaped from all the rooms!';
+      answerInput.style.display = 'none';
+      checkBtn.style.display = 'none';
+    }
+  } else {
+    message.textContent = 'Oops! Wrong answer. Try again!';
+    message.style.color = '#ff0000'; // Red color for wrong answer message
+  }
+}
+
+checkBtn.addEventListener('click', checkAnswer);
+answerInput.addEventListener('keydown', function(event) {
+  if (event.key === 'Enter') {
+    checkAnswer();
+  }
+});
+
+// Start the game by displaying the first room
+displayRoom();
+
diff --git a/Games/MathematicsEscapeRoom/style.css b/Games/MathematicsEscapeRoom/style.css
@@ -0,0 +1,154 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet');
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  overflow: hidden; 
+  position: relative; 
+  background-color: #000; /* Fallback color in case video doesn't load */
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+.home_btn{
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1000;
+}
+.home_btn i {
+    font-size: 2em;
+  }
+.container {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.game-title {
+  font-family: 'Press Start 2P', sans-serif; 
+  font-size: 2rem;
+  font-weight:bolder;
+  margin:40px 20px;
+  color: #fd04c7;
+  transition: color 0.3s ease, transform 0.5s ease; 
+  animation: bounce 1s infinite alternate;
+}
+
+.game-title:hover {
+  color: #89eef1; 
+  transform: scale(1.1); 
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(1); 
+  }
+  100% {
+    transform: scale(1.05); 
+  }
+}
+
+.room {
+  background-color: rgba(255, 255, 255, 0.7);
+  padding: 20px;
+  border-radius: 8px;
+  animation: fade-in 0.5s ease;
+  height: 50vh;
+  width:80vh; 
+  display: flex;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.room-description {
+  font-size: 28px;
+  margin-bottom: 20px;
+  color: #0c0c0c;
+  font-weight: bolder;
+}
+
+.answer-input {
+  margin-bottom: 10px;
+  padding: 8px;
+  width: 500px;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+.check-btn {
+  font-family: 'Orbitron', sans-serif;
+  padding: 10px 20px;
+  background-color: #130831; 
+  color: #eeeeee;
+  margin-top: 20px;
+  border: 2px solid #1b1464; 
+  border-radius: 20px; 
+  font-size: 16px; 
+  cursor: pointer;
+  font-weight: bolder;
+  transition: background-color 0.3s ease, color 0.3s ease; 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+}
+
+.check-btn:hover {
+  background-color: #9df0d4;
+  color: #1b1464; 
+  transform: scale(1.05);
+}
+
+.check-btn:active {
+  transform: translateY(2px); 
+}
+
+.message {
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ff0000;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#video-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+}
+video {
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/README.md b/README.md
@@ -823,6 +823,7 @@ This repository also provides one such platforms where contributers come over an
 |[Math_Race_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Math_Race_Game)|
 | [Bunny is Lost](https://github.com/kunjgit/GameZone/tree/main/Games/Bunny_is_Lost)|
 |[Steam_Punk](https://github.com/kunjgit/GameZone/tree/main/Games/Steam_Punk)|
+| [Mathematics Escape Room](https://github.com/kunjgit/GameZone/tree/main/Games/MathematicsEscapeRoom) |
 |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game) | | [Ant Smasher Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ant_Smasher)|
 |[Mario Matching Game](https://github.com/ananyag309/GameZone_ggsoc/tree/main/Games/MarioMatchingGame)|
 |[Dot_Dash](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Dash)|
@@ -843,6 +844,7 @@ This repository also provides one such platforms where contributers come over an
 | [Tic_Tac_Toe_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_Tac_Toe_Neon) |
 | [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) |
 
+
  </center>
 
 <br>

diff --git a/assets/images/MathematicsEscapeRoom.png b/assets/images/MathematicsEscapeRoom.png