updated lab done

javascript/canvas.js

@@ -2,33 +2,122 @@ class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
     // ... your code goes here
+    this.ctx = document.getElementById('hangman').getContext('2d');
+    this.ctx.lineWidth = 4;
+    this.ctx.font = '40px arial';
+    this.secretWord = secretWord;
+    this.hangmanShape = ['base','pole','top','rope','head', 'body', 'leftLeg', 'rightLeg', 'leftArm', 'rightArm']// ... your code goes here
   }
 
   createBoard() {
-    // ... your code goes here
+     this.ctx.clearRect(0,0,1200, 800)
+    this.drawLines();
+// ... your code goes here
   }
 
   drawLines() {
-    // ... your code goes here
+   const x = 300;
+
+    for (let i = 0; i < this.secretWord.length; i++) {
+      this.ctx.beginPath();
+      this.ctx.moveTo(x + i * 52, 600 );
+      this.ctx.lineTo(x + i * 52 + 40, 600);
+      this.ctx.stroke(); // ... your code goes here
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+     const x = 300 + index * 50;
+
+    this.ctx.fillText(this.secretWord[index], x, 600);// ... your code goes here
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const x = 1100 + (10 - errorsLeft) * 40;
+    this.ctx.fillText(letter, x, 200); // ... your code goes here
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    drawHangman(shape) {
+
+    switch (shape) {
+      case 'bottom':
+        this.ctx.beginPath();
+        this.ctx.moveTo(150, 500);
+        this.ctx.lineTo(250, 500);
+        this.ctx.stroke();
+        break;
+      case 'pole':
+        this.ctx.beginPath();
+        this.ctx.moveTo(150, 500);
+        this.ctx.lineTo(200, 100);
+        this.ctx.stroke();
+        break;
+      case 'top':
+        this.ctx.beginPath();
+        this.ctx.moveTo(200, 100);
+        this.ctx.lineTo(400, 100);
+        this.ctx.stroke();
+        break;
+      case 'rope':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 100);
+        this.ctx.lineTo(400, 160);
+        this.ctx.stroke();
+        break;
+      case 'head':
+        this.ctx.beginPath();
+        this.ctx.arc(400, 190, 30, 0, Math.PI * 2);
+        this.ctx.stroke();
+        break;
+      case 'body':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 200);
+        this.ctx.lineTo(400, 350);
+        this.ctx.stroke();
+        break;
+      case 'leftArm':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 200);
+        this.ctx.lineTo(350, 270);
+        this.ctx.stroke();
+        break;
+      case 'rightArm':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 200);
+        this.ctx.lineTo(450, 270);
+        this.ctx.stroke();
+        break;
+      case 'leftLeg':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 350);
+        this.ctx.lineTo(350, 400);
+        this.ctx.stroke();
+        break;
+      case 'rightLeg':
+        this.ctx.beginPath();
+        this.ctx.moveTo(400, 350);
+        this.ctx.lineTo(450, 400);
+        this.ctx.stroke();
+        break;
+    }
+   // ... your code goes here
   }
 
   gameOver() {
-    // ... your code goes here
+     this.ctx.clearRect(0, 0, 1200, 700);
+    const gameOverimg = new Image();
+    this.gameOverimg.src = './images/gameover.png';
+    this.gameOverimg.onload = () => {
+      this.ctx.drawImage(gameOverimg, 300, 200);
+    };// ... your code goes here
   }
 
   winner() {
-    // ... your code goes here
+     this.ctx.clearRect(0, 0, 1200, 700);
+    const winnerimg = new Image();
+    winnerimg.src = './images/awesome.png';
+    winnerimg.onload = () => {
+      this.ctx.drawImage(winnerimg, 300, 200);
+    };// ... your code goes here
   }
 }

javascript/hangman.js

@@ -1,35 +1,67 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+     this.secretWord = this.pickWord();
+    this.letters = [];
+    this.guessedLetters = '';
+    this.errorsLeft = 10;// ... your code goes here
   }
 
   pickWord() {
-    // ... your code goes here
+     const wlength = this.words.length;
+    const index = Math.floor(Math.random()*wlength);
+    const randomInd =  this.words[index];
+    return randomInd;// ... your code goes here
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+
+    if(keyCode >= 65 && keyCode <= 90){
+      return true;
+    }
+    return false;
+  } // ... your code goes here
   }
 
   checkClickedLetters(letter) {
     // ... your code goes here
+
+    if(!this.letters.includes(letter)){
+      return true;
+    }
+    return false;
+  }// ... your code goes here
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+     this.guessedLetters += letter;
+    if(this.checkWinner()){
+      alert('You Won!');
+      console.log('You Won!')
+      return;
+    }// ... your code goes here
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+      this.errorsLeft--;
+    if(!this.letters.includes('letter')){
+      this.letters.push(letter);
+    }
+// ... your code goes here
   }
 
   checkGameOver() {
-    // ... your code goes here
+    if(this.errorsLeft === 0){
+      return true;
+    }
+    return false;
+   // ... your code goes here
   }
 
   checkWinner() {
-    // ... your code goes here
+
+    return (this.secretWord.split('').every(letter => this.guessedLetters.includes(letter)));
+  // ... your code goes here
   }
 }
 
@@ -44,12 +76,44 @@ if (startGameButton) {
     // 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);
+    hangmanCanvas.createBoard();
     // ... your code goes here
   });
 }
 
 document.addEventListener('keydown', event => {
-  // React to user pressing a key
+
+  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 {
+          // wrong letter
+          hangman.addWrongLetter();
+          hangmanCanvas.writeWrongLetter(e.key, hangman.errorsLeft);
+          hangmanCanvas.drawHangman(hangmanCanvas.hangmanShape[10-hangman.errorsLeft])
+        }
+
+      } 
+      else {
+        alert('letter Repeated .Please enter new letter')
+      }
+    }
+  } // React to user pressing a key
   // ... your code goes here
 });

styles/styles.css

@@ -10,6 +10,13 @@
   padding: 20px 40px;
   font-size: 30px;
   border-radius: 5px;
+  border: 0;
+  box-shadow: 0;
+  background: linear-gradient(to bottom, #9DA400, #BAC600);
+  color: #fff;
+  padding: 20px 40px;
+  font-size: 30px;
+  border-radius: 5px;
 }
 
 #hangman {