web-dev-open · Navin-nash · Oct 3, 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,88 @@ 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, this.context.canvas.width, this.context.canvas.height);
+  this.drawLines();
   }
 
   drawLines() {
     // ... your code goes here
+    const numberOfLetters = this.secretWord.length;
+  const startX = 300;
+  const startY = 700;
+  const lineWidth = 50;
+  const lineSpacing = 10;
+
+  for (let i = 0; i < numberOfLetters; i++) {
+    this.context.beginPath();
+    this.context.moveTo(startX + i * (lineWidth + lineSpacing), startY);
+    this.context.lineTo(startX + i * (lineWidth + lineSpacing) + lineWidth, startY);
+    this.context.stroke();
+  }
   }
 
   writeCorrectLetter(index) {
     // ... your code goes here
+    const letter = this.secretWord[index].toUpperCase();
+  const startX = 305 + index * 60; // Adjusted positions
+  const startY = 690;
+
+  this.context.font = '48px Arial';
+  this.context.fillText(letter, startX, startY);
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const startX = 600;
+  const startY = 200;
+  const spacing = 50;
+
+  this.context.font = '48px Arial';
+  this.context.fillText(letter.toUpperCase(), startX + (10 - errorsLeft) * spacing, startY);
+    // ... your code goes here  
   }
 
   drawHangman(errorsLeft) {
     // ... your code goes here
+    const ctx = this.context;
+
+  switch (errorsLeft) {
+    case 9:
+      // Draw the base
+      ctx.beginPath();
+      ctx.moveTo(100, 700);
+      ctx.lineTo(200, 700);
+      ctx.lineTo(150, 650);
+      ctx.closePath();
+      ctx.stroke();
+      break;
+    // Continue adding cases for each errorLeft value
+    // ...
+    default:
+      break;
+  }
   }
 
   gameOver() {
     // ... your code goes here
+    const img = new Image();
+  img.src = './images/gameover.png';
+  img.onload = () => {
+    this.context.drawImage(img, 200, 100, 400, 400);
+  };
   }
 
   winner() {
     // ... your code goes here
+    const img = new Image();
+    img.src = './images/awesome.png';
+    img.onload = () => {
+      this.context.drawImage(img, 200, 100, 400, 400);
+    };
   }
 }
diff --git a/javascript/hangman.js b/javascript/hangman.js
@@ -1,55 +1,105 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+    this.secretWord = this.pickWord(); // The secret word for the current game
+    this.letters = []; // Letters that have been guessed
+    this.guessedLetters = ''; // Correct letters guessed
+    this.errorsLeft = 10;
   }
 
   pickWord() {
-    // ... your code goes here
+    const randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    return (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122);
   }
 
   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
+    if (!this.letters.includes(letter)) {
+      this.errorsLeft--;
+      this.letters.push(letter);
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    return this.errorsLeft <= 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    const uniqueLettersInSecretWord = [...new Set(this.secretWord)];
+    const guessedLettersArray = this.guessedLetters.split('');
+
+    return uniqueLettersInSecretWord.every(letter =>
+      guessedLettersArray.includes(letter)
+    );
   }
 }
 
 let hangman;
-
+let hangmanCanvas; // Global variable for canvas
 const startGameButton = document.getElementById('start-game-button');
 
 if (startGameButton) {
-  startGameButton.addEventListener('click', event => {
+  startGameButton.onclick=() => {
     hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+
+    hangman.secretWord = hangman.pickWord();
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord); // Initialize canvas instance
+
+    hangman.errorsLeft = 5;
+    hangman.letters = [];
+    hangman.guessedLetters = '';
 
-    // HINT (uncomment when start working on the canvas portion of the lab)
-    // hangman.secretWord = hangman.pickWord();
-    // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard(); // Initialize canvas
+  };
 
-    // ... your code goes here
-  });
 }
 
 document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+  const keyCode = event.keyCode;
+  const letter = event.key.toLowerCase();
+
+  if (hangman.checkIfLetter(keyCode)) {
+    if (hangman.checkClickedLetters(letter)) {
+      hangman.letters.push(letter);
+
+      if (hangman.secretWord.includes(letter)) {
+        hangman.addCorrectLetter(letter);
+
+        for (let i = 0; i < hangman.secretWord.length; i++) {
+          if (hangman.secretWord[i] === letter) {
+            hangmanCanvas.writeCorrectLetter(i); // Update canvas with correct letter
+          }
+        }
+
+        if (hangman.checkWinner()) {
+          console.log('You win!');
+          hangmanCanvas.winner();
+        }
+      } else {
+        hangman.addWrongLetter(letter);
+        hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+        hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+        if (hangman.checkGameOver()) {
+          console.log('Game over!');
+          hangmanCanvas.gameOver();
+        }
+      }
+    } else {
+      console.log('Letter already guessed.');
+    }
+  } else {
+    console.log('Not a valid letter.');
+  }
 });
diff --git a/package-lock.json b/package-lock.json