Finish the iterations

javascript/canvas.js

@@ -2,33 +2,133 @@ 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()
+  }
+  writeHint(hint)
+  {
+    this.context.font='30px sans-serif'
+    this.context.fillText(`HINT  : ${hint}`,200,50)
   }
 
   drawLines() {
     // ... your code goes here
+    let k=180;
+    for(let i=0;i<=this.secretWord.length;i++)
+    {
+      this.context.beginPath();
+      k+=20;
+      this.context.moveTo(k,700);
+      this.context.lineWidth=5;
+      k+=60;
+      this.context.lineTo(k,700);
+      this.context.stroke();
+    }
   }
 
   writeCorrectLetter(index) {
     // ... your code goes here
+    const letter=this.secretWord[index]
+    this.context.font='40px monospace'
+    const x=220+(20+60)*index;
+    this.context.fillText(letter,x,680)
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    let k=700;       //extra space from left side 
+    this.context.font='40px monospace'
+    k+=(30*(10-errorsLeft))
+    this.context.fillText(letter.toUpperCase(),k,200)
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
-  }
+    switch (errorsLeft) {
+        case 9:
+            this.context.beginPath();
+            this.context.moveTo(50, 700);
+            this.context.lineTo(150, 700);
+            this.context.stroke();
+            break;
+        case 8:
+            this.context.beginPath();
+            this.context.moveTo(50, 700);
+            this.context.lineTo(100, 630);
+            this.context.stroke();
+            break;
+        case 7:
+            this.context.beginPath();
+            this.context.moveTo(150, 700);
+            this.context.lineTo(100, 630);
+            this.context.stroke();
+            break;
+        case 6:
+            this.context.beginPath();
+            this.context.moveTo(100, 630);
+            this.context.lineTo(100, 100);
+            this.context.stroke();
+            break;
+        case 5:
+            this.context.beginPath();
+            this.context.moveTo(100, 100);
+            this.context.lineTo(400, 100);
+            this.context.stroke();
+            break;
+        case 4:
+            this.context.beginPath();
+            this.context.moveTo(400, 100);
+            this.context.lineTo(400, 160);
+            this.context.stroke();
+            break;
+        case 3:
+            this.context.beginPath();
+            this.context.arc(400, 210, 50, 0, Math.PI * 2);
+            this.context.stroke();
+            break;
+        case 2:
+            this.context.beginPath();
+            this.context.moveTo(400, 260);
+            this.context.lineTo(400, 300);
+            this.context.stroke();
+            break;
+        case 1:
+            this.context.beginPath();
+            this.context.moveTo(400, 260);
+            this.context.lineTo(400, 400);
+            this.context.stroke();
+            break;
+        case 0:
+            this.context.beginPath();
+            this.context.moveTo(400, 400);
+            this.context.lineTo(340, 500);
+            this.context.stroke();
+            break;
+        default:
+            this.context.beginPath();
+            this.context.moveTo(400, 400);
+            this.context.lineTo(460, 500);
+            this.context.stroke();
+    }
+}
+
 
   gameOver() {
-    // ... your code goes here
+    const over = new Image();
+    over.src = "images/gameover.png";
+    over.onload = () => {
+    this.context.drawImage(over, 500,250);
+};
   }
 
   winner() {
     // ... your code goes here
+    const awesome=new Image();
+    awesome.src='images/awesome.png'
+    awesome.onload=()=>{
+    this.context.drawImage(awesome,300,60);
   }
-}
+}}

javascript/hangman.js

@@ -1,55 +1,100 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+    this.secretWord = '';
+    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 /^[A-Z]$/.test(keyCode);
   }
 
   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;
+    if (!this.letters.includes(letter)) {
+      this.letters.push(letter);
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    return this.errorsLeft < 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    if(this.guessedLetters.length==this.secretWord.length)
+      {
+        return true 
+      }
+      return false 
+    }
   }
-}
 
+
+let words = ['Tailwind', 'node', 'java', 'django', 'html', 'react'];
+let hint = [
+  'A CSS framework',
+  'A JavaScript runtime',
+  'A programming language launched in 1995 by Sun Microsystems',
+  'A Python framework for the backend',
+  'A markup language for websites',
+  'A JavaScript framework',
+];
 let hangman;
+let hangmanCanvas;
 
 const startGameButton = document.getElementById('start-game-button');
 
 if (startGameButton) {
-  startGameButton.addEventListener('click', event => {
+  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
+    let pickedWord = hangman.pickWord();
+    hangman.secretWord = pickedWord.toUpperCase();
+    const hintString = hint[words.indexOf(pickedWord)];
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard();
+    hangmanCanvas.writeHint(hintString);
   });
 }
 
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
-});
+document.addEventListener('keydown', (event) => {
+  if (hangman && !hangman.checkGameOver()) {
+    let key = event.key.toUpperCase();
+    if (hangman.checkIfLetter(key) && !hangman.checkClickedLetters(key)) {
+      if (hangman.secretWord.includes(key)) {
+        if (!hangman.guessedLetters.includes(key)) {
+          for (let i = 0; i < hangman.secretWord.length; i++) {
+            let ch = hangman.secretWord[i];
+            if (ch === key) {
+              hangman.addCorrectLetter(key);
+              hangmanCanvas.writeCorrectLetter(i);
+              if (hangman.checkWinner()) hangmanCanvas.winner();
+            }
+          }
+        }
+      } else {
+        hangman.addWrongLetter(key);
+        if (hangmanCanvas) {
+          hangmanCanvas.writeWrongLetter(key, hangman.errorsLeft);
+          hangmanCanvas.drawHangman(hangman.errorsLeft);
+if (hangman.checkGameOver()) {
+            hangmanCanvas.gameOver();
+          }
+        }
+      }
+    }
+  }
+});

styles/styles.css

@@ -1,5 +1,6 @@
 .game-logo {
-
+  width: 450px;
+  height: 200px;
 }
 
 #start-game-button {
@@ -13,5 +14,7 @@
 }
 
 #hangman {
-  text-align: center;
-}
+  text-align: left;
+  position: absolute;
+  left: 0;
+}