web-dev-open · Ribin-K-Roy · May 24, 2024
diff --git a/index.html b/index.html
@@ -10,14 +10,15 @@
   <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"
       />
     </div>
     <div style="text-align:center; margin: 50px 0px;">
       <button id="start-game-button">START GAME</button>
     </div>
+    <div id="commence"></div>
     <div style="text-align:center;">
       <canvas id="hangman" height="800px" width="1200px"></canvas>
     </div>

diff --git a/javascript/canvas.js b/javascript/canvas.js
@@ -1,34 +1,126 @@
 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']
   }
 
   createBoard() {
-    // ... your code goes here
+    this.ctx.clearRect(0,0,1200, 780);
+    this.drawLines();
+
   }
 
   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();
+
+    }
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    const x = 300 + index * 50;
+
+    this.ctx.fillText(this.secretWord[index], x, 600);
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const x = 700 + (10 - errorsLeft) * 40;
+    this.ctx.fillText(letter, x, 200);
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
-  }
-
+
+      switch (errorsLeft) {
+        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, 220);
+          this.ctx.lineTo(400, 350);
+          this.ctx.stroke();
+          break;
+        case 'leftArm':
+          this.ctx.beginPath();
+          this.ctx.moveTo(400, 220);
+          this.ctx.lineTo(350, 270);
+          this.ctx.stroke();
+          break;
+        case 'rightArm':
+          this.ctx.beginPath();
+          this.ctx.moveTo(400, 220);
+          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;
+      }
+
+}
   gameOver() {
-    // ... your code goes here
+
+    this.ctx.clearRect(0, 0, 1200, 740);
+    const gameOverimg = new Image();
+    gameOverimg.src = './images/gameover.png';
+    gameOverimg.onload = () => {
+      this.ctx.drawImage(gameOverimg, 100, 200);
+    };
+
   }
 
   winner() {
-    // ... your code goes here
+    this.ctx.clearRect(0, 0, 1200, 740);
+    const winnerimg = new Image();
+    winnerimg.src = './images/awesome.png';
+    winnerimg.onload = () => {
+      this.ctx.drawImage(winnerimg, 100, 200);
+    };
+
   }
 }
diff --git a/javascript/hangman.js b/javascript/hangman.js
@@ -1,35 +1,59 @@
 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
+    const wlength = this.words.length;
+    const index = Math.floor(Math.random() * wlength);
+    const randomInd =  this.words[index];
+    return randomInd;
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    if(keyCode >= 65 && keyCode <= 90){
+      return true;
+    }
+    return false;
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    if(this.letters.includes(letter)){
+      return false;
+    }
+    return true;
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += this.secretWord[letter];
+
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    this.errorsLeft--;
+    if(!this.letters.includes(letter)){
+      this.letters.push(letter);
+      console.log(this.letters);
+    }
+
   }
 
   checkGameOver() {
-    // ... your code goes here
+    if(this.errorsLeft === 0){
+      return true;
+    }
+    return false;
   }
 
   checkWinner() {
-    // ... your code goes here
+    let win =  this.secretWord.split('').every(letter => this.guessedLetters.includes(letter));
+    console.log(win);
+    console.log(this.guessedLetters);
+    return win;
   }
 }
 
@@ -42,14 +66,52 @@ 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);
-
-    // ... your code goes here
+     hangman.secretWord = hangman.pickWord();
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard();
   });
 }
 
 document.addEventListener('keydown', event => {
   // React to user pressing a key
-  // ... your code goes here
+  if (!hangman.checkGameOver() && !hangman.checkWinner()) {
+    console.log("carry on!");
+    if (hangman.checkIfLetter(event.which)) {
+      console.log("letter");
+      if (hangman.checkClickedLetters(event.key)) {
+        if (hangman.secretWord.includes(event.key)) {
+
+          const indx = [];
+
+          for(let i = 0; i < hangman.secretWord.length; i++) {
+            if (hangman.secretWord[i] === event.key) indx.push(i);
+          }
+
+          indx.map(index => {
+            hangman.addCorrectLetter(index);
+            hangmanCanvas.writeCorrectLetter(index);
+          })
+
+        } else {
+          // wrong letter
+          hangman.addWrongLetter(event.key);
+          hangmanCanvas.writeWrongLetter(event.key, hangman.errorsLeft);
+          hangmanCanvas.drawHangman(hangmanCanvas.hangmanShape[10-hangman.errorsLeft])
+        }
+
+      } 
+      else {
+        alert('letter Repeated .Please enter new letter');
+      }
+    }
+    else
+      console.log("not a letter");
+  }
+  else{
+    if(hangman.checkWinner())
+      hangmanCanvas.winner();
+    else
+      hangmanCanvas.gameOver();
+  }
+
 });