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