Merge pull request #4031 from Bhumika1312/main

New Game: Word Scramble Game

Games/wordScramble/README.md

@@ -0,0 +1,45 @@
+
+# **Word Scramble Game**
+
+---
+
+## **Description 📃**
+
+- Welcome to the Simple Word Scramble Game! It's straightforward yet addictively fun. Just unscramble the letters to reveal the hidden words. With each correct answer, you'll feel a rush of satisfaction as you unlock new levels. It's perfect for quick bursts of entertainment or a relaxing challenge anytime, anywhere and the game aims to challenge players' vocabulary and word unscrambling skills while providing an engaging and interactive experience. Dive in and test your word skills with this easy-to-play game!
+
+## **Functionalities 🎮**
+
+Game consists of following functionalities :
+
+<ol>
+<li>Upon loading the page, players are welcomed with a screen providing information about the game. Clicking the "Play Now" button redirects the player to the game page.</li>
+<li>Players must rearrange the scrambled letters within a given time interval to form a valid word.</li>
+<li>For every correct word player earns 10 points.</li>
+<li>If the word entered by the player is incorrect, they lose a life. The game ends if the player loses all their lives.</li>
+<li>The player can use the "Hint" button to reveal a hint for the current word, but this can only be used once per game.</li>
+<li>The game progresses through levels, with each level presenting increasingly difficult words. The time limit for each word decreases as the level increases.</li>
+<li>This is single player game.</li>
+</ol>
+
+## **How to Play? 🕹️**
+
+- Upon visiting the website, you'll be greeted with a welcome screen.
+- By clicking "Play Now," you'll be redirected to the game page.
+- You'll see a scrambled word and a hint. Rearrange the letters to form a valid word and by clicking the "Check Word" button or by using "Enter" key you can see if your answer is correct or not.
+- For every correct answer you earn points and for non correct answer the lives are deducted
+- The game continues until all 3 lives are finished.
+- After completing, you'll receive your final score and level cleared.Your score is based on the number of correct answers.
+
+## **Screenshots 📸**
+
+<br>
+<h1>Home Page</h1>
+<img src = "assets\1.png"></img>
+<h1>Game page</h1>
+<img src = "assets\2.png"></img>
+<h1>For Correct answer</h1>
+<img src = "assets\3.png"></img>
+<h1>For Wrong answer</h1>
+<img src = "assets\4.png"></img>
+<h1>Game Over</h1>
+<img src = "assets\5.png"></img>

Games/wordScramble/game.css

@@ -0,0 +1,175 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    color: white;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: url('assets/alphabet-background.jpg') no-repeat center center/cover;
+    transition: 0.3s ease-in-out;
+}
+
+.container {
+    width: 90%;
+    max-width: 450px;
+    border-radius: 7px;
+    background: rgb(24, 1, 1); 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+
+.container h2{
+    font-size: 25px;
+    font-weight: 500;
+    padding: 18px 25px;
+    border-bottom: 1px solid #ccc;
+}
+
+.container .content {
+    margin: 25px 20px 30px;
+}
+
+.container .word {
+    font-size: 33px;
+    font-weight: 500;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 24px;
+    margin-right: -24px;
+}
+
+.container input[type="text"] {
+    color: black;
+}
+
+.content .details {
+    margin: 25px 0 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.container .hint {
+    background-color: rgba(255, 255, 255, 0.2); /* Set background color with transparency */
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.container .hint span {
+    color: white;
+}
+
+.details p {
+    font-size: 18px;
+    margin-bottom: 10px;
+    flex-basis: 100%;
+}
+
+.details p.bigger {
+    flex-basis: auto; /* Allow bigger details to occupy necessary space */
+}
+
+.details p b {
+    font-weight: 500;
+}
+
+.content input{
+    width: 100%;
+    height: 60px;
+    outline: none;
+    font-size: 18px;
+    padding: 0 16px;
+    border-radius: 5px;
+    border: 1-x solid #aaa;
+}
+
+.content .buttons{
+    display: flex;
+    margin-top: 20px;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.buttons button{
+    border: none;
+    outline: none;
+    color: #fff;
+    cursor: pointer;
+    padding: 15px 0;
+    font-size: 17px;
+    border-radius: 5px;
+    width: calc(100%/ 3 - 10px);
+}
+
+.buttons .refresh-word{
+    background: #6c757d;
+}
+
+.buttons .check-word{
+    background: #5372F0;
+}
+
+.buttons .hint-btn {
+    background: #28a745;
+}
+
+.buttons button:hover {
+    background-color: #4e5a65;
+}
+
+/* Styles for the game over popup */
+.popup {
+    display: none; /* Initially hidden */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popup-content {
+    background: #1c1e22;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.popup-content h2 {
+    margin-bottom: 20px;
+}
+
+.popup-content p {
+    margin-bottom: 15px;
+}
+
+.popup-content button {
+    background: #5372F0;
+    border: none;
+    padding: 10px 20px;
+    color: white;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.popup-content button:hover {
+    background: #4358b0;
+}

Games/wordScramble/game.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Word Scramble Game</title>
+    <link rel="stylesheet" href="game.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="js/words.js" defer></script>
+    <script src="js/script.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/Agezao/confetti-js/dist/index.min.js"></script>
+
+</head>
+<body>
+    <div class="container">
+        <h2>Word Scramble</h2>
+        <div class="content">
+            <p class="word"></p>
+            <div class="details">
+                <p class="hint">Hint: <span></span></p>
+                <p class="bigger time">Time Left: <span><b>30</b>s</span></p>
+                <p class="bigger score">Score: <span><b>0</b></span></p>
+                <p class="bigger lives">Lives: <span><b>3</b></span></p>
+                <p class="level">Level: <span><b>1</b></span></p>
+            </div>
+            <input type="text" placeholder="Enter a valid word">
+            <div class="buttons">
+                <button class="refresh-word">Refresh Word</button>
+                <button class="check-word">Check Word</button>
+                <button class="hint-btn">Hint</button>
+            </div>
+        </div>
+    </div>
+    <div class="popup" id="gameOverPopup">
+        <div class="popup-content">
+            <h2>Game Over</h2>
+            <p>Your final score is: <span id="finalScore"></span></p>
+            <p>You reached level: <span id="finalLevel"></span></p>
+            <button id="gameOverBtn">Restart</button>
+        </div>
+    </div>
+    <audio id="correctSound" src="assets/correct.mp3"></audio>
+    <audio id="incorrectSound" src="assets/incorrect.mp3"></audio>
+    <audio id="timeoutSound" src="assets/timeout.mp3"></audio>
+    <audio id="clappingSound" src="assets/game_over.mp3"></audio>
+
+</body>
+</html>

Games/wordScramble/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Welcome to Word Scramble Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <div class="welcome-content">
+            <div class="welcome-text">
+                <h1>Welcome to Word Scramble Game</h1>
+                <p class="welcome-note">Get ready to unscramble words and test your vocabulary!</p>
+                <div class="rules-container">
+                    <h2>Rules:</h2>
+                    <ol class="rules-list">
+                        <li>Unscramble the letters to form a valid word.</li>
+                        <li>You have a limited number of lives.</li>
+                        <li>Each correct word earns you points.</li>
+                        <li>Try to achieve the highest score!</li>
+                    </ol>
+                </div>
+            </div>
+            <div class="welcome-gif-container">
+                <img src="assets/giphy.gif" class="welcome-gif" alt="Welcome GIF">
+            </div>
+        </div>
+        <button id="play-now-button">Play Now</button>
+    </div>
+
+    <audio id="gameStartSound" src="assets/game-start.mp3"></audio>
+    <img src="assets/background.jpg" class="background" alt="background">
+    <div class="logo-container">
+        <img src="assets/logo.png" class="logo" alt="Logo">
+    </div>
+    <script src="script.js" defer></script>
+</body>
+</html>