kunjgit · kunjgit · Aug 5, 2024 · Aug 4, 2024 · Aug 4, 2024 · Aug 4, 2024
diff --git a/Games/Sentence_Scramble/README.md b/Games/Sentence_Scramble/README.md
@@ -0,0 +1,22 @@
+# **Sentence Scramble Game** 
+
+---
+
+<br>
+
+## **Description 📃**
+1. Select difficulty level. According to the level you will recieve 5 sentences to arrange.
+2. Unscramble the sentence.
+3. Type your answer and click "Check Answer."
+4. You have 60 seconds per sentence.<br>
+5. Complete all 5 sentences to finish the game.
+
+<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">
diff --git a/Games/Sentence_Scramble/images/image_01.png b/Games/Sentence_Scramble/images/image_01.png
diff --git a/Games/Sentence_Scramble/images/image_02.png b/Games/Sentence_Scramble/images/image_02.png
diff --git a/Games/Sentence_Scramble/images/image_03.png b/Games/Sentence_Scramble/images/image_03.png
diff --git a/Games/Sentence_Scramble/index.html b/Games/Sentence_Scramble/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sentence Scramble Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="start" class="section">
+        <h1>Sentence Scramble Game</h1>
+        <p class="rules">
+            <strong>Rules:</strong><br>
+            1. Unscramble the sentence.<br>
+            2. Type your answer and click "Check Answer."<br>
+            3. You have 60 seconds per sentence.<br>
+            4. Complete all 5 sentences to finish the game.
+        </p>
+        <p>Select difficulty level:</p>
+        <select id="difficulty">
+            <option value="easy">Easy</option>
+            <option value="medium">Medium</option>
+            <option value="hard">Hard</option>
+        </select><br>
+        <button id="start-game">Start Game</button>
+
+    </div>
+
+    <div id="play" class="section" style="display:none;">
+        <div class="controls">
+            <div id="timer">Time: 00:00</div>
+        </div>
+        <div class="scrambled-sentence" id="scrambled-sentence"></div>
+        <input type="text" id="user-input" placeholder="Unscramble the sentence">
+        <button id="check-answer">Check Answer</button>
+        <div id="result"></div>
+    </div>
+
+    <div id="end" class="section" style="display:none;">
+        <h1>Game Over</h1>
+        <div id="final-result"></div>
+        <button id="restart-game">Start New Game</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Sentence_Scramble/script.js b/Games/Sentence_Scramble/script.js
@@ -0,0 +1,123 @@
+const sentences = {
+    easy: [
+        "the quick brown fox jumps over the lazy dog",
+        "javascript is a versatile programming language",
+        "a journey of a thousand miles begins with a single step",
+        "the early bird catches the worm",
+        "actions speak louder than words"
+    ],
+    medium: [
+        "practice makes perfect",
+        "coding is both challenging and fun",
+        "the only limit to our realization of tomorrow is our doubts of today",
+        "a stitch in time saves nine",
+        "the pen is mightier than the sword"
+    ],
+    hard: [
+        "in the midst of chaos, there is also opportunity",
+        "the best way to predict the future is to invent it",
+        "an ounce of prevention is worth a pound of cure",
+        "you can't judge a book by its cover",
+        "the greatest glory in living lies not in never falling, but in rising every time we fall"
+    ]
+};
+
+
+let currentSentence;
+let scrambledSentence;
+let timer;
+let timeLeft;
+let interval;
+let sentenceCount = 0;
+let correctCount = 0;
+const maxSentences = 5;
+
+function scrambleSentence(sentence) {
+    const words = sentence.split(" ");
+    for (let i = words.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [words[i], words[j]] = [words[j], words[i]];
+    }
+    return words.join(" ");
+}
+
+function loadNewSentence() {
+    const difficulty = document.getElementById("difficulty").value;
+    const sentenceList = sentences[difficulty];
+    currentSentence = sentenceList[Math.floor(Math.random() * sentenceList.length)];
+    scrambledSentence = scrambleSentence(currentSentence);
+    document.getElementById("scrambled-sentence").textContent = (sentenceCount + 1) + ". " +  scrambledSentence;
+    document.getElementById("user-input").value = "";
+    document.getElementById("result").textContent = "";
+
+    resetTimer();
+    startTimer();
+}
+
+function checkAnswer() {
+    const userInput = document.getElementById("user-input").value.trim();
+    if (userInput.toLowerCase() === currentSentence.toLowerCase()) {
+        correctCount++;
+        document.getElementById("result").textContent = "Correct! 🎉";
+        document.getElementById("result").style.color = "green";
+    } else {
+        document.getElementById("result").textContent = "Incorrect, try again.";
+        document.getElementById("result").style.color = "red";
+    }
+    sentenceCount++;
+    if (sentenceCount < maxSentences) {
+        setTimeout(loadNewSentence, 1000); // Load next sentence after 1 second
+    } else {
+        setTimeout(showEndScreen, 1000); // Show end screen after 1 second
+    }
+    stopTimer();
+}
+
+function startTimer() {
+    timeLeft = 60; // 60 seconds for each sentence
+    interval = setInterval(updateTimer, 1000);
+}
+
+function updateTimer() {
+    if (timeLeft <= 0) {
+        clearInterval(interval);
+        document.getElementById("result").textContent = "Time's up!";
+        document.getElementById("result").style.color = "red";
+        sentenceCount++;
+        if (sentenceCount < maxSentences) {
+            setTimeout(loadNewSentence, 1000); // Load next sentence after 1 second
+        } else {
+            setTimeout(showEndScreen, 1000); // Show end screen after 1 second
+        }
+    }
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+    document.getElementById("timer").textContent = `Time: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    timeLeft--;
+}
+
+function resetTimer() {
+    clearInterval(interval);
+    document.getElementById("timer").textContent = "Time: 01:00";
+}
+
+function showEndScreen() {
+    document.getElementById("play").style.display = "none";
+    document.getElementById("end").style.display = "block";
+    document.getElementById("final-result").textContent = `Game Over! You got ${correctCount} out of ${maxSentences} correct.`;
+}
+
+document.getElementById("start-game").addEventListener("click", function() {
+    document.getElementById("start").style.display = "none";
+    document.getElementById("end").style.display = "none";
+    document.getElementById("play").style.display = "block";
+    sentenceCount = 0;
+    correctCount = 0;
+    loadNewSentence();
+});
+
+document.getElementById("check-answer").addEventListener("click", checkAnswer);
+document.getElementById("restart-game").addEventListener("click", function() {
+    document.getElementById("end").style.display = "none";
+    document.getElementById("start").style.display = "block";
+});
diff --git a/Games/Sentence_Scramble/styles.css b/Games/Sentence_Scramble/styles.css
@@ -0,0 +1,97 @@
+@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;
+    outline: none;
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #ffc870;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.section {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.rules {
+    margin-top: 20px;
+    margin-bottom: 15px;
+    font-size: 14px;
+    color: black;
+}
+
+.controls {
+    margin-bottom: 20px;
+}
+
+label {
+    font-size: 16px;
+}
+
+select {
+    padding: 5px;
+    margin: 10px 0;
+    font-size: 16px;
+    color: black;
+}
+
+#timer {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.scrambled-sentence {
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: black;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    background-color: #ffc870;
+    color: black;
+    cursor: pointer;
+    margin-top: 15px;
+}
+
+button:hover {
+    background-color: #ffbe57;
+}
+
+#result, #final-result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
diff --git a/README.md b/README.md
@@ -1676,6 +1676,7 @@ This repository also provides one such platforms where contributers come over an
 
 |[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)|
 
+|[Sentence_Scramble](https://github.com/kunjgit/GameZone/tree/main/Games/Sentence_Scramble)|
 
  </center>
 

diff --git a/assets/images/Sentence_Scramble.png b/assets/images/Sentence_Scramble.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1676,6 +1676,7 @@ This repository also provides one such platforms where contributers come over an

		\|[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)\|

		\|[Sentence_Scramble](https://github.com/kunjgit/GameZone/tree/main/Games/Sentence_Scramble)\|

		</center>

Expand Down