Merge branch 'main' of https://github.com/Maana-Ajmera/GameZone into …

…game/ninja-hattori
nikki-05 · Jul 13, 2024 · 598486a · 598486a
2 parents aad2b5c + 7fe7854
commit 598486a
Show file tree

Hide file tree

Showing 16 changed files with 1,112 additions and 2 deletions.
diff --git a/Games/Guess_the_friends_name/Readme.md b/Games/Guess_the_friends_name/Readme.md
@@ -0,0 +1,39 @@
+# **Guess_the_friends_name**
+
+---
+
+<br>
+
+## **Description 📃** 
+- Gameplay Overview: In “Guess the Friend's Name” players embark on a journey of memory and luck. player enters the names of four close friends into the game. The game then generates a random name from the list, and the player must use their intuition and knowledge about their friends to guess which name has been chosen.
+
+## **functionalities 🎮** 
+- random name generation
+- fully responsive design
+- user friendly
+- assessment availability
+<br>
+
+## **How to play? 🕹️**
+
+How to Play:
+
+-Enter Names: Start by typing in the names of four friends you know well.
+
+-Make Your Guess: Your task is to select the name you believe the game randomly chose.
+
+-Reveal & Score: After making your selection,If your guess was right, you score points; if not, better luck next time!
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](images/guess_name.png)
+
+![image](images/Name.png)
+
+<br>
+
+## **Working video 📹**
diff --git a/Games/Guess_the_friends_name/images/Name.png b/Games/Guess_the_friends_name/images/Name.png
diff --git a/Games/Guess_the_friends_name/images/guess_name.png b/Games/Guess_the_friends_name/images/guess_name.png
diff --git a/Games/Guess_the_friends_name/index.html b/Games/Guess_the_friends_name/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess the Friend Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Guess the Friend's Name</h1>
+        <div class="input-section">
+            <div class="box-input">
+                <div class="border">
+                    <input type="text" class="input" id="friend1" placeholder="Enter friend 1 name">
+                    <input type="text" class="input" id="friend2" placeholder="Enter friend 2 name">
+                    <input type="text" class="input" id="friend3" placeholder="Enter friend 3 name">
+                    <input type="text" class="input" id="friend4" placeholder="Enter friend 4 name">
+                </div>
+            </div>
+            <button onclick="startGame()">Start Game</button>
+        </div>
+        <div class="game-section" style="display: none;">
+            <p>Guess the name of one friend:</p>
+            <div class="box-input">
+                <div class="border">
+                    <input type="text" id="guess" class="input" placeholder="Enter your guess">
+                </div>
+            </div>
+            <button onclick="makeGuess()">Submit Guess</button>
+            <button onclick="exitGame()">Exit Game</button>
+            <p id="result"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Guess_the_friends_name/script.js b/Games/Guess_the_friends_name/script.js
@@ -0,0 +1,37 @@
+let friends = [];
+
+function startGame() {
+    friends = [
+        document.getElementById('friend1').value,
+        document.getElementById('friend2').value,
+        document.getElementById('friend3').value,
+        document.getElementById('friend4').value
+    ];
+
+    if (friends.some(name => name === '')) {
+        alert('Please enter all four friend names.');
+        return;
+    }
+
+    document.querySelector('.input-section').style.display = 'none';
+    document.querySelector('.game-section').style.display = 'block';
+}
+
+function makeGuess() {
+    const guess = document.getElementById('guess').value;
+    const randomFriend = friends[Math.floor(Math.random() * friends.length)];
+
+    if (guess === randomFriend) {
+        document.getElementById('result').textContent = `You guessed right! The name was ${randomFriend}.`;
+    } else {
+        document.getElementById('result').textContent = 'Try again!';
+    }
+}
+
+function exitGame() {
+    document.querySelector('.game-section').style.display = 'none';
+    document.querySelector('.input-section').style.display = 'block';
+    document.getElementById('result').textContent = '';
+    document.getElementById('guess').value = '';
+    friends = [];
+}
diff --git a/Games/Guess_the_friends_name/styles.css b/Games/Guess_the_friends_name/styles.css
@@ -0,0 +1,93 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    text-align: center;
+    padding: 50px;
+}
+
+.container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+}
+
+
+button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #218838;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2em;
+}
+
+#guess{
+    width:100%;
+}
+
+.box-input {
+    position: relative;
+  }
+
+  .border {
+    background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
+    box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5),
+      25px -10px 30px -5px rgba(255, 0, 212, 0.5),
+      25px 10px 30px -5px rgba(255, 174, 0, 0.5),
+      -25px 10px 30px -5px rgba(255, 230, 0, 0.5);
+    padding: 4px;
+  }
+
+  .input {
+    background-color: #212121;
+    max-width: 250px;
+    height: 40px;
+    padding: 0 19px 0 10px;
+    font-size: 1.1em;
+    position: relative;
+    border: none;
+    color: white;
+    outline: 0;
+    overflow: hidden;
+  }
+
+  .box-input::after,
+  .box-input::before {
+    content: "";
+    width: 0px;
+    height: 30px;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .box-input::after {
+    bottom: 0;
+    right: 0;
+  }
+
+  .box-input::before {
+    top: 0;
+    left: 0;
+  }
+
+  .input::placeholder {
+    transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s;
+  }
+
+  .input:focus::placeholder {
+    padding-left: 165px;
+    transform: translateY(-50px);
+  }
+
diff --git a/Games/Hexsweep-Game/README.md b/Games/Hexsweep-Game/README.md
@@ -0,0 +1,31 @@
+# 🎮 Hex Sweep Game
+
+Welcome to Hex Sweep, a fun and challenging Minesweeper-inspired game! 🕹️
+
+## 🎯 Game Description
+
+Hex Sweep is a twist on the classic Minesweeper game. Instead of a rectangular grid, you'll navigate through a hexagonal grid, searching for hidden mines. Your goal is to uncover all the hexagons that don't contain mines without triggering any of the mines. Can you sweep the board clean without detonating a mine? 💥
+
+## 🚀 How to Play
+
+1. **Objective:** Uncover all hexagons without hitting a mine.
+2. **Controls:**
+   - **Left-click:** Uncover a hexagon.
+   - **Right-click:** Place a flag on a hexagon to mark it as a suspected mine.
+3. **Rules:**
+   - If you uncover a hexagon with a mine, the game is over. 💣
+   - If you uncover all hexagons without mines, you win the game. 🏆
+   - Use the numbers on uncovered hexagons to help you figure out where the mines are. Each number indicates how many mines are adjacent to that hexagon.
+
+## 🌟 Features
+
+- **Hexagonal Grid:** Navigate through a unique hexagonal grid layout.
+- **Dynamic Gameplay:** Each game generates a new board with random mine placements.
+- **Timer:** Track how long it takes you to complete the game. ⏱️
+- **Flagging:** Mark suspected mines with flags to help keep track of dangerous spots. 🚩
+- **Responsive Design:** Play comfortably on any device, thanks to a responsive and colorful design.
+- **Game Over Popup:** Receive a popup message with the option to play again when the game is over. 📢
+
+## 🎨 Colorful Design
+
+Hex Sweep features a vibrant and colorful design, making the game visually appealing and fun to play. 🌈
diff --git a/Games/Hexsweep-Game/index.html b/Games/Hexsweep-Game/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hex Sweep Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Hex Sweep</h1>
+        <div id="game"></div>
+        <div class="info">
+            <p>Flags: <span id="flag-count">0</span></p>
+            <p>Mines: <span id="mine-count">10</span></p>
+            <p>Time: <span id="timer">0</span> seconds</p>
+        </div>
+    </div>
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <p id="popup-message"></p>
+            <button id="popup-button">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>