Merge pull request #4188 from manishh12/Anagaram-word-game

Added Anagram-word-game
kunjgit · Jun 8, 2024 · 1883724 · 1883724
2 parents 9e6ddf4 + 9779ec5
commit 1883724
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 0 deletions.
diff --git a/Games/Anagram -Word-Game/README.md b/Games/Anagram -Word-Game/README.md
@@ -0,0 +1,43 @@
+# **Anagram Word Game**
+
+---
+
+<br>
+
+## **Description 📃**
+
+- Anagram Word Game is an engaging web-based game where players are challenged to unscramble a given set of letters to form a correct word. This game is designed to test and enhance players' vocabulary and cognitive skills in a fun and interactive way, providing an enjoyable gaming experience for all ages.
+
+## **Functionalities 🎮**
+
+- Presents players with a scrambled word.
+- Allows players to input their guessed word.
+- Provides instant feedback on the correctness of the guessed word.
+- Generates a new scrambled word for each game session.
+- Tracks and displays the player's score.
+- Features a sleek and intuitive user interface for seamless gaming.
+
+<br>
+
+## **How to play? 🕹️**
+
+1. Launch the Anagram Word Game in your browser.
+2. Observe the scrambled word presented on the screen.
+3. Enter your guess for the correct word into the provided input field.
+4. Click "Submit Guess" to verify your answer.
+5. If correct, you'll receive a confirmation message and your score will increase; otherwise, try again or click "Give Up" to reveal the correct word.
+6. Click "Next Word" to generate a new scrambled word and continue playing.
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/manishh12/GameZone/assets/97523900/c24e9b9f-fdf2-4d3f-87c3-b2780bd27063)
+
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+
+<br>
+
diff --git a/Games/Anagram -Word-Game/index.html b/Games/Anagram -Word-Game/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anagram Word Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Anagram Word Game</h1>
+        <div id="game-container">
+            <p id="scrambled-word"></p>
+            <input type="text" id="guess" placeholder="Enter your guess">
+            <button id="submit-guess">Submit Guess</button>
+            <button id="give-up">Give Up</button>
+            <p id="result-message"></p>
+            <button id="next-word">Next Word</button>
+        </div>
+        <div id="score-container">
+            <p>Score: <span id="score">0</span></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Anagram -Word-Game/script.js b/Games/Anagram -Word-Game/script.js
@@ -0,0 +1,52 @@
+const words = ["javascript", "python", "programming", "developer", "computer"];
+let currentWord = '';
+let scrambledWord = '';
+let score = 0;
+
+function scrambleWord(word) {
+    let scrambled = word.split('').sort(() => 0.5 - Math.random()).join('');
+    return scrambled;
+}
+
+function pickRandomWord() {
+    const randomIndex = Math.floor(Math.random() * words.length);
+    currentWord = words[randomIndex];
+    scrambledWord = scrambleWord(currentWord);
+    document.getElementById('scrambled-word').innerText = scrambledWord;
+}
+
+function checkGuess() {
+    const guess = document.getElementById('guess').value.toLowerCase();
+    if (guess === currentWord) {
+        document.getElementById('result-message').innerText = `Correct! The word was "${currentWord}".`;
+        score += 10;
+        document.getElementById('score').innerText = score;
+        document.getElementById('next-word').style.display = 'inline-block';
+        document.getElementById('submit-guess').disabled = true;
+        document.getElementById('give-up').disabled = true;
+    } else {
+        document.getElementById('result-message').innerText = "Incorrect, try again.";
+        score -= 2;
+        document.getElementById('score').innerText = score;
+    }
+}
+
+function giveUp() {
+    document.getElementById('result-message').innerText = `The correct word was "${currentWord}".`;
+    document.getElementById('next-word').style.display = 'inline-block';
+    document.getElementById('submit-guess').disabled = true;
+    document.getElementById('give-up').disabled = true;
+}
+
+document.getElementById('submit-guess').addEventListener('click', checkGuess);
+document.getElementById('give-up').addEventListener('click', giveUp);
+document.getElementById('next-word').addEventListener('click', () => {
+    document.getElementById('guess').value = '';
+    document.getElementById('result-message').innerText = '';
+    document.getElementById('next-word').style.display = 'none';
+    document.getElementById('submit-guess').disabled = false;
+    document.getElementById('give-up').disabled = false;
+    pickRandomWord();
+});
+
+pickRandomWord();
diff --git a/Games/Anagram -Word-Game/style.css b/Games/Anagram -Word-Game/style.css
@@ -0,0 +1,76 @@
+body {
+  font-family: 'Arial', sans-serif;
+  background: linear-gradient(135deg, #0f9997, #e9ecef);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.container {
+  text-align: center;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+}
+
+h1 {
+  margin-bottom: 20px;
+  color: #343a40;
+}
+
+#game-container {
+  margin-top: 20px;
+}
+
+#scrambled-word {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #007BFF;
+  font-weight: bold;
+}
+
+input {
+  padding: 10px;
+  margin: 5px;
+  font-size: 16px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  width: calc(100% - 22px);
+}
+
+button {
+  padding: 10px 15px;
+  margin: 5px;
+  font-size: 16px;
+  border: 1px solid #007BFF;
+  border-radius: 4px;
+  background-color: #007BFF;
+  color: white;
+  cursor: pointer;
+  width: calc(100% - 22px);
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+#result-message {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+#next-word {
+  display: none;
+  margin-top: 20px;
+}
+
+#score-container {
+  margin-top: 20px;
+  font-size: 18px;
+  color: #495057;
+}
diff --git a/README.md b/README.md
@@ -325,6 +325,10 @@ This repository also provides one such platforms where contributers come over an
 |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light)   |
 | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy)                  
+
+
+| [Anagarm-Word-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Anagarm-Word-Game) |
+
 | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) 
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|

diff --git a/assets/images/Anagram-Word-Game.jpeg b/assets/images/Anagram-Word-Game.jpeg