web-dev-open · Nazaret20 · Sep 8, 2025
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
   <body>
     <div style="text-align:center; margin: 50px 0px;">
       <img
-        src="http://www.firstcomicsnews.com/wp-content/uploads/2016/09/Hangman-Logo-600x253.png"
+        src="images/hangman-logo.png"
         alt="hangman image"
         class="game-logo"
       />

diff --git a/javascript/canvas.js b/javascript/canvas.js
@@ -1,34 +1,152 @@
 class HangmanCanvas {
   constructor(secretWord) {
-    this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+    this.context = document.getElementById("hangman").getContext("2d");
+    this.secretWord = secretWord;
   }
 
   createBoard() {
-    // ... your code goes here
+    this.context.clearRect(
+      0,
+      0,
+      this.context.canvas.width,
+      this.context.canvas.height
+    );
+    this.drawLines();
   }
 
   drawLines() {
-    // ... your code goes here
+    const ctx = this.context;
+    let startX = 50;
+    const startY = 300;
+
+    for (let i = 0; i < this.secretWord.length; i++) {
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(startX + 40, startY);
+      ctx.stroke();
+      startX += 50;
+    }
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    const ctx = this.context;
+    const letter = this.secretWord[index];
+    const x = 55 + index * 50;
+    const y = 295;
+
+    ctx.font = "30px Arial";
+    ctx.fillStyle = "black";
+    ctx.fillText(letter.toUpperCase(), x, y);
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const ctx = this.context;
+    const x = 600 - errorsLeft * 30;
+    const y = 50;
+
+    ctx.font = "25px Arial";
+    ctx.fillStyle = "red";
+    ctx.fillText(letter.toUpperCase(), x, y);
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    const ctx = this.context;
+
+    if (errorsLeft <= 10) {
+      ctx.beginPath();
+      ctx.moveTo(50, 350);
+      ctx.lineTo(150, 350);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 9) {
+      ctx.beginPath();
+      ctx.moveTo(100, 350);
+      ctx.lineTo(100, 50);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 8) {
+      ctx.beginPath();
+      ctx.moveTo(100, 50);
+      ctx.lineTo(250, 50);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 7) {
+      ctx.beginPath();
+      ctx.moveTo(250, 50);
+      ctx.lineTo(250, 80);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 6) {
+      ctx.beginPath();
+      ctx.arc(250, 100, 20, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 5) {
+      ctx.beginPath();
+      ctx.moveTo(250, 120);
+      ctx.lineTo(250, 200);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 4) {
+      ctx.beginPath();
+      ctx.moveTo(250, 140);
+      ctx.lineTo(220, 170);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 3) {
+      ctx.beginPath();
+      ctx.moveTo(250, 140);
+      ctx.lineTo(280, 170);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 2) {
+      ctx.beginPath();
+      ctx.moveTo(250, 200);
+      ctx.lineTo(220, 250);
+      ctx.stroke();
+    }
+
+    if (errorsLeft <= 1) {
+      ctx.beginPath();
+      ctx.moveTo(250, 200);
+      ctx.lineTo(280, 250);
+      ctx.stroke();
+    }
   }
 
   gameOver() {
-    // ... your code goes here
+    const img = new Image();
+    img.src = "images/gameover.png";
+    img.onload = () => {
+      this.context.drawImage(
+        img,
+        0,
+        0,
+        this.context.canvas.width,
+        this.context.canvas.height
+      );
+    };
   }
 
   winner() {
-    // ... your code goes here
+    const img = new Image();
+    img.src = "images/awesome.png";
+    img.onload = () => {
+      this.context.drawImage(
+        img,
+        0,
+        0,
+        this.context.canvas.width,
+        this.context.canvas.height
+      );
+    };
   }
 }
diff --git a/javascript/hangman.js b/javascript/hangman.js
@@ -1,55 +1,130 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+    this.secretWord = this.pickWord();
+    this.letters = [];
+    this.guessedLetters = "";
+    this.errorsLeft = 10;
   }
 
   pickWord() {
-    // ... your code goes here
+    return this.words[Math.floor(Math.random() * this.words.length)];
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    if (keyCode >= 65 && keyCode <= 90) {
+      return true;
+    } else {
+      return false;
+    }
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    if (this.letters.includes(letter)) {
+      return false;
+    } else {
+      return true;
+    }
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += letter;
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    this.errorsLeft--;
+    if (!this.letters.includes(letter)) {
+      this.letters.push(letter);
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    if (this.errorsLeft > 0) {
+      return false;
+    } else {
+      return true;
+    }
   }
 
   checkWinner() {
-    // ... your code goes here
+    for (let i = 0; i < this.secretWord.length; i++) {
+      if (!this.guessedLetters.includes(this.secretWord[i])) {
+        return false;
+      }
+    }
+    return true;
   }
 }
 
 let hangman;
+let hangmanCanvas;
 
-const startGameButton = document.getElementById('start-game-button');
+const startGameButton = document.getElementById("start-game-button");
 
 if (startGameButton) {
-  startGameButton.addEventListener('click', event => {
-    hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+  startGameButton.addEventListener("click", (event) => {
+    hangman = new Hangman([
+      "node",
+      "javascript",
+      "react",
+      "miami",
+      "paris",
+      "amsterdam",
+      "lisboa",
+    ]);
 
-    // HINT (uncomment when start working on the canvas portion of the lab)
-    // hangman.secretWord = hangman.pickWord();
-    // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard();
 
-    // ... your code goes here
+    console.log("Game started! Secret word:", hangman.secretWord);
   });
 }
 
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+document.addEventListener("keydown", (event) => {
+  if (!hangman || !hangmanCanvas) {
+    console.log("Game not started yet! Click START GAME first.");
+    return;
+  }
+
+  const keyCode = event.keyCode;
+  const letter = event.key.toLowerCase();
+
+  if (hangman.checkIfLetter(keyCode)) {
+    if (hangman.checkClickedLetters(letter)) {
+      if (hangman.secretWord.includes(letter)) {
+        console.log("Correct letter:", letter);
+        hangman.addCorrectLetter(letter);
+
+        for (let i = 0; i < hangman.secretWord.length; i++) {
+          if (hangman.secretWord[i] === letter) {
+            hangmanCanvas.writeCorrectLetter(i);
+          }
+        }
+
+        if (hangman.checkWinner()) {
+          console.log("You win!");
+          setTimeout(() => {
+            hangmanCanvas.winner();
+          }, 500);
+        }
+      } else {
+        console.log("Wrong letter:", letter);
+        hangman.addWrongLetter(letter);
+
+        hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+        hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+        if (hangman.checkGameOver()) {
+          console.log("Game Over!");
+          setTimeout(() => {
+            hangmanCanvas.gameOver();
+          }, 500);
+        }
+      }
+    } else {
+      console.log("Letter already used:", letter);
+    }
+  } else {
+    console.log("Please press a letter key (A-Z)");
+  }
 });
diff --git a/styles/styles.css b/styles/styles.css
@@ -1,5 +1,14 @@
-.game-logo {
+/* Made some changes to see better the game */
+body {
+  background-color: #f4f4f4;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
 
+.game-logo {
+  max-width: 300px;
+  height: auto;
 }
 
 #start-game-button {
@@ -12,6 +21,17 @@
   border-radius: 5px;
 }
 
+#start-game-button:hover {
+  transform: translateY(-2px);
+}
+
+
+
 #hangman {
   text-align: center;
+  border: 2px solid #333;
+  background-color: white;
+  margin: 20px auto;
+  display: block;
 }
+