Hina Nadeem - internship

javascript/canvas.js

@@ -1,34 +1,82 @@
 class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+    this.secretWord = secretWord;
+    this.createBoard(); // Initialize canvas with a clean board
   }
 
   createBoard() {
-    // ... your code goes here
+    this.context.clearRect(0, 0, 1200, 800);
+    this.drawLines();
   }
 
   drawLines() {
-    // ... your code goes here
+    this.context.beginPath();
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = 'black';
+    let x = 500;
+    for (let i = 0; i < this.secretWord.length; i++) {
+      this.context.moveTo(x, 650);
+      this.context.lineTo(x + 50, 650);
+      x += 60;
+    }
+    this.context.stroke();
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    this.context.font = '40px Arial';
+    this.context.fillStyle = 'black';
+    this.context.fillText(this.secretWord[index], 500 + (index * 60), 640);
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    this.context.font = '30px Arial';
+    this.context.fillStyle = 'red';
+    this.context.fillText(letter, 500 + ((10 - errorsLeft) * 30), 700);
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    // Draw Hangman based on errorsLeft
+    this.context.beginPath();
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = 'black';
+
+    if (errorsLeft < 10) { // Head
+      this.context.arc(700, 200, 20, 0, Math.PI * 2, true);
+    }
+    if (errorsLeft < 9) { // Body
+      this.context.moveTo(700, 220);
+      this.context.lineTo(700, 300);
+    }
+    if (errorsLeft < 8) { // Right Arm
+      this.context.moveTo(700, 230);
+      this.context.lineTo(740, 270);
+    }
+    if (errorsLeft < 7) { // Left Arm
+      this.context.moveTo(700, 230);
+      this.context.lineTo(660, 270);
+    }
+    if (errorsLeft < 6) { // Right Leg
+      this.context.moveTo(700, 300);
+      this.context.lineTo(740, 350);
+    }
+    if (errorsLeft < 5) { // Left Leg
+      this.context.moveTo(700, 300);
+      this.context.lineTo(660, 350);
+    }
+
+    this.context.stroke();
   }
 
   gameOver() {
-    // ... your code goes here
+    this.context.font = '50px Arial';
+    this.context.fillStyle = 'red';
+    this.context.fillText('Game Over', 500, 400);
   }
 
   winner() {
-    // ... your code goes here
+    this.context.font = '50px Arial';
+    this.context.fillStyle = 'green';
+    this.context.fillText('You Win!', 500, 400);
   }
 }

javascript/hangman.js

@@ -1,55 +1,87 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+    this.secretWord = this.pickWord(); // Initialize the secret word
+    this.letters = []; // Array to store guessed letters
+    this.guessedLetters = ''; // String to store guessed letters
+    this.errorsLeft = 10; // Initial errors left
   }
 
   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; // Check if the keyCode is between A (65) and Z (90)
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    return !this.letters.includes(letter);
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += letter;
+    // Check if the user has guessed all letters of the word
+    return this.checkWinner();
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    this.errorsLeft--;
+    if (!this.letters.includes(letter)) {
+      this.letters.push(letter);
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    return this.errorsLeft <= 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    for (let char of this.secretWord) {
+      if (!this.guessedLetters.includes(char)) {
+        return false;
+      }
+    }
+    return true;
   }
 }
 
 let hangman;
+let hangmanCanvas;
 
 const startGameButton = document.getElementById('start-game-button');
 
 if (startGameButton) {
-  startGameButton.addEventListener('click', event => {
+  startGameButton.addEventListener('click', () => {
     hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
 
-    // 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
+    // Set up the canvas and start the game
+    hangmanCanvas.createBoard();
   });
 }
 
 document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+  const letter = event.key.toLowerCase();
+  if (hangman.checkIfLetter(event.keyCode) && hangman.checkClickedLetters(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);
+        }
+      }
+    } else {
+      hangman.addWrongLetter(letter);
+      hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+      hangmanCanvas.drawHangman(hangman.errorsLeft);
+    }
+
+    if (hangman.checkGameOver()) {
+      hangmanCanvas.gameOver();
+    } else if (hangman.checkWinner()) {
+      hangmanCanvas.winner();
+    }
+  }
 });