Merge pull request #4765 from TiwariRahul16/main

Adding new game: guess the friend name
kunjgit · Jul 11, 2024 · 7871a2e · 7871a2e
2 parents e01d660 + 16f354b
commit 7871a2e
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 0 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);
+  }
+