adding unword it game

kunjgit · Jul 24, 2024 · d273681 · d273681
1 parent 1c6cb2b
commit d273681
Show file tree

Hide file tree

Showing 10 changed files with 350 additions and 0 deletions.
diff --git a/Games/Unword_it/asset/Images/Unword_It_gameplay.png b/Games/Unword_it/asset/Images/Unword_It_gameplay.png
diff --git a/Games/Unword_it/asset/Images/Unword_It_landing.png b/Games/Unword_it/asset/Images/Unword_It_landing.png
diff --git a/Games/Unword_it/asset/Images/Unword_It_reveal_letter.png b/Games/Unword_it/asset/Images/Unword_It_reveal_letter.png
diff --git a/Games/Unword_it/asset/Images/Unword_It_successful_guess.png b/Games/Unword_it/asset/Images/Unword_It_successful_guess.png
diff --git a/Games/Unword_it/asset/Images/Unword_It_times_up.png b/Games/Unword_it/asset/Images/Unword_It_times_up.png
diff --git a/Games/Unword_it/asset/Images/desktop.ini b/Games/Unword_it/asset/Images/desktop.ini
@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+Screenshot 2024-07-24 100130.png=@Screenshot 2024-07-24 100130,0
diff --git a/Games/Unword_it/index.html b/Games/Unword_it/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>unwordIT - Jumbled Word Charades</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>Unword It</h1>
+        <div class="game-board">
+            <div id="word-display"></div>
+            <div id="timer">30</div>
+            <button id="start-button">Start Game</button>
+            <button id="reveal-letter">Reveal Letter (-1 point)</button>
+            <div class="guess-container">
+                <input type="text" id="guess-input" placeholder="Enter your guess" disabled>
+                <button id="submit-guess" disabled>Submit Guess</button>
+            </div>
+        </div>
+        <div class="team-scores">
+            <div class="team" id="team1">
+                <h2>Team 1</h2>
+                <p>Score: <span id="team1-score">0</span></p>
+            </div>
+            <div class="team" id="team2">
+                <h2>Team 2</h2>
+                <p>Score: <span id="team2-score">0</span></p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Unword_it/readme.md b/Games/Unword_it/readme.md
@@ -0,0 +1,49 @@
+# unwordIT - Jumbled Word Charades
+
+## Description
+
+unwordIT is a modern, digital twist on the classic game of charades. In this game, players are presented with jumbled words and must describe them to their teammates without using the word itself. The opposing team then tries to guess the word based on the description. This game combines word skills, quick thinking, and team cooperation in a unique, challenging format.
+
+## Features
+
+- Jumbled word display
+- 30-second timer per round
+- Two-team scoring system
+- "Reveal Letter" option (costs 1 point)
+- Guess input and submission
+- Alternating turns between teams
+- Random word selection from a predefined list
+- Responsive design for both desktop and mobile devices
+- Dark, modern user interface
+
+## How to Play
+
+1. Start the game by clicking the "Start Game" button.
+2. The active team sees a jumbled version of the word.
+3. The active team describes the word without using the word itself or any part of it.
+4. The opposing team tries to guess the word within 30 seconds.
+5. If needed, the active team can reveal a letter (at the cost of 1 point) using the "Reveal Letter" button.
+6. The opposing team can submit their guess using the input field and "Submit Guess" button.
+7. Points are awarded for correct guesses or when time runs out.
+8. Teams alternate turns.
+
+## Installation
+
+1. Clone this repository .
+```bash
+  clone git https://github.com/kunjgit/GameZone/tree/main/Games/Unword_It
+```
+2. Open the `index.html` file in a web browser to start the game.
+
+## Credits
+
+Developed by @Shantnu-singh
+
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript (ES6+)
+
+Feel free to fork this project and customize it to your liking. Enjoy playing Unword It!
diff --git a/Games/Unword_it/script.js b/Games/Unword_it/script.js
@@ -0,0 +1,116 @@
+const wordDisplay = document.getElementById('word-display');
+const timerDisplay = document.getElementById('timer');
+const startButton = document.getElementById('start-button');
+const revealLetterButton = document.getElementById('reveal-letter');
+const team1Score = document.getElementById('team1-score');
+const team2Score = document.getElementById('team2-score');
+const guessInput = document.getElementById('guess-input');
+const submitGuessButton = document.getElementById('submit-guess');
+
+let currentWord = '';
+let jumbledWord = '';
+let timer;
+let currentTeam = 1;
+let scores = [0, 0];
+let revealedIndices = [];
+
+const words = [
+    'sunshine', 'butterfly', 'telephone', 'computer', 'elephant',
+    'umbrella', 'chocolate', 'football', 'restaurant', 'fireworks'
+];
+
+function getRandomWord() {
+    return words[Math.floor(Math.random() * words.length)];
+}
+
+function jumbleWord(word) {
+    return word.split('').sort(() => Math.random() - 0.5).join('');
+}
+
+function updateScores() {
+    team1Score.textContent = scores[0];
+    team2Score.textContent = scores[1];
+}
+
+function startGame() {
+    currentWord = getRandomWord();
+    jumbledWord = jumbleWord(currentWord);
+    wordDisplay.textContent = `Jumbled: ${jumbledWord}`;
+    revealedIndices = [];
+    startTimer();
+    startButton.disabled = true;
+    revealLetterButton.disabled = false;
+    guessInput.disabled = false;
+    submitGuessButton.disabled = false;
+}
+
+function startTimer() {
+    let timeLeft = 30;
+    timerDisplay.textContent = timeLeft;
+    timer = setInterval(() => {
+        timeLeft--;
+        timerDisplay.textContent = timeLeft;
+        if (timeLeft === 0) {
+            clearInterval(timer);
+            endRound(false);
+        }
+    }, 1000);
+}
+
+function endRound(guessedCorrectly) {
+    clearInterval(timer);
+    if (guessedCorrectly) {
+        scores[currentTeam - 1]++;
+        wordDisplay.textContent = `Correct! Team ${currentTeam} guessed the word: ${currentWord}`;
+    } else {
+        scores[currentTeam % 2]++;
+        wordDisplay.textContent = `Time's up! The word was: ${currentWord}`;
+    }
+    updateScores();
+    currentTeam = currentTeam % 2 + 1;
+    startButton.disabled = false;
+    revealLetterButton.disabled = true;
+    guessInput.disabled = true;
+    submitGuessButton.disabled = true;
+    guessInput.value = '';
+}
+
+function revealLetter() {
+    if (revealedIndices.length < currentWord.length) {
+        let index;
+        do {
+            index = Math.floor(Math.random() * currentWord.length);
+        } while (revealedIndices.includes(index));
+
+        revealedIndices.push(index);
+
+        const revealedWord = currentWord.split('').map((char, i) => 
+            revealedIndices.includes(i) ? char : '_'
+        ).join('');
+
+        wordDisplay.textContent = `Jumbled: ${jumbledWord} | Revealed: ${revealedWord}`;
+        scores[currentTeam - 1]--;
+        updateScores();
+
+        if (revealedIndices.length === currentWord.length) {
+            endRound(false);
+        }
+    }
+}
+
+function submitGuess() {
+    const guess = guessInput.value.trim().toLowerCase();
+    if (guess === currentWord.toLowerCase()) {
+        endRound(true);
+    } else {
+        guessInput.value = '';
+        alert('Incorrect guess. Try again!');
+    }
+}
+
+startButton.addEventListener('click', startGame);
+revealLetterButton.addEventListener('click', revealLetter);
+submitGuessButton.addEventListener('click', submitGuess);
+
+// Initialize scores
+updateScores();
diff --git a/Games/Unword_it/style.css b/Games/Unword_it/style.css
@@ -0,0 +1,147 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #1a1a2e;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 800px;
+    width: 90%;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 3rem;
+    color: #4ecca3;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    margin-bottom: 30px;
+}
+
+.game-board {
+    background-color: #16213e;
+    border-radius: 10px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+#word-display {
+    font-size: 24px;
+    margin-bottom: 20px;
+    min-height: 60px;
+    background-color: #0f3460;
+    border-radius: 5px;
+    padding: 15px;
+    word-wrap: break-word;
+}
+
+#timer {
+    font-size: 36px;
+    font-weight: bold;
+    color: #e94560;
+    margin-bottom: 20px;
+}
+
+button {
+    background-color: #4ecca3;
+    border: none;
+    color: #1a1a2e;
+    padding: 12px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 8px 4px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #45b393;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+button:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+#reveal-letter {
+    background-color: #e94560;
+    color: #ffffff;
+}
+
+#reveal-letter:hover {
+    background-color: #d64058;
+}
+
+.guess-container {
+    margin-top: 20px;
+}
+
+#guess-input {
+    padding: 12px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    margin-right: 10px;
+    background-color: #0f3460;
+    color: #ffffff;
+    width: 60%;
+    max-width: 300px;
+}
+
+#guess-input::placeholder {
+    color: #a0a0a0;
+}
+
+#submit-guess {
+    background-color: #0f3460;
+    color: #ffffff;
+}
+
+#submit-guess:hover {
+    background-color: #0c2b4e;
+}
+
+.team-scores {
+    display: flex;
+    justify-content: space-around;
+}
+
+.team {
+    background-color: #16213e;
+    border-radius: 10px;
+    padding: 20px;
+    width: 45%;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#team1 {
+    border-left: 5px solid #4ecca3;
+}
+
+#team2 {
+    border-left: 5px solid #e94560;
+}
+
+@media (max-width: 600px) {
+    .team-scores {
+        flex-direction: column;
+    }
+
+    .team {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		[LocalizedFileNames]
		Screenshot 2024-07-24 100130.png=@Screenshot 2024-07-24 100130,0