From e9d275a095374766d064aad8160e9eef25b55307 Mon Sep 17 00:00:00 2001 From: Pawan Rawat Date: Thu, 29 Aug 2024 11:53:29 +0530 Subject: [PATCH] done --- index.html | 2 +- javascript/canvas.js | 83 +++++++++++++++++++++++++++------- javascript/hangman.js | 103 +++++++++++++++++++++++++++++------------- styles/styles.css | 2 +- 4 files changed, 141 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 302e8e5..22acb57 100644 --- a/index.html +++ b/index.html @@ -24,4 +24,4 @@ - + \ No newline at end of file diff --git a/javascript/canvas.js b/javascript/canvas.js index ad78760..1db1370 100644 --- a/javascript/canvas.js +++ b/javascript/canvas.js @@ -1,34 +1,85 @@ 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, + this.context.canvas.width, + this.context.canvas.height + ); + this.context.lineWidth = 2; } - drawLines() { - // ... your code goes here + const wordLength = this.secretWord.length; + const lineWidth = 50; + const initialX = 100; + const initialY = 600; + for (let i = 0; i < wordLength; i++) { + this.context.beginPath(); + this.context.moveTo(initialX + i * lineWidth, initialY); + this.context.lineTo(initialX + i * lineWidth + 40, initialY); + this.context.stroke(); + } } - writeCorrectLetter(index) { - // ... your code goes here + const lineWidth = 50; + const initialX = 100; + const initialY = 580; + this.context.font = "30px Arial"; + this.context.fillText(letter, initialX + index * lineWidth, initialY); } - writeWrongLetter(letter, errorsLeft) { - // ... your code goes here - } + const initialX = 400; + const initialY = 100; + const step = 40; + this.context.font = "30px Arial"; + this.context.fillText(letter, initialX - (6 - errorsLeft) * step, initialY); + } drawHangman(errorsLeft) { - // ... your code goes here + switch (errorsLeft) { + case 6: + this.context.beginPath(); + this.context.arc(250, 200, 50, 0, Math.PI * 2); + this.context.stroke(); + break; + case 5: + this.context.moveTo(250, 250); + this.context.lineTo(250, 400); + this.context.stroke(); + break; + case 4: + this.context.moveTo(250, 250); + this.context.lineTo(200, 300); + this.context.stroke(); + break; + case 3: + this.context.moveTo(250, 250); + this.context.lineTo(300, 300); + this.context.stroke(); + break; + case 2: + this.context.moveTo(250, 400); + this.context.lineTo(200, 500); + this.context.stroke(); + break; + case 1: + this.context.moveTo(250, 400); + this.context.lineTo(300, 500); + this.context.stroke(); + break; + } } - gameOver() { - // ... your code goes here + this.context.font = "40px Arial"; + this.context.fillText("Game Over", 400, 300); } - winner() { - // ... your code goes here + this.context.font = "40px Arial"; + this.context.fillText("You Win!", 400, 300); } } +window.HangmanCanvas = HangmanCanvas; diff --git a/javascript/hangman.js b/javascript/hangman.js index ee01d18..3b91a37 100644 --- a/javascript/hangman.js +++ b/javascript/hangman.js @@ -1,55 +1,96 @@ 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 true; + } + return false; } - addCorrectLetter(letter) { - // ... your code goes here + this.guessedLetters += letter; + if (this.checkWinner()) { + alert("You Won!"); + console.log("You Won!"); + return; + } } - addWrongLetter(letter) { - // ... your code goes here + this.errorsLeft--; + if (!this.letters.includes("letter")) { + this.letters.push(letter); + } } - checkGameOver() { - // ... your code goes here + if (this.errorsLeft === 0) { + return true; + } + return false; } - checkWinner() { - // ... your code goes here + return this.secretWord + .split("") + .every((letter) => this.guessedLetters.includes(letter)); } } - let hangman; - -const startGameButton = document.getElementById('start-game-button'); - +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 + startGameButton.addEventListener("click", (event) => { + hangman = new Hangman([ + "node", + "javascript", + "react", + "miami", + "paris", + "amsterdam", + "lisboa", + ]); + 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 +document.addEventListener("keydown", (event) => { + if (!hangman.checkGameOver() && !hangman.checkWinner()) { + if (hangman.checkIfLetter(e.which)) { + if (hangman.checkClickedLetters(e.key)) { + if (hangman.secretWord.includes(e.key)) { + const indx = []; + for (let i = 0; i < hangman.secretWord.length; i++) { + if (hangman.secretWord[i] === e.key) indx.push(i); + } + indx.map((index) => { + hangman.addCorrectLetter(index); + hangmanCanvas.writeCorrectLetter(index); + }); + } else { + hangman.addWrongLetter(); + hangmanCanvas.writeWrongLetter(e.key, hangman.errorsLeft); + hangmanCanvas.drawHangman( + hangmanCanvas.hangmanShape[10 - hangman.errorsLeft] + ); + } + } else { + alert("letter Repeated .Please enter new letter"); + } + } + } }); diff --git a/styles/styles.css b/styles/styles.css index 414e79c..88f526d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -14,4 +14,4 @@ #hangman { text-align: center; -} +} \ No newline at end of file