+
+
-
+
-
+
diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..204453a 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -1,34 +1,136 @@
class HangmanCanvas {
constructor(secretWord) {
this.context = document.getElementById('hangman').getContext('2d');
- // ... your code goes here
+ this.secretWord = secretWord;
+ this.lineWidth = 50;
}
createBoard() {
- // ... your code goes here
+ this.context.clearRect(0, 0, 1200, 800);
+ this.drawLines();
}
drawLines() {
- // ... your code goes here
+ const startX = 300;
+ const startY = 700;
+ const spacing = 20;
+
+ this.context.lineWidth = 5;
+ this.context.strokeStyle = '#000';
+
+ this.secretWord.split('').forEach((_, i) => {
+ this.context.beginPath();
+ this.context.moveTo(startX + i * (this.lineWidth + spacing), startY);
+ this.context.lineTo(startX + i * (this.lineWidth + spacing) + this.lineWidth, startY);
+ this.context.stroke();
+ });
}
writeCorrectLetter(index) {
- // ... your code goes here
+ const startX = 300;
+ const startY = 700;
+ const spacing = 20;
+
+ this.context.font = '48px Arial';
+ this.context.fillStyle = '#000';
+ const letterX = startX + index * (this.lineWidth + spacing) + this.lineWidth / 4;
+ this.context.fillText(this.secretWord[index], letterX, startY - 10);
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ const wrongLetterX = 800;
+ const wrongLetterY = 200;
+
+ this.context.font = '48px Arial';
+ this.context.fillStyle = '#000';
+ this.context.fillText(letter, wrongLetterX + (10 - errorsLeft) * 50, wrongLetterY);
}
drawHangman(errorsLeft) {
- // ... your code goes here
+ this.context.lineWidth = 5;
+ this.context.strokeStyle = '#000';
+
+ // Draw hangman parts based on errorsLeft
+ switch (errorsLeft) {
+ case 9: // Draw base
+ this.context.beginPath();
+ this.context.moveTo(100, 700);
+ this.context.lineTo(200, 700);
+ this.context.lineTo(150, 650);
+ this.context.closePath();
+ this.context.stroke();
+ break;
+ case 8: // Draw pole
+ this.context.beginPath();
+ this.context.moveTo(150, 650);
+ this.context.lineTo(150, 200);
+ this.context.stroke();
+ break;
+ case 7: // Draw top bar
+ this.context.beginPath();
+ this.context.moveTo(150, 200);
+ this.context.lineTo(350, 200);
+ this.context.stroke();
+ break;
+ case 6: // Draw rope
+ this.context.beginPath();
+ this.context.moveTo(350, 200);
+ this.context.lineTo(350, 250);
+ this.context.stroke();
+ break;
+ case 5: // Draw head
+ this.context.beginPath();
+ this.context.arc(350, 275, 25, 0, Math.PI * 2);
+ this.context.stroke();
+ break;
+ case 4: // Draw body
+ this.context.beginPath();
+ this.context.moveTo(350, 300);
+ this.context.lineTo(350, 400);
+ this.context.stroke();
+ break;
+ case 3: // Draw left arm
+ this.context.beginPath();
+ this.context.moveTo(350, 325);
+ this.context.lineTo(300, 375);
+ this.context.stroke();
+ break;
+ case 2: // Draw right arm
+ this.context.beginPath();
+ this.context.moveTo(350, 325);
+ this.context.lineTo(400, 375);
+ this.context.stroke();
+ break;
+ case 1: // Draw left leg
+ this.context.beginPath();
+ this.context.moveTo(350, 400);
+ this.context.lineTo(300, 450);
+ this.context.stroke();
+ break;
+ case 0: // Draw right leg
+ this.context.beginPath();
+ this.context.moveTo(350, 400);
+ this.context.lineTo(400, 450);
+ this.context.stroke();
+ break;
+ default:
+ break;
+ }
}
gameOver() {
- // ... your code goes here
+ const img = new Image();
+ img.src = './images/gameover.png';
+ img.onload = () => {
+ this.context.drawImage(img, 300, 300, 600, 300);
+ };
}
winner() {
- // ... your code goes here
+ const img = new Image();
+ img.src = './images/awesome.png';
+ img.onload = () => {
+ this.context.drawImage(img, 300, 300, 600, 300);
+ };
}
}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..0a24807 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,84 @@
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 randomIndex = Math.floor(Math.random() * this.words.length);
+ return this.words[randomIndex];
}
checkIfLetter(keyCode) {
- // ... your code goes here
+ return keyCode >= 65 && keyCode <= 90; // Keycodes for 'A' to 'Z'
}
checkClickedLetters(letter) {
- // ... your code goes here
+ return !this.letters.includes(letter);
}
addCorrectLetter(letter) {
- // ... your code goes here
+ this.guessedLetters += letter;
+ this.checkWinner();
}
addWrongLetter(letter) {
- // ... your code goes here
+ this.errorsLeft--;
+ this.letters.push(letter);
}
checkGameOver() {
- // ... your code goes here
+ return this.errorsLeft <= 0;
}
checkWinner() {
- // ... your code goes here
+ return this.secretWord.split("").every((letter) => this.guessedLetters.includes(letter));
}
}
let hangman;
+let hangmanCanvas;
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
+ hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+ hangmanCanvas.createBoard();
});
}
document.addEventListener('keydown', event => {
- // React to user pressing a key
- // ... your code goes here
+ if (hangman) {
+ const letter = event.key.toLowerCase();
+
+ if (hangman.checkIfLetter(event.keyCode)) {
+ if (hangman.checkClickedLetters(letter)) {
+ if (hangman.secretWord.includes(letter)) {
+ hangman.addCorrectLetter(letter);
+ hangman.secretWord.split('').forEach((char, index) => {
+ if (char === letter) {
+ hangmanCanvas.writeCorrectLetter(index);
+ }
+ });
+ } else {
+ hangman.addWrongLetter(letter);
+ hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+ hangmanCanvas.drawHangman(hangman.errorsLeft);
+ }
+ }
+
+ if (hangman.checkGameOver()) {
+ hangmanCanvas.gameOver();
+ }
+
+ if (hangman.checkWinner()) {
+ hangmanCanvas.winner();
+ }
+ }
+ }
});