web-dev-open · Poorna-chandra2000 · Oct 5, 2024
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
@@ -2,33 +2,80 @@ class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
     // ... your code goes here
+    this.secretWord = secretWord;
   }
 
   createBoard() {
     // ... your code goes here
+    this.context.clearRect(0, 0, 1200, 800);
+    this.drawLines();
   }
 
   drawLines() {
     // ... your code goes here
+    const xStart = 200;
+    const yStart = 700;
+    const lineLength = 50;
+
+    for (let i = 0; i < this.secretWord.length; i++) {
+      this.context.beginPath();
+      this.context.moveTo(xStart + i * (lineLength + 10), yStart);
+      this.context.lineTo(xStart + i * (lineLength + 10) + lineLength, yStart);
+      this.context.stroke();
+      this.context.closePath();
+    }
   }
 
   writeCorrectLetter(index) {
     // ... your code goes here
+    const xStart = 200;
+    const yStart = 700;
+    const lineLength = 50;
+    const xPosition = xStart + index * (lineLength + 10) + 15;
+    const yPosition = yStart - 20;
+
+    this.context.font = '48px Arial';
+    this.context.fillText(this.secretWord[index].toUpperCase(), xPosition, yPosition);
   }
 
   writeWrongLetter(letter, errorsLeft) {
     // ... your code goes here
+    this.context.font = '48px Arial';
+    this.context.fillText(letter.toUpperCase(), 700 + (10 - errorsLeft) * 50, 200);
   }
 
   drawHangman(errorsLeft) {
     // ... your code goes here
+    this.context.strokeStyle = '#000';
+    this.context.lineWidth = 5;
+
+    if (errorsLeft === 9) {
+      this.context.beginPath();
+      this.context.moveTo(100, 700);
+      this.context.lineTo(200, 700);
+      this.context.stroke();
+    } else if (errorsLeft === 8) {
+      this.context.lineTo(150, 650);
+      this.context.stroke();
+    } 
   }
 
   gameOver() {
     // ... your code goes here
+    const img = new Image();
+    img.src = './images/gameover.png';
+    img.onload = () => {
+      this.context.drawImage(img, 300, 100);
+    };
   }
 
   winner() {
     // ... your code goes here
+    const img = new Image();
+    img.src = './images/awesome.png';
+    img.onload = () => {
+      this.context.drawImage(img, 300, 100);
+    };
   }
+
 }
diff --git a/javascript/hangman.js b/javascript/hangman.js
@@ -2,38 +2,51 @@ 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
+    return keyCode >= 65 && keyCode <= 90;
   }
 
   checkClickedLetters(letter) {
     // ... your code goes here
+    return !this.letters.includes(letter);
   }
 
   addCorrectLetter(letter) {
     // ... your code goes here
+    this.guessedLetters += letter;
   }
 
   addWrongLetter(letter) {
     // ... your code goes here
+    this.errorsLeft -= 1;
+    this.letters.push(letter);
   }
 
   checkGameOver() {
     // ... your code goes here
+    return this.errorsLeft === 0;
   }
 
   checkWinner() {
     // ... your code goes here
+    return [...this.secretWord].every((char) => this.guessedLetters.includes(char));
   }
 }
 
 let hangman;
+let hangmanCanvas;
 
 const startGameButton = document.getElementById('start-game-button');
 
@@ -42,14 +55,42 @@ if (startGameButton) {
     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);
+    hangman.secretWord = hangman.pickWord();
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
 
     // ... your code goes here
+    hangmanCanvas.createBoard();
   });
 }
 
 document.addEventListener('keydown', event => {
   // React to user pressing a key
   // ... your code goes here
+  if (hangman && hangman.checkIfLetter(event.keyCode)) {
+    const letter = event.key.toUpperCase();
+
+    if (hangman.checkClickedLetters(letter)) {
+      if (hangman.secretWord.toUpperCase().includes(letter)) {
+        hangman.addCorrectLetter(letter);
+
+        hangman.secretWord.split('').forEach((char, index) => {
+          if (char.toUpperCase() === letter) {
+            hangmanCanvas.writeCorrectLetter(index);
+          }
+        });
+
+        if (hangman.checkWinner()) {
+          hangmanCanvas.winner();
+        }
+      } else {
+        hangman.addWrongLetter(letter);
+        hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+        hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+        if (hangman.checkGameOver()) {
+          hangmanCanvas.gameOver();
+        }
+      }
+    }
+  }
 });