From 81066c82bf7a00570d46321b725a68566ec1261d Mon Sep 17 00:00:00 2001 From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:44:08 +0530 Subject: [PATCH] Done --- index.html | 2 +- javascript/canvas.js | 59 ++++++++++++++++++++++++++++++++++++------- javascript/hangman.js | 59 ++++++++++++++++++++++++++++--------------- styles/styles.css | 7 +++-- 4 files changed, 95 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 302e8e5..a21bbe2 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
diff --git a/javascript/canvas.js b/javascript/canvas.js index ad78760..96d5b14 100644 --- a/javascript/canvas.js +++ b/javascript/canvas.js @@ -1,34 +1,75 @@ 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, 600, 400); // Clear the canvas + this.drawLines(); // Draw lines for each letter in the secret word } drawLines() { - // ... your code goes here + const startX = 100; + const startY = 350; + const lineWidth = 50; + + for (let i = 0; i < this.secretWord.length; i++) { + this.context.beginPath(); + this.context.moveTo(startX + i * lineWidth, startY); + this.context.lineTo(startX + i * lineWidth + 30, startY); + this.context.stroke(); + } } - writeCorrectLetter(index) { - // ... your code goes here + writeCorrectLetter(letter) { + if (!letter) return; // Avoid undefined issues + const startX = 105; + const startY = 340; + const lineWidth = 50; + + for (let i = 0; i < this.secretWord.length; i++) { + if (this.secretWord[i] === letter) { + this.context.font = '30px Arial'; + this.context.fillText(letter.toUpperCase(), startX + i * lineWidth, startY); + } + } } writeWrongLetter(letter, errorsLeft) { - // ... your code goes here + if (!letter) return; // Avoid undefined issues + const startX = 400; + const startY = 50; + + this.context.font = '30px Arial'; + this.context.fillText(letter.toUpperCase(), startX + (10 - errorsLeft) * 30, startY); } drawHangman(errorsLeft) { - // ... your code goes here + // Basic hangman drawing based on errors left (for demo) + const steps = [ + () => { this.context.beginPath(); this.context.moveTo(200, 300); this.context.lineTo(400, 300); this.context.stroke(); }, // base + () => { this.context.beginPath(); this.context.moveTo(300, 300); this.context.lineTo(300, 50); this.context.stroke(); }, // pole + () => { this.context.beginPath(); this.context.moveTo(300, 50); this.context.lineTo(400, 50); this.context.stroke(); }, // top bar + () => { this.context.beginPath(); this.context.moveTo(400, 50); this.context.lineTo(400, 100); this.context.stroke(); }, // rope + () => { this.context.beginPath(); this.context.arc(400, 120, 20, 0, Math.PI * 2); this.context.stroke(); }, // head + () => { this.context.beginPath(); this.context.moveTo(400, 140); this.context.lineTo(400, 200); this.context.stroke(); }, // body + () => { this.context.beginPath(); this.context.moveTo(400, 150); this.context.lineTo(380, 180); this.context.stroke(); }, // left arm + () => { this.context.beginPath(); this.context.moveTo(400, 150); this.context.lineTo(420, 180); this.context.stroke(); }, // right arm + () => { this.context.beginPath(); this.context.moveTo(400, 200); this.context.lineTo(380, 230); this.context.stroke(); }, // left leg + () => { this.context.beginPath(); this.context.moveTo(400, 200); this.context.lineTo(420, 230); this.context.stroke(); }, // right leg + ]; + + if (errorsLeft <= 10 && errorsLeft > 0) { + steps[10 - errorsLeft](); + } } gameOver() { - // ... your code goes here + alert("Game Over! The word was: " + this.secretWord); } winner() { - // ... your code goes here + alert("You Won! The word was: " + this.secretWord); } } diff --git a/javascript/hangman.js b/javascript/hangman.js index ee01d18..31c0a14 100644 --- a/javascript/hangman.js +++ b/javascript/hangman.js @@ -1,55 +1,74 @@ 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; } 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 + if (!this.letters.includes(letter)) { + this.errorsLeft--; + this.letters.push(letter); + hangmanCanvas.drawHangman(this.errorsLeft); // Draw hagman figure after wrong guess + } } checkGameOver() { - // ... your code goes here + return this.errorsLeft <= 0; } checkWinner() { - // ... your code goes here + return [...this.secretWord].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']); +startGameButton.addEventListener('click', () => { + hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']); + hangmanCanvas = new HangmanCanvas(hangman.secretWord); + hangmanCanvas.createBoard(); +}); - // HINT (uncomment when start working on the canvas portion of the lab) - // hangman.secretWord = hangman.pickWord(); - // hangmanCanvas = new HangmanCanvas(hangman.secretWord); +document.addEventListener('keydown', event => { + if (hangman && hangmanCanvas) { + const letter = event.key.toLowerCase(); - // ... your code goes here - }); -} + if (hangman.checkIfLetter(event.keyCode)) { + if (hangman.checkClickedLetters(letter)) { + if (hangman.secretWord.includes(letter)) { + hangman.addCorrectLetter(letter); + hangmanCanvas.writeCorrectLetter(letter); + } else { + hangman.addWrongLetter(letter); + hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft); + } -document.addEventListener('keydown', event => { - // React to user pressing a key - // ... your code goes here + if (hangman.checkGameOver()) hangmanCanvas.gameOver(); + if (hangman.checkWinner()) hangmanCanvas.winner(); + } + } + } }); diff --git a/styles/styles.css b/styles/styles.css index 414e79c..0bdccaa 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,5 +1,6 @@ .game-logo { - + max-width: 100%; + height: auto; } #start-game-button { @@ -10,8 +11,10 @@ padding: 20px 40px; font-size: 30px; border-radius: 5px; + cursor: pointer; } #hangman { - text-align: center; + display: block; + margin: 0 auto; }