diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..9e06c84 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -2,33 +2,88 @@ 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, this.context.canvas.width, this.context.canvas.height);
+ this.drawLines();
}
drawLines() {
// ... your code goes here
+ const numberOfLetters = this.secretWord.length;
+ const startX = 300;
+ const startY = 700;
+ const lineWidth = 50;
+ const lineSpacing = 10;
+
+ for (let i = 0; i < numberOfLetters; i++) {
+ this.context.beginPath();
+ this.context.moveTo(startX + i * (lineWidth + lineSpacing), startY);
+ this.context.lineTo(startX + i * (lineWidth + lineSpacing) + lineWidth, startY);
+ this.context.stroke();
+ }
}
writeCorrectLetter(index) {
// ... your code goes here
+ const letter = this.secretWord[index].toUpperCase();
+ const startX = 305 + index * 60; // Adjusted positions
+ const startY = 690;
+
+ this.context.font = '48px Arial';
+ this.context.fillText(letter, startX, startY);
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ const startX = 600;
+ const startY = 200;
+ const spacing = 50;
+
+ this.context.font = '48px Arial';
+ this.context.fillText(letter.toUpperCase(), startX + (10 - errorsLeft) * spacing, startY);
+ // ... your code goes here
}
drawHangman(errorsLeft) {
// ... your code goes here
+ const ctx = this.context;
+
+ switch (errorsLeft) {
+ case 9:
+ // Draw the base
+ ctx.beginPath();
+ ctx.moveTo(100, 700);
+ ctx.lineTo(200, 700);
+ ctx.lineTo(150, 650);
+ ctx.closePath();
+ ctx.stroke();
+ break;
+ // Continue adding cases for each errorLeft value
+ // ...
+ default:
+ break;
+ }
}
gameOver() {
// ... your code goes here
+ const img = new Image();
+ img.src = './images/gameover.png';
+ img.onload = () => {
+ this.context.drawImage(img, 200, 100, 400, 400);
+ };
}
winner() {
// ... your code goes here
+ const img = new Image();
+ img.src = './images/awesome.png';
+ img.onload = () => {
+ this.context.drawImage(img, 200, 100, 400, 400);
+ };
}
}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..a793bd0 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,105 @@
class Hangman {
constructor(words) {
this.words = words;
- // ... your code goes here
+ this.secretWord = this.pickWord(); // The secret word for the current game
+ this.letters = []; // Letters that have been guessed
+ this.guessedLetters = ''; // Correct letters guessed
+ 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) || (keyCode >= 97 && keyCode <= 122);
}
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
+ if (!this.letters.includes(letter)) {
+ this.errorsLeft--;
+ this.letters.push(letter);
+ }
}
checkGameOver() {
- // ... your code goes here
+ return this.errorsLeft <= 0;
}
checkWinner() {
- // ... your code goes here
+ const uniqueLettersInSecretWord = [...new Set(this.secretWord)];
+ const guessedLettersArray = this.guessedLetters.split('');
+
+ return uniqueLettersInSecretWord.every(letter =>
+ guessedLettersArray.includes(letter)
+ );
}
}
let hangman;
-
+let hangmanCanvas; // Global variable for canvas
const startGameButton = document.getElementById('start-game-button');
if (startGameButton) {
- startGameButton.addEventListener('click', event => {
+ startGameButton.onclick=() => {
hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+
+ hangman.secretWord = hangman.pickWord();
+ hangmanCanvas = new HangmanCanvas(hangman.secretWord); // Initialize canvas instance
+
+ hangman.errorsLeft = 5;
+ hangman.letters = [];
+ hangman.guessedLetters = '';
- // HINT (uncomment when start working on the canvas portion of the lab)
- // hangman.secretWord = hangman.pickWord();
- // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+ hangmanCanvas.createBoard(); // Initialize canvas
+ };
- // ... your code goes here
- });
}
document.addEventListener('keydown', event => {
- // React to user pressing a key
- // ... your code goes here
+ const keyCode = event.keyCode;
+ const letter = event.key.toLowerCase();
+
+ if (hangman.checkIfLetter(keyCode)) {
+ if (hangman.checkClickedLetters(letter)) {
+ hangman.letters.push(letter);
+
+ if (hangman.secretWord.includes(letter)) {
+ hangman.addCorrectLetter(letter);
+
+ for (let i = 0; i < hangman.secretWord.length; i++) {
+ if (hangman.secretWord[i] === letter) {
+ hangmanCanvas.writeCorrectLetter(i); // Update canvas with correct letter
+ }
+ }
+
+ if (hangman.checkWinner()) {
+ console.log('You win!');
+ hangmanCanvas.winner();
+ }
+ } else {
+ hangman.addWrongLetter(letter);
+ hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+ hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+ if (hangman.checkGameOver()) {
+ console.log('Game over!');
+ hangmanCanvas.gameOver();
+ }
+ }
+ } else {
+ console.log('Letter already guessed.');
+ }
+ } else {
+ console.log('Not a valid letter.');
+ }
});
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b59d689
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "lab-canvas-hangman",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}