ReCoded-Org · Omerrj · May 6, 2021 · May 6, 2021 · May 7, 2021 · May 7, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -1,14 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <link rel="stylesheet" href="./styles/style.css">
-</head>
-<body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,200;0,300;1,300&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-  <script src="./scripts/script.js"></script>
-</body>
-</html>
+  <body>
+    <div id="hangman-top">
+      <p class="hangman">HANGMAN GAME</p>
+    </div>
+    <div id="hangman-left">
+      <p class="hangman">H A N G M A N</p>
+    </div>
+    <div id="hangman-right">
+      <p class="hangman">H A N G M A N</p>
+    </div>
+
+    <main>
+      <div id="first-container">
+        <!-- // title // -->
+        <h1>HANGMAN</h1>
+        <h2>VANILLA JAVASCRIPT HANGMAN GAME</h2>
+        <p id="gameDescription">
+          Use the alphabet to guess the word, or click hint to unlock alphabets.
+        </p>
+        <button id="start-btn">GET STARTED</button>
+      </div>
+      <div id="second-container">
+        <!-- // here's gonna be the the drawing part and fun parts :D // -->
+        <div class="wrapper">
+          <p id="mylives"></p>
+          <p id="hints"></p>
+          <div id="main-container">
+            <!-- // div of btns // -->
+            <div id="buttons"></div>
+            <!-- //drawing place // -->
+            <canvas id="stickman"
+              >Your Browser does NOT support HTML5 Canvas tag</canvas
+            >
+          </div>
+          <div id="hold"></div>
+          <div class="container">
+            <button id="hint">Hint</button>
+            <button id="reset">Play again</button>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div id="hangman-bottom">
+      <p class="hangman">HANGMAN GAME</p>
+    </div>
+    <script src="./scripts/script.js"></script>
+  </body>
+</html>
diff --git a/scripts/script.js b/scripts/script.js
@@ -0,0 +1,219 @@
+const buttons = document.getElementById("buttons");
+const hold = document.getElementById("hold");
+const alphabets = "abcdefghijklmnopqrstuvwxyz".split("");
+const myLive = document.getElementById("mylives");
+const playAgain = document.getElementById("reset");
+const stickman = document.getElementById("stickman");
+const context = stickman.getContext("2d");
+const hint = document.getElementById("hint");
+const remainedHint = document.getElementById("hints");
+
+let lives = 10;
+let gameFinished = false;
+let hintsAvailable = 3;
+let guess = [];
+
+context.strokeStyle = "#fff";
+context.lineWidth = 2;
+
+const draw = (fromX, fromY, toX, toY) => {
+  context.beginPath();
+  context.moveTo(fromX, fromY);
+  context.lineTo(toX, toY);
+  context.stroke();
+};
+
+const head = () => {
+  context.beginPath();
+  context.arc(85, 40, 10, 0, Math.PI * 2, true);
+  context.stroke();
+};
+
+const floor = () => draw(10, 150, 300, 150);
+const post1 = () => draw(10, 0, 10, 150);
+const post2 = () => draw(0, 0, 100, 0);
+const rope = () => draw(85, 0, 85, 30);
+const body = () => draw(85, 50, 85, 100);
+const leftArm = () => draw(85, 65, 65, 75);
+const rightArm = () => draw(85, 65, 105, 75);
+const leftLeg = () => draw(85, 100, 65, 125);
+const rightLeg = () => draw(85, 100, 105, 125);
+
+const drawing = [
+  floor,
+  post1,
+  post2,
+  rope,
+  head,
+  body,
+  leftArm,
+  rightArm,
+  leftLeg,
+  rightLeg,
+];
+
+const hintsRemained = (hintsAvailable) => {
+  remainedHint.innerText =
+    hintsAvailable > 0
+      ? `${hintsAvailable} hints remained`
+      : `No hints remaining`;
+};
+
+const showHint = (word) => {
+  if (hintsAvailable > 0 && !gameFinished) {
+    let hintShown = false;
+
+    while (!hintShown) {
+      let randomPosition = Math.abs(
+        word.length - 1 - Math.floor(Math.random() * (word.length + 1))
+      );
+      word.forEach((letter) => {
+        if (letter?.hidden && letter?.value === word[randomPosition]?.value) {
+          letter.hidden = false;
+          hintShown = true;
+          hintsAvailable--;
+          hintsRemained(hintsAvailable);
+          const letters = document.getElementsByClassName("alphabet");
+          for (let i = 0; i < letters.length; i++) {
+            if (letters[i].innerText.toLowerCase() === letter.value)
+              letters[i].setAttribute("disabled", true);
+          }
+        }
+      });
+    }
+  } else {
+    hint.setAttribute("disabled", true);
+  }
+
+  gameState(lives, word);
+  showLetters(word);
+};
+
+const gameState = (lives, word) => {
+  const lost = () => {
+    myLive.innerText = `You Lost`;
+    gameFinished = true;
+  };
+
+  const win = () => {
+    myLive.innerText = `You Win!`;
+    gameFinished = true;
+  };
+
+  myLive.innerText = `Your live is ${lives}`;
+  if (lives <= 0) lost();
+
+  let won = true;
+
+  word?.forEach((letter) => {
+    if (letter.hidden) won = false;
+  });
+
+  if (word && won) win();
+};
+
+gameState(lives);
+
+buttons.innerHTML = "Loading...";
+
+const lettersFound = [];
+
+const showLetters = (word) => {
+  guess = word;
+  hold.innerHTML = "";
+
+  word.forEach((letter) => {
+    const hiddenLetter = document.createElement("span");
+    hiddenLetter.classList.add("hiddenLetter");
+    if (letter.hidden) {
+      hiddenLetter.innerText = "_";
+    } else hiddenLetter.innerText = letter.value;
+    hold.append(hiddenLetter);
+  });
+};
+
+const alphabetHandler = (alphabet, word, alphabetButton, randomWord) => {
+  if (!gameFinished) {
+    alphabetButton.setAttribute("disabled", true);
+
+    word.forEach((letter) => {
+      if (letter.value === alphabet) letter.hidden = false;
+    });
+
+    if (!randomWord.split("").includes(alphabet)) {
+      lives--;
+
+      drawing[drawing.length - 1 - lives]();
+    }
+
+    gameState(lives, word);
+    showLetters(word);
+  }
+};
+
+const createWord = (randomWord) => {
+  const word = [];
+
+  randomWord.split("").forEach((char, i) => {
+    word.push({ value: char, position: i, hidden: true });
+  });
+
+  return word;
+};
+
+const renderAlphabets = (word, randomWord) => {
+  buttons.innerHTML = "";
+  alphabets.forEach((char, i) => {
+    const alphabet = document.createElement("button");
+    alphabet.innerText = char;
+    alphabet.setAttribute("id", `alphabet${i}`);
+    alphabet.classList.add("alphabet");
+
+    alphabet.onclick = () => alphabetHandler(char, word, alphabet, randomWord);
+    hint.onclick = () => showHint(word);
+
+    buttons.append(alphabet);
+  });
+  showLetters(word);
+};
+
+const reset = () => {
+  lives = 10;
+  gameState(lives);
+  gameFinished = false;
+  context.clearRect(0, 0, 400, 400);
+  hint.removeAttribute("disabled");
+};
+
+const play = () => {
+  fetch("https://random-word-api.herokuapp.com/word?number=1")
+    .then((w) => w.json())
+    .then((randomWord) => {
+      buttons.innerHTML = "";
+      renderAlphabets(createWord(randomWord[0]), randomWord[0]);
+      hintsAvailable = Math.floor(randomWord[0].length / 3);
+      reset();
+      hintsRemained(hintsAvailable);
+    })
+
+    .catch((e) => e);
+};
+
+play();
+
+playAgain.onclick = () => play();
+
+const firstPage = document.getElementById("first-container");
+const secondPage = document.getElementById("second-container");
+const startBtn = document.getElementById("start-btn");
+const hangmanLeft = document.getElementById("hangman-left");
+const hangmanRight = document.getElementById("hangman-right");
+const hangmanBottom = document.getElementById("hangman-bottom");
+
+startBtn.addEventListener("click", () => {
+  firstPage.style.display = "none";
+  secondPage.style.display = "block";
+  hangmanLeft.style.display = "none";
+  hangmanRight.style.display = "none";
+  hangmanBottom.style.display = "none";
+});