From 9f2084bf073944c25a2cf1dd22c9940e18e9f7e2 Mon Sep 17 00:00:00 2001 From: Ribin-K-Roy Date: Fri, 24 May 2024 13:47:47 +0530 Subject: [PATCH] done --- index.html | 3 +- javascript/canvas.js | 112 ++++++++++++++++++++++++++++++++++++++---- javascript/hangman.js | 88 ++++++++++++++++++++++++++++----- 3 files changed, 179 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 302e8e5..c1d7c65 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
@@ -18,6 +18,7 @@
+
diff --git a/javascript/canvas.js b/javascript/canvas.js index ad78760..ebf77aa 100644 --- a/javascript/canvas.js +++ b/javascript/canvas.js @@ -1,34 +1,126 @@ class HangmanCanvas { + constructor(secretWord) { this.context = document.getElementById('hangman').getContext('2d'); - // ... your code goes here + this.ctx = document.getElementById('hangman').getContext('2d'); + this.ctx.lineWidth = 4; + this.ctx.font = '40px arial'; + this.secretWord = secretWord; + this.hangmanShape = ['base','pole','top','rope','head', 'body', 'leftLeg', 'rightLeg', 'leftArm', 'rightArm'] } createBoard() { - // ... your code goes here + this.ctx.clearRect(0,0,1200, 780); + this.drawLines(); + } drawLines() { - // ... your code goes here + const x = 300; + + for (let i = 0; i < this.secretWord.length; i++) { + this.ctx.beginPath(); + this.ctx.moveTo(x + i * 52, 600 ); + this.ctx.lineTo(x + i * 52 + 40, 600); + this.ctx.stroke(); + + } } writeCorrectLetter(index) { - // ... your code goes here + const x = 300 + index * 50; + + this.ctx.fillText(this.secretWord[index], x, 600); } writeWrongLetter(letter, errorsLeft) { - // ... your code goes here + const x = 700 + (10 - errorsLeft) * 40; + this.ctx.fillText(letter, x, 200); } drawHangman(errorsLeft) { - // ... your code goes here - } - + + switch (errorsLeft) { + case 'bottom': + this.ctx.beginPath(); + this.ctx.moveTo(150, 500); + this.ctx.lineTo(250, 500); + this.ctx.stroke(); + break; + case 'pole': + this.ctx.beginPath(); + this.ctx.moveTo(150, 500); + this.ctx.lineTo(200, 100); + this.ctx.stroke(); + break; + case 'top': + this.ctx.beginPath(); + this.ctx.moveTo(200, 100); + this.ctx.lineTo(400, 100); + this.ctx.stroke(); + break; + case 'rope': + this.ctx.beginPath(); + this.ctx.moveTo(400, 100); + this.ctx.lineTo(400, 160); + this.ctx.stroke(); + break; + case 'head': + this.ctx.beginPath(); + this.ctx.arc(400, 190, 30, 0, Math.PI * 2); + this.ctx.stroke(); + break; + case 'body': + this.ctx.beginPath(); + this.ctx.moveTo(400, 220); + this.ctx.lineTo(400, 350); + this.ctx.stroke(); + break; + case 'leftArm': + this.ctx.beginPath(); + this.ctx.moveTo(400, 220); + this.ctx.lineTo(350, 270); + this.ctx.stroke(); + break; + case 'rightArm': + this.ctx.beginPath(); + this.ctx.moveTo(400, 220); + this.ctx.lineTo(450, 270); + this.ctx.stroke(); + break; + case 'leftLeg': + this.ctx.beginPath(); + this.ctx.moveTo(400, 350); + this.ctx.lineTo(350, 400); + this.ctx.stroke(); + break; + case 'rightLeg': + this.ctx.beginPath(); + this.ctx.moveTo(400, 350); + this.ctx.lineTo(450, 400); + this.ctx.stroke(); + break; + } + +} gameOver() { - // ... your code goes here + + this.ctx.clearRect(0, 0, 1200, 740); + const gameOverimg = new Image(); + gameOverimg.src = './images/gameover.png'; + gameOverimg.onload = () => { + this.ctx.drawImage(gameOverimg, 100, 200); + }; + } winner() { - // ... your code goes here + this.ctx.clearRect(0, 0, 1200, 740); + const winnerimg = new Image(); + winnerimg.src = './images/awesome.png'; + winnerimg.onload = () => { + this.ctx.drawImage(winnerimg, 100, 200); + }; + } } diff --git a/javascript/hangman.js b/javascript/hangman.js index ee01d18..b57716d 100644 --- a/javascript/hangman.js +++ b/javascript/hangman.js @@ -1,35 +1,59 @@ 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 false; + } + return true; } addCorrectLetter(letter) { - // ... your code goes here + this.guessedLetters += this.secretWord[letter]; + } addWrongLetter(letter) { - // ... your code goes here + this.errorsLeft--; + if(!this.letters.includes(letter)){ + this.letters.push(letter); + console.log(this.letters); + } + } checkGameOver() { - // ... your code goes here + if(this.errorsLeft === 0){ + return true; + } + return false; } checkWinner() { - // ... your code goes here + let win = this.secretWord.split('').every(letter => this.guessedLetters.includes(letter)); + console.log(win); + console.log(this.guessedLetters); + return win; } } @@ -42,14 +66,52 @@ 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); - - // ... your code goes here + 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 + if (!hangman.checkGameOver() && !hangman.checkWinner()) { + console.log("carry on!"); + if (hangman.checkIfLetter(event.which)) { + console.log("letter"); + if (hangman.checkClickedLetters(event.key)) { + if (hangman.secretWord.includes(event.key)) { + + const indx = []; + + for(let i = 0; i < hangman.secretWord.length; i++) { + if (hangman.secretWord[i] === event.key) indx.push(i); + } + + indx.map(index => { + hangman.addCorrectLetter(index); + hangmanCanvas.writeCorrectLetter(index); + }) + + } else { + // wrong letter + hangman.addWrongLetter(event.key); + hangmanCanvas.writeWrongLetter(event.key, hangman.errorsLeft); + hangmanCanvas.drawHangman(hangmanCanvas.hangmanShape[10-hangman.errorsLeft]) + } + + } + else { + alert('letter Repeated .Please enter new letter'); + } + } + else + console.log("not a letter"); + } + else{ + if(hangman.checkWinner()) + hangmanCanvas.winner(); + else + hangmanCanvas.gameOver(); + } + });