done

index.html

@@ -24,4 +24,4 @@
     <script type="text/javascript" src="javascript/canvas.js"></script>
     <script type="text/javascript" src="javascript/hangman.js"></script>
   </body>
-</html>
+</html>

javascript/canvas.js

@@ -1,34 +1,85 @@
 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.context.lineWidth = 2;
   }
-
   drawLines() {
-    // ... your code goes here
+    const wordLength = this.secretWord.length;
+    const lineWidth = 50;
+    const initialX = 100;
+    const initialY = 600;
+    for (let i = 0; i < wordLength; i++) {
+      this.context.beginPath();
+      this.context.moveTo(initialX + i * lineWidth, initialY);
+      this.context.lineTo(initialX + i * lineWidth + 40, initialY);
+      this.context.stroke();
+    }
   }
-
   writeCorrectLetter(index) {
-    // ... your code goes here
+    const lineWidth = 50;
+    const initialX = 100;
+    const initialY = 580;
+    this.context.font = "30px Arial";
+    this.context.fillText(letter, initialX + index * lineWidth, initialY);
   }
-
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
-  }
+    const initialX = 400;
+    const initialY = 100;
+    const step = 40;
 
+    this.context.font = "30px Arial";
+    this.context.fillText(letter, initialX - (6 - errorsLeft) * step, initialY);
+  }
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    switch (errorsLeft) {
+      case 6:
+        this.context.beginPath();
+        this.context.arc(250, 200, 50, 0, Math.PI * 2);
+        this.context.stroke();
+        break;
+      case 5:
+        this.context.moveTo(250, 250);
+        this.context.lineTo(250, 400);
+        this.context.stroke();
+        break;
+      case 4:
+        this.context.moveTo(250, 250);
+        this.context.lineTo(200, 300);
+        this.context.stroke();
+        break;
+      case 3:
+        this.context.moveTo(250, 250);
+        this.context.lineTo(300, 300);
+        this.context.stroke();
+        break;
+      case 2:
+        this.context.moveTo(250, 400);
+        this.context.lineTo(200, 500);
+        this.context.stroke();
+        break;
+      case 1:
+        this.context.moveTo(250, 400);
+        this.context.lineTo(300, 500);
+        this.context.stroke();
+        break;
+    }
   }
-
   gameOver() {
-    // ... your code goes here
+    this.context.font = "40px Arial";
+    this.context.fillText("Game Over", 400, 300);
   }
-
   winner() {
-    // ... your code goes here
+    this.context.font = "40px Arial";
+    this.context.fillText("You Win!", 400, 300);
   }
 }
+window.HangmanCanvas = HangmanCanvas;

javascript/hangman.js

@@ -1,55 +1,96 @@
 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
+    const wlength = this.words.length;
+    const index = Math.floor(Math.random() * wlength);
+    const randomInd = this.words[index];
+    return randomInd;
   }
-
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    if (keyCode >= 65 && keyCode <= 90) {
+      return true;
+    }
+    return false;
   }
-
   checkClickedLetters(letter) {
-    // ... your code goes here
+    if (!this.letters.includes(letter)) {
+      return true;
+    }
+    return false;
   }
-
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += letter;
+    if (this.checkWinner()) {
+      alert("You Won!");
+      console.log("You Won!");
+      return;
+    }
   }
-
   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 true;
+    }
+    return false;
   }
-
   checkWinner() {
-    // ... your code goes here
+    return this.secretWord
+      .split("")
+      .every((letter) => this.guessedLetters.includes(letter));
   }
 }
-
 let hangman;
-
-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']);
-
-    // HINT (uncomment when start working on the canvas portion of the lab)
-    // hangman.secretWord = hangman.pickWord();
-    // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
-
-    // ... your code goes here
+  startGameButton.addEventListener("click", (event) => {
+    hangman = new Hangman([
+      "node",
+      "javascript",
+      "react",
+      "miami",
+      "paris",
+      "amsterdam",
+      "lisboa",
+    ]);
+    hangman.secretWord = hangman.pickWord();
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard();
   });
 }
-
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+document.addEventListener("keydown", (event) => {
+  if (!hangman.checkGameOver() && !hangman.checkWinner()) {
+    if (hangman.checkIfLetter(e.which)) {
+      if (hangman.checkClickedLetters(e.key)) {
+        if (hangman.secretWord.includes(e.key)) {
+          const indx = [];
+          for (let i = 0; i < hangman.secretWord.length; i++) {
+            if (hangman.secretWord[i] === e.key) indx.push(i);
+          }
+          indx.map((index) => {
+            hangman.addCorrectLetter(index);
+            hangmanCanvas.writeCorrectLetter(index);
+          });
+        } else {
+          hangman.addWrongLetter();
+          hangmanCanvas.writeWrongLetter(e.key, hangman.errorsLeft);
+          hangmanCanvas.drawHangman(
+            hangmanCanvas.hangmanShape[10 - hangman.errorsLeft]
+          );
+        }
+      } else {
+        alert("letter Repeated .Please enter new letter");
+      }
+    }
+  }
 });

styles/styles.css

@@ -14,4 +14,4 @@
 
 #hangman {
   text-align: center;
-}
+}