web-dev-open · trinigelos · Aug 27, 2024
diff --git a/index.html b/index.html
@@ -8,17 +8,13 @@
     <title>Hangman</title>
   </head>
   <body>
-    <div style="text-align:center; margin: 50px 0px;">
-      <img
-        src="http://www.firstcomicsnews.com/wp-content/uploads/2016/09/Hangman-Logo-600x253.png"
-        alt="hangman image"
-        class="game-logo"
-      />
+    <div style="text-align: center; margin: 50px 0px">
+
     </div>
-    <div style="text-align:center; margin: 50px 0px;">
+    <div style="text-align: center; margin: 50px 0px">
       <button id="start-game-button">START GAME</button>
     </div>
-    <div style="text-align:center;">
+    <div style="text-align: center">
       <canvas id="hangman" height="800px" width="1200px"></canvas>
     </div>
     <script type="text/javascript" src="javascript/canvas.js"></script>

diff --git a/javascript/canvas.js b/javascript/canvas.js
@@ -1,34 +1,136 @@
 class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+    this.secretWord = secretWord;
+    this.lineWidth = 50;
   }
 
   createBoard() {
-    // ... your code goes here
+    this.context.clearRect(0, 0, 1200, 800);
+    this.drawLines();
   }
 
   drawLines() {
-    // ... your code goes here
+    const startX = 300;
+    const startY = 700;
+    const spacing = 20;
+
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = '#000';
+
+    this.secretWord.split('').forEach((_, i) => {
+      this.context.beginPath();
+      this.context.moveTo(startX + i * (this.lineWidth + spacing), startY);
+      this.context.lineTo(startX + i * (this.lineWidth + spacing) + this.lineWidth, startY);
+      this.context.stroke();
+    });
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    const startX = 300;
+    const startY = 700;
+    const spacing = 20;
+
+    this.context.font = '48px Arial';
+    this.context.fillStyle = '#000';
+    const letterX = startX + index * (this.lineWidth + spacing) + this.lineWidth / 4;
+    this.context.fillText(this.secretWord[index], letterX, startY - 10);
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const wrongLetterX = 800;
+    const wrongLetterY = 200;
+
+    this.context.font = '48px Arial';
+    this.context.fillStyle = '#000';
+    this.context.fillText(letter, wrongLetterX + (10 - errorsLeft) * 50, wrongLetterY);
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = '#000';
+
+    // Draw hangman parts based on errorsLeft
+    switch (errorsLeft) {
+      case 9: // Draw base
+        this.context.beginPath();
+        this.context.moveTo(100, 700);
+        this.context.lineTo(200, 700);
+        this.context.lineTo(150, 650);
+        this.context.closePath();
+        this.context.stroke();
+        break;
+      case 8: // Draw pole
+        this.context.beginPath();
+        this.context.moveTo(150, 650);
+        this.context.lineTo(150, 200);
+        this.context.stroke();
+        break;
+      case 7: // Draw top bar
+        this.context.beginPath();
+        this.context.moveTo(150, 200);
+        this.context.lineTo(350, 200);
+        this.context.stroke();
+        break;
+      case 6: // Draw rope
+        this.context.beginPath();
+        this.context.moveTo(350, 200);
+        this.context.lineTo(350, 250);
+        this.context.stroke();
+        break;
+      case 5: // Draw head
+        this.context.beginPath();
+        this.context.arc(350, 275, 25, 0, Math.PI * 2);
+        this.context.stroke();
+        break;
+      case 4: // Draw body
+        this.context.beginPath();
+        this.context.moveTo(350, 300);
+        this.context.lineTo(350, 400);
+        this.context.stroke();
+        break;
+      case 3: // Draw left arm
+        this.context.beginPath();
+        this.context.moveTo(350, 325);
+        this.context.lineTo(300, 375);
+        this.context.stroke();
+        break;
+      case 2: // Draw right arm
+        this.context.beginPath();
+        this.context.moveTo(350, 325);
+        this.context.lineTo(400, 375);
+        this.context.stroke();
+        break;
+      case 1: // Draw left leg
+        this.context.beginPath();
+        this.context.moveTo(350, 400);
+        this.context.lineTo(300, 450);
+        this.context.stroke();
+        break;
+      case 0: // Draw right leg
+        this.context.beginPath();
+        this.context.moveTo(350, 400);
+        this.context.lineTo(400, 450);
+        this.context.stroke();
+        break;
+      default:
+        break;
+    }
   }
 
   gameOver() {
-    // ... your code goes here
+    const img = new Image();
+    img.src = './images/gameover.png';
+    img.onload = () => {
+      this.context.drawImage(img, 300, 300, 600, 300);
+    };
   }
 
   winner() {
-    // ... your code goes here
+    const img = new Image();
+    img.src = './images/awesome.png';
+    img.onload = () => {
+      this.context.drawImage(img, 300, 300, 600, 300);
+    };
   }
 }
diff --git a/javascript/hangman.js b/javascript/hangman.js
@@ -1,55 +1,84 @@
 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 randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    return keyCode >= 65 && keyCode <= 90; // Keycodes for 'A' to 'Z'
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    return !this.letters.includes(letter);
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += letter;
+    this.checkWinner();
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    this.errorsLeft--;
+    this.letters.push(letter);
   }
 
   checkGameOver() {
-    // ... your code goes here
+    return this.errorsLeft <= 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    return this.secretWord.split("").every((letter) => this.guessedLetters.includes(letter));
   }
 }
 
 let hangman;
+let hangmanCanvas;
 
 const startGameButton = document.getElementById('start-game-button');
 
 if (startGameButton) {
   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
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+    hangmanCanvas.createBoard();
   });
 }
 
 document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+  if (hangman) {
+    const letter = event.key.toLowerCase();
+
+    if (hangman.checkIfLetter(event.keyCode)) {
+      if (hangman.checkClickedLetters(letter)) {
+        if (hangman.secretWord.includes(letter)) {
+          hangman.addCorrectLetter(letter);
+          hangman.secretWord.split('').forEach((char, index) => {
+            if (char === letter) {
+              hangmanCanvas.writeCorrectLetter(index);
+            }
+          });
+        } else {
+          hangman.addWrongLetter(letter);
+          hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+          hangmanCanvas.drawHangman(hangman.errorsLeft);
+        }
+      }
+
+      if (hangman.checkGameOver()) {
+        hangmanCanvas.gameOver();
+      }
+
+      if (hangman.checkWinner()) {
+        hangmanCanvas.winner();
+      }
+    }
+  }
 });