Upload 11 files

Browse files

Files changed (11) hide show

hangman-game/img1.png +0 -0
hangman-game/img2.png +0 -0
hangman-game/img3.png +0 -0
hangman-game/img4.png +0 -0
hangman-game/img5.png +0 -0
hangman-game/img6.png +0 -0
hangman-game/img7.png +0 -0
hangman-game/index.html +28 -0
hangman-game/script.js +88 -0
hangman-game/style.css +76 -0
hangman-game/words.js +27 -0

hangman-game/img1.png ADDED Viewed

hangman-game/img2.png ADDED Viewed

hangman-game/img3.png ADDED Viewed

hangman-game/img4.png ADDED Viewed

hangman-game/img5.png ADDED Viewed

hangman-game/img6.png ADDED Viewed

hangman-game/img7.png ADDED Viewed

hangman-game/index.html ADDED Viewed

	@@ -0,0 +1,28 @@

+<!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>Jogo da forca</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <h1>Jogo da Forca</h1>
+  </header>
+  <button class="new">Novo Jogo</button>
+  <main>
+    <article class="content-img">
+      <img src="img1.png" width="250px" alt="Jogo da forca">
+    </article>
+    <article class="content">
+      <div class="guess-word"></div>
+      <div class="clue"></div>
+      <div class="btns"></div>
+    </article>
+  </main>
+  <script src="script.js" type="module"></script>
+</body>
+</html>

hangman-game/script.js ADDED Viewed

	@@ -0,0 +1,88 @@

+import getWord from "./words.js";
+const contentBtns = document.querySelector(".btns");
+const contentGuessWord = document.querySelector(".guess-word");
+const img = document.querySelector("img");
+const contentClue = document.querySelector(".clue");
+const btnNew = document.querySelector(".new");
+btnNew.onclick = () => init();
+let indexImg;
+init();
+function init() {
+  indexImg = 1;
+  img.src = `img1.png`;
+  generateGuessSection();
+  generateButtons();
+}
+function generateGuessSection() {
+  contentGuessWord.textContent = "";
+  const { word, clue } = getWord();
+  const wordWithoutAccent = word
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+  Array.from(wordWithoutAccent).forEach((letter) => {
+    const span = document.createElement("span");
+    span.textContent = "_";
+    span.setAttribute("word", letter.toUpperCase());
+    contentGuessWord.appendChild(span);
+  });
+  contentClue.textContent = `Dica: ${clue}`;
+}
+function wrongAnswer() {
+  indexImg++;
+  img.src = `img${indexImg}.png`;
+  if (indexImg === 7) {
+    setTimeout(() => {
+      alert("Perdeu :/");
+      init();
+    }, 100);
+  }
+}
+function verifyLetter(letter) {
+  const arr = document.querySelectorAll(`[word="${letter}"]`);
+  if (!arr.length) wrongAnswer();
+  arr.forEach((e) => {
+    e.textContent = letter;
+  });
+  const spans = document.querySelectorAll(`.guess-word span`);
+  const won = !Array.from(spans).find((span) => span.textContent === "_");
+  if (won) {
+    setTimeout(() => {
+      alert("Ganhou!!!");
+      init();
+    }, 100);
+  }
+}
+function generateButtons() {
+  contentBtns.textContent = "";
+  for (let i = 97; i < 123; i++) {
+    const btn = document.createElement("button");
+    const letter = String.fromCharCode(i).toUpperCase();
+    btn.textContent = letter;
+    btn.onclick = () => {
+      btn.disabled = true;
+      btn.style.backgroundColor = "gray";
+      verifyLetter(letter);
+    };
+    contentBtns.appendChild(btn);
+  }
+}

hangman-game/style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: Arial, Helvetica, sans-serif;
+}
+main {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  height: 200px;
+  max-width: 400px;
+}
+.guess-word {
+  display: flex;
+  gap: 10px;
+  font-size: 50px;
+  flex-wrap: wrap;
+}
+.btns {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+button {
+  height: 30px;
+  font-size: 20px;
+  cursor: pointer;
+  color: white;
+  border: none;
+  border-radius: 3px;
+}
+.btns button {
+  width: 30px;
+  background-color: #0ea989;
+}
+.new {
+  width: 120px;
+  background-color: #3ba128;
+  margin: 20px;
+}
+button:hover {
+  opacity: 0.8;
+}
+.clue {
+  font-size: 18px;
+}
+@media (max-width:650px) {
+  main {
+    flex-direction: column;
+    padding: 10px;
+  }
+}

hangman-game/words.js ADDED Viewed

	@@ -0,0 +1,27 @@

+const words = [
+  { word: "abacaxi", clue: "Fruta tropical" },
+  { word: "elefante", clue: "Animal de grande porte com tromba longa" },
+  { word: "computador", clue: "Dispositivo eletrônico" },
+  { word: "girafa", clue: "Animal alto, com pescoço longo" },
+  { word: "chocolate", clue: "Doce feito de cacau" },
+  { word: "piano", clue: "Instrumento musical com teclas" },
+  { word: "tigre", clue: "Felino selvagem" },
+  { word: "esmeralda", clue: "Tipo de pedra preciosa" },
+  { word: "navio", clue: "Embarcação no mar" },
+  { word: "telefone", clue: "Dispositivo de comunicação" },
+  { word: "floresta", clue: "Área com muitas árvores" },
+  { word: "quadrado", clue: "Figura geométrica de quatro lados" },
+  { word: "foguete", clue: "Veículo espacial" },
+  { word: "sorvete", clue: "Doce gelado" },
+  { word: "bicicleta", clue: "Veículo de duas rodas" },
+  { word: "avião", clue: "Meio de transporte aéreo" },
+  { word: "macaco", clue: "Primate arbóreo" },
+  { word: "raios", clue: "Descargas elétricas na atmosfera" },
+  { word: "montanha", clue: "Elevação natural da terra" },
+  { word: "vela", clue: "Objeto para iluminação" },
+];
+export default function getWord() {
+  const index = Math.floor(Math.random() * words.length);
+  return words[index];
+}