@@ -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();
+ }
+
});