From 643713c3ecf83ae0b60a796d78993c33614c101e Mon Sep 17 00:00:00 2001 From: Poorna Chandra2000 Date: Sun, 6 Oct 2024 02:39:19 +0530 Subject: [PATCH] done --- index.html | 2 +- javascript/canvas.js | 47 +++++++++++++++++++++++++++++++++++++++++++ javascript/hangman.js | 45 +++++++++++++++++++++++++++++++++++++++-- 3 files changed, 91 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 302e8e5..a0a0aa1 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
diff --git a/javascript/canvas.js b/javascript/canvas.js index ad78760..4dc190f 100644 --- a/javascript/canvas.js +++ b/javascript/canvas.js @@ -2,33 +2,80 @@ 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(); } drawLines() { // ... your code goes here + const xStart = 200; + const yStart = 700; + const lineLength = 50; + + for (let i = 0; i < this.secretWord.length; i++) { + this.context.beginPath(); + this.context.moveTo(xStart + i * (lineLength + 10), yStart); + this.context.lineTo(xStart + i * (lineLength + 10) + lineLength, yStart); + this.context.stroke(); + this.context.closePath(); + } } writeCorrectLetter(index) { // ... your code goes here + const xStart = 200; + const yStart = 700; + const lineLength = 50; + const xPosition = xStart + index * (lineLength + 10) + 15; + const yPosition = yStart - 20; + + this.context.font = '48px Arial'; + this.context.fillText(this.secretWord[index].toUpperCase(), xPosition, yPosition); } writeWrongLetter(letter, errorsLeft) { // ... your code goes here + this.context.font = '48px Arial'; + this.context.fillText(letter.toUpperCase(), 700 + (10 - errorsLeft) * 50, 200); } drawHangman(errorsLeft) { // ... your code goes here + this.context.strokeStyle = '#000'; + this.context.lineWidth = 5; + + if (errorsLeft === 9) { + this.context.beginPath(); + this.context.moveTo(100, 700); + this.context.lineTo(200, 700); + this.context.stroke(); + } else if (errorsLeft === 8) { + this.context.lineTo(150, 650); + this.context.stroke(); + } } gameOver() { // ... your code goes here + const img = new Image(); + img.src = './images/gameover.png'; + img.onload = () => { + this.context.drawImage(img, 300, 100); + }; } winner() { // ... your code goes here + const img = new Image(); + img.src = './images/awesome.png'; + img.onload = () => { + this.context.drawImage(img, 300, 100); + }; } + } diff --git a/javascript/hangman.js b/javascript/hangman.js index ee01d18..be364d9 100644 --- a/javascript/hangman.js +++ b/javascript/hangman.js @@ -2,38 +2,51 @@ 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 + return this.words[Math.floor(Math.random() * this.words.length)]; } 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 + this.errorsLeft -= 1; + this.letters.push(letter); } checkGameOver() { // ... your code goes here + return this.errorsLeft === 0; } checkWinner() { // ... your code goes here + return [...this.secretWord].every((char) => this.guessedLetters.includes(char)); } } let hangman; +let hangmanCanvas; const startGameButton = document.getElementById('start-game-button'); @@ -42,14 +55,42 @@ 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); + hangman.secretWord = hangman.pickWord(); + hangmanCanvas = new HangmanCanvas(hangman.secretWord); // ... your code goes here + hangmanCanvas.createBoard(); }); } document.addEventListener('keydown', event => { // React to user pressing a key // ... your code goes here + if (hangman && hangman.checkIfLetter(event.keyCode)) { + const letter = event.key.toUpperCase(); + + if (hangman.checkClickedLetters(letter)) { + if (hangman.secretWord.toUpperCase().includes(letter)) { + hangman.addCorrectLetter(letter); + + hangman.secretWord.split('').forEach((char, index) => { + if (char.toUpperCase() === letter) { + hangmanCanvas.writeCorrectLetter(index); + } + }); + + if (hangman.checkWinner()) { + hangmanCanvas.winner(); + } + } else { + hangman.addWrongLetter(letter); + hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft); + hangmanCanvas.drawHangman(hangman.errorsLeft); + + if (hangman.checkGameOver()) { + hangmanCanvas.gameOver(); + } + } + } + } });