web-dev-open · Bharathkompally · May 21, 2024
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/images/awesomee.png b/images/awesomee.png
diff --git a/index.html b/index.html
@@ -10,18 +10,19 @@
   <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>
+      <button id="start-game-button" type="button">START GAME</button>
     </div>
     <div style="text-align:center;">
-      <canvas id="hangman" height="800px" width="1200px"></canvas>
+      <canvas id="hangman" height="800px" width="700px"></canvas>
     </div>
     <script type="text/javascript" src="javascript/canvas.js"></script>
     <script type="text/javascript" src="javascript/hangman.js"></script>
+
   </body>
 </html>
diff --git a/javascript/canvas.js b/javascript/canvas.js
@@ -1,34 +1,128 @@
 class HangmanCanvas {
   constructor(secretWord) {
-    this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+      this.context = document.getElementById('hangman').getContext('2d');
+      this.secretWord = secretWord;
   }
 
   createBoard() {
-    // ... your code goes here
+      this.context.clearRect(0, 0, 1200, 800);
+      this.drawLines();
+  }
+
+  writeHint(hint) {
+      this.context.font = '40px 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 = '30px 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 = '30px 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,50,50);
+      };
   }
 
   winner() {
-    // ... your code goes here
+      const awesome = new Image();
+      awesome.src = 'images/awesomee.png';
+      awesome.onload = () => {
+          this.context.drawImage(awesome,-70,10);
+      };
   }
 }
diff --git a/javascript/hangman.js b/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();
+          }
+        }
+      }
+    }
+  }
+});
diff --git a/node_modules/.bin/glob b/node_modules/.bin/glob
diff --git a/node_modules/.bin/glob.cmd b/node_modules/.bin/glob.cmd
diff --git a/node_modules/.bin/glob.ps1 b/node_modules/.bin/glob.ps1
diff --git a/node_modules/.bin/jasmine b/node_modules/.bin/jasmine
diff --git a/node_modules/.bin/jasmine.cmd b/node_modules/.bin/jasmine.cmd