Merge pull request #137 from itsmeabhishek03/Add/Wordlegame

added/wordle_game
Priyanshi662 · Jan 24, 2024 · 8448b24 · 8448b24
2 parents 44431c4 + 575ae6d
commit 8448b24
Show file tree

Hide file tree

Showing 6 changed files with 353 additions and 0 deletions.
diff --git a/Assets/games/Wordle Game/index.html b/Assets/games/Wordle Game/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wordle Clone!</title>
+
+    <script src="script.js"></script>
+
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+  </head>
+  <body>
+    <div id="container">
+      <div id="game">
+        <header>
+          <h1 class="title">WORDLE</h1>
+        </header>
+
+        <div id="board-container">
+          <div id="board"></div>
+        </div>
+
+        <div id="keyboard-container">
+          <div class="keyboard-row">
+            <button data-key="q">q</button>
+            <button data-key="w">w</button>
+            <button data-key="e">e</button>
+            <button data-key="r">r</button>
+            <button data-key="t">t</button>
+            <button data-key="y">y</button>
+            <button data-key="u">u</button>
+            <button data-key="i">i</button>
+            <button data-key="o">o</button>
+            <button data-key="p">p</button>
+          </div>
+          <div class="keyboard-row">
+            <div class="spacer-half"></div>
+            <button data-key="a">a</button>
+            <button data-key="s">s</button>
+            <button data-key="d">d</button>
+            <button data-key="f">f</button>
+            <button data-key="g">g</button>
+            <button data-key="h">h</button>
+            <button data-key="j">j</button>
+            <button data-key="k">k</button>
+            <button data-key="l">l</button>
+            <div class="spacer-half"></div>
+          </div>
+          <div class="keyboard-row">
+            <button data-key="enter" class="wide-button">Enter</button>
+            <button data-key="z">z</button>
+            <button data-key="x">x</button>
+            <button data-key="c">c</button>
+            <button data-key="v">v</button>
+            <button data-key="b">b</button>
+            <button data-key="n">n</button>
+            <button data-key="m">m</button>
+            <button data-key="del" class="wide-button">Del</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Assets/games/Wordle Game/script.js b/Assets/games/Wordle Game/script.js
@@ -0,0 +1,141 @@
+document.addEventListener("DOMContentLoaded", () => {
+  createSquares();
+  getNewWord();
+
+  let guessedWords = [[]];
+  let availableSpace = 1;
+
+  let word;
+  let guessedWordCount = 0;
+
+  const keys = document.querySelectorAll(".keyboard-row button");
+
+  function getNewWord() {
+    fetch("word.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch word.json: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        const words = data.words;
+        const randomIndex = Math.floor(Math.random() * words.length);
+        word = words[randomIndex];
+      })
+      .catch((error) => {
+        console.error("Error fetching word.json:", error);
+      });
+  }
+
+  function getCurrentWordArr() {
+    const numberOfGuessedWords = guessedWords.length;
+    return guessedWords[numberOfGuessedWords - 1];
+  }
+
+  function updateGuessedWords(letter) {
+    const currentWordArr = getCurrentWordArr();
+
+    if (currentWordArr && currentWordArr.length < 5) {
+      currentWordArr.push(letter);
+
+      const availableSpaceEl = document.getElementById(String(availableSpace));
+
+      availableSpace = availableSpace + 1;
+      availableSpaceEl.textContent = letter;
+    }
+  }
+
+  function getTileColor(letter, index) {
+    const isCorrectLetter = word.includes(letter);
+
+    if (!isCorrectLetter) {
+      return "rgb(58, 58, 60)";
+    }
+
+    const letterInThatPosition = word.charAt(index);
+    const isCorrectPosition = letter === letterInThatPosition;
+
+    if (isCorrectPosition) {
+      return "rgb(83, 141, 78)";
+    }
+
+    return "rgb(181, 159, 59)";
+  }
+
+  function handleSubmitWord() {
+    const currentWordArr = getCurrentWordArr();
+    if (currentWordArr.length !== 5) {
+      window.alert("Word must be 5 letters");
+    }
+
+    const currentWord = currentWordArr.join("");
+
+    const firstLetterId = guessedWordCount * 5 + 1;
+    const interval = 200;
+    currentWordArr.forEach((letter, index) => {
+      setTimeout(() => {
+        const tileColor = getTileColor(letter, index);
+
+        const letterId = firstLetterId + index;
+        const letterEl = document.getElementById(letterId);
+        letterEl.classList.add("animate__flipInX");
+        letterEl.style = `background-color:${tileColor};border-color:${tileColor}`;
+      }, interval * index);
+    });
+
+    guessedWordCount += 1;
+
+    if (currentWord === word) {
+      window.alert("Congratulations!");
+    }
+
+    if (guessedWords.length === 6) {
+      window.alert(`Sorry, you have no more guesses! The word is ${word}.`);
+    }
+
+    guessedWords.push([]);
+  }
+
+  function createSquares() {
+    const gameBoard = document.getElementById("board");
+
+    for (let index = 0; index < 30; index++) {
+      let square = document.createElement("div");
+      square.classList.add("square");
+      square.classList.add("animate__animated");
+      square.setAttribute("id", index + 1);
+      gameBoard.appendChild(square);
+    }
+  }
+
+  function handleDeleteLetter() {
+    const currentWordArr = getCurrentWordArr();
+    const removedLetter = currentWordArr.pop();
+
+    guessedWords[guessedWords.length - 1] = currentWordArr;
+
+    const lastLetterEl = document.getElementById(String(availableSpace - 1));
+
+    lastLetterEl.textContent = "";
+    availableSpace = availableSpace - 1;
+  }
+
+  for (let i = 0; i < keys.length; i++) {
+    keys[i].onclick = ({ target }) => {
+      const letter = target.getAttribute("data-key");
+
+      if (letter === "enter") {
+        handleSubmitWord();
+        return;
+      }
+
+      if (letter === "del") {
+        handleDeleteLetter();
+        return;
+      }
+
+      updateGuessedWords(letter);
+    };
+  }
+});
diff --git a/Assets/games/Wordle Game/style.css b/Assets/games/Wordle Game/style.css
@@ -0,0 +1,111 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: "Arial", sans-serif;
+    background-color: #282c35;
+    color: #fff;
+    overflow: hidden; /* Prevents scroll bars */
+  }
+
+  #container {
+    display: flex;
+    background-color: #282c35;
+    height: 95vh;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #game {
+    width: 100%;
+    max-width: 600px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  header {
+    border-bottom: 1px solid #444;
+  }
+
+  .title {
+    color: #61dafb; /* React blue color */
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 0.4rem 0;
+    text-align: center;
+  }
+
+  #board-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  #board {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 10px;
+    padding: 20px;
+  }
+
+  .square {
+    border: 2px solid #61dafb;
+    min-width: 60px;
+    min-height: 60px;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #61dafb;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #333;
+    border-radius: 4px;
+  }
+
+  #keyboard-container {
+    height: 150px;
+  }
+
+  .keyboard-row {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 0 auto 10px;
+  }
+
+  .keyboard-row button {
+    font-family: inherit;
+    font-weight: bold;
+    border: 0;
+    padding: 0;
+    height: 50px;
+    cursor: pointer;
+    background-color: #61dafb;
+    color: #fff;
+    flex-grow: 1;
+    text-transform: uppercase;
+    margin-right: 5px;
+    border-radius: 4px;
+    user-select: none;
+    transition: background-color 0.3s;
+  }
+
+  .keyboard-row button.wide-button {
+    flex-grow: 1.5;
+  }
+
+  .spacer-half {
+    flex-grow: 0.5;
+  }
+
+  .keyboard-row button:hover {
+    background-color: #4fa3d1; /* Slightly darker on hover */
+  }
+
diff --git a/Assets/games/Wordle Game/word.json b/Assets/games/Wordle Game/word.json
@@ -0,0 +1,26 @@
+{
+    "words": [
+      "apple", "chair", "table", "house", "brush",
+      "plant", "block", "music", "beard", "happy",
+      "glass", "smile", "green", "horse", "trunk",
+      "sunny", "frost", "cloud", "ocean", "sugar",
+      "spoon", "fence", "knife", "couch", "jelly",
+      "cream", "river", "black", "white", "piano",
+      "fairy", "magic", "feast", "blend", "laser",
+      "hazel", "melon", "swift", "frost", "swirl",
+      "flame", "jazze", "echos", "pluck", "globe",
+      "crisp", "dream", "bloom", "spark", "wrist",
+      "peace", "grape", "shell", "pouch", "tooth",
+      "plush", "forge", "cloud", "flame", "daisy",
+      "amber", "bliss", "scaly", "cycle", "scent",
+      "shine", "sleet", "sting", "skirt", "crawl",
+      "drown", "swift", "flute", "swing", "swift",
+      "cycle", "sting", "trunk", "sound", "charm",
+      "gloom", "spice", "mirth", "scent", "swish",
+      "chord", "gloss", "stain", "vivid", "crisp",
+      "flame", "twist", "jolly", "melon", "snack",
+      "spoon", "blink", "crisp", "fresh", "thorn"
+    ]
+  }
+
+
diff --git a/Assets/games/Wordle Game/wordle.png b/Assets/games/Wordle Game/wordle.png
diff --git a/index.html b/index.html
@@ -280,6 +280,12 @@ <h2>Password Generator</h2>
         <!-- Button to navigate to page1.html -->
         <button onclick="window.location.href='./Assets/games/Password Generator/index.html'">Go!</button><br>
     </div>
+    <div class="card">
+        <img src="./Assets/games/Wordle Game/wordle.png">
+        <h2>Wordle Game</h2>
+        <!-- Button to navigate to page1.html -->
+        <button onclick="window.location.href='./Assets/games/Wordle Game/index.html'">Go!</button><br>
+    </div>
     <footer>
         <div class="footer-container">
             <h1>Fun Fusion</h1>