Merge pull request #5065 from DharshiBalasubramaniyam/Synonym-Symphony

Added Synonym symphony game
kunjgit · Aug 4, 2024 · a2397e6 · a2397e6
2 parents 557add4 + 1348007
commit a2397e6
Show file tree

Hide file tree

Showing 11 changed files with 247 additions and 0 deletions.
diff --git a/Games/Synonym_Symphony/README.md b/Games/Synonym_Symphony/README.md
@@ -0,0 +1,25 @@
+# **Synonym Symphony game** 
+
+---
+
+<br>
+
+## **Description 📃**
+- The game will provide a word to the player. This word will be the starting point for finding synonyms.
+- The player inputs words they believe are synonyms of the given word.
+- There will be a countdown timer of 60s for limiting the time players have to enter synonyms.
+- For each valid synonym you will recieve 10 points.
+
+<br>
+
+## **Screenshots 📸**
+
+<br><img src="./images/image_01.png" alt="Image Description">
+<br>
+<img src="./images/image_02.png" alt="Image Description">
+<br>
+<img src="./images/image_03.png" alt="Image Description">
+<br>
+<img src="./images/image_04.png" alt="Image Description">
+<br>
+<img src="./images/image_05.png" alt="Image Description">
diff --git a/Games/Synonym_Symphony/images/image_01.png b/Games/Synonym_Symphony/images/image_01.png
diff --git a/Games/Synonym_Symphony/images/image_02.png b/Games/Synonym_Symphony/images/image_02.png
diff --git a/Games/Synonym_Symphony/images/image_03.png b/Games/Synonym_Symphony/images/image_03.png
diff --git a/Games/Synonym_Symphony/images/image_04.png b/Games/Synonym_Symphony/images/image_04.png
diff --git a/Games/Synonym_Symphony/images/image_05.png b/Games/Synonym_Symphony/images/image_05.png
diff --git a/Games/Synonym_Symphony/index.html b/Games/Synonym_Symphony/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>Synonym Symphony</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container start-container">
+        <h1>Synonym Symphony</h1>
+        <ul style="text-align: left;">
+            <li>The game will provide a word to the player. This word will be the starting point for finding synonyms.</li>
+            <li>The player inputs words they believe are synonyms of the given word.</li>
+            <li>There will be a countdown timer of 60s for limiting the time players have to enter synonyms.</li>
+            <li>For each valid synonym you will recieve 10 points.</li>
+        </ul>
+        <button onclick="startGame()">Start Game</button>
+    </div>
+    <div class="game-container play">
+        <h1>Synonym Symphony</h1>
+        <p id="word-display">Word: <span id="word">Happy</span></p>
+        <input type="text" id="synonym-input" placeholder="Enter a synonym">
+        <button onclick="checkSynonym()">Submit</button>
+        <p id="feedback"></p>
+        <p id="score">Score: 0</p>
+        <p id="user-provided"></p>
+        <p id="timer">Time Left: <span id="time">60</span>s</p>
+
+    </div>
+
+    <div class="game-container end-container">
+        <h1>Synonym Symphony</h1>
+        <p id="final-feedback"></p>
+        <button onclick="playAgain()">Play again</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Synonym_Symphony/script.js b/Games/Synonym_Symphony/script.js
@@ -0,0 +1,99 @@
+const words = {
+    "happy": ["joyful", "cheerful", "content", "pleased", "blissful"],
+    "angry": ["furious", "irate", "enraged", "mad", "annoyed"],
+    "sad": ["unhappy", "sorrowful", "melancholy", "gloomy", "mournful"],
+    "fast": ["quick", "speedy", "swift", "rapid", "brisk"],
+    "smart": ["intelligent", "clever", "bright", "sharp", "wise"],
+    "big": ["large", "huge", "gigantic", "massive", "enormous"],
+    "small": ["tiny", "little", "miniature", "compact", "petite"],
+    "strong": ["powerful", "sturdy", "robust", "tough", "solid"],
+    "weak": ["fragile", "frail", "feeble", "delicate", "brittle"],
+    "cold": ["chilly", "freezing", "icy", "frigid", "frosty"],
+    "hot": ["warm", "boiling", "scorching", "blazing", "fiery"],
+    "beautiful": ["gorgeous", "stunning", "lovely", "attractive", "radiant"],
+    "ugly": ["unattractive", "hideous", "unsightly", "plain", "homely"],
+    "brave": ["courageous", "fearless", "valiant", "bold", "heroic"],
+    "scared": ["afraid", "frightened", "terrified", "petrified", "panicked"],
+    "funny": ["humorous", "amusing", "hilarious", "comical", "entertaining"],
+    "boring": ["dull", "tedious", "uninteresting", "monotonous", "dry"]
+};
+
+
+let currentWord = "Happy";
+let score = 0;
+let timeLeft = 60;
+let interval;
+let userCorrectAnswer = [];
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelector(".start-container").style.display = "block"
+    document.querySelector(".play").style.display = "none"
+    document.querySelector(".end-container").style.display = "none"
+})
+
+function startGame() {
+    score = 0;
+    timeLeft = 60;
+    userCorrectAnswer = [];
+    document.getElementById("user-provided").innerText = "";
+    document.querySelector(".play").style.display = "block"
+    document.querySelector(".start-container").style.display = "none"
+    document.getElementById('score').innerText = "Score: " + score;
+    document.getElementById('time').innerText = timeLeft;
+    document.getElementById('feedback').innerText = "";
+    document.getElementById('synonym-input').value = "";
+    currentWord = getRandomWord();
+    document.getElementById('word').innerText = currentWord;
+    clearInterval(interval);
+    interval = setInterval(updateTimer, 1000);
+}
+
+function updateTimer() {
+    timeLeft--;
+    document.getElementById('time').innerText = timeLeft;
+    if (timeLeft <= 0) {
+        clearInterval(interval);
+        endGame();
+    }
+}
+
+function getRandomWord() {
+    const keys = Object.keys(words);
+    return keys[Math.floor(Math.random() * keys.length)];
+}
+
+function checkSynonym() {
+    const input = document.getElementById('synonym-input').value.trim().toLowerCase();
+    if (input == "") {
+        alert("Please enter a synonym!")
+        return;
+    }
+    if (words[currentWord].includes(input)) {
+        if (userCorrectAnswer.includes(input)) {
+            document.getElementById('feedback').innerText = `You have already entered "${input}". Try again!`;
+            return;
+        }
+        score += 10;
+        userCorrectAnswer.push(input);
+        document.getElementById("user-provided").innerText = "Your answers - " + userCorrectAnswer.toString();
+        document.getElementById('feedback').innerText = `"${input}" is correct! +10 points`;
+    } else {
+        document.getElementById('feedback').innerText = `"${input}" is not a synonym. Try again!`;
+    }
+    document.getElementById('score').innerText = "Score: " + score;
+    document.getElementById('synonym-input').value = "";
+}
+
+function endGame() {
+    document.querySelector(".play").style.display = "none"
+    document.querySelector(".end-container").style.display = "block"
+    document.querySelector(".start-container").style.display = "none"
+    document.getElementById('final-feedback').innerText = `Time's up! Your final score is ${score}.`;
+    userCorrectAnswer
+}
+
+function playAgain() {
+    document.querySelector(".play").style.display = "none"
+    document.querySelector(".end-container").style.display = "none"
+    document.querySelector(".start-container").style.display = "block"
+    userCorrectAnswer = []
+}
diff --git a/Games/Synonym_Symphony/styles.css b/Games/Synonym_Symphony/styles.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 15px;
+    background-color: #4b0082;
+}
+
+.game-container {
+    text-align: center;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: none;
+    background-color: #3f026b;
+    min-width: 500px;
+}
+.game-container h1 {
+    font-size: 20px;
+    margin-bottom: 15px;
+    color: #d9a4ff;
+}
+#synonym-input {
+    width: 80%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+li {
+    font-size: 15px;
+    color: whitesmoke;
+    margin-bottom: 10px;
+}
+button {
+    padding: 10px 20px;
+    background-color: #ac37ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 15px;
+}
+
+button:hover {
+    background-color: #9a0cff;
+}
+
+#feedback {
+    margin-top: 10px;
+    font-weight: bold;
+}
+
+#score, #timer {
+    margin-top: 15px;
+}
+p {
+    font-size: 16px;
+    color: white;
+}
+#score {
+    color: #31c139;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+#final-feedback {
+    font-size: 16px;
+}
+#user-provided {
+    font-size: 13px;
+    color: yellow;
+}
diff --git a/README.md b/README.md
@@ -1670,6 +1670,7 @@ This repository also provides one such platforms where contributers come over an
 
 | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)|
 |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)|
+|[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)|
 
  </center>
 

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