diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..96d5b14 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -1,34 +1,75 @@
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, 600, 400); // Clear the canvas
+ this.drawLines(); // Draw lines for each letter in the secret word
}
drawLines() {
- // ... your code goes here
+ const startX = 100;
+ const startY = 350;
+ const lineWidth = 50;
+
+ for (let i = 0; i < this.secretWord.length; i++) {
+ this.context.beginPath();
+ this.context.moveTo(startX + i * lineWidth, startY);
+ this.context.lineTo(startX + i * lineWidth + 30, startY);
+ this.context.stroke();
+ }
}
- writeCorrectLetter(index) {
- // ... your code goes here
+ writeCorrectLetter(letter) {
+ if (!letter) return; // Avoid undefined issues
+ const startX = 105;
+ const startY = 340;
+ const lineWidth = 50;
+
+ for (let i = 0; i < this.secretWord.length; i++) {
+ if (this.secretWord[i] === letter) {
+ this.context.font = '30px Arial';
+ this.context.fillText(letter.toUpperCase(), startX + i * lineWidth, startY);
+ }
+ }
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ if (!letter) return; // Avoid undefined issues
+ const startX = 400;
+ const startY = 50;
+
+ this.context.font = '30px Arial';
+ this.context.fillText(letter.toUpperCase(), startX + (10 - errorsLeft) * 30, startY);
}
drawHangman(errorsLeft) {
- // ... your code goes here
+ // Basic hangman drawing based on errors left (for demo)
+ const steps = [
+ () => { this.context.beginPath(); this.context.moveTo(200, 300); this.context.lineTo(400, 300); this.context.stroke(); }, // base
+ () => { this.context.beginPath(); this.context.moveTo(300, 300); this.context.lineTo(300, 50); this.context.stroke(); }, // pole
+ () => { this.context.beginPath(); this.context.moveTo(300, 50); this.context.lineTo(400, 50); this.context.stroke(); }, // top bar
+ () => { this.context.beginPath(); this.context.moveTo(400, 50); this.context.lineTo(400, 100); this.context.stroke(); }, // rope
+ () => { this.context.beginPath(); this.context.arc(400, 120, 20, 0, Math.PI * 2); this.context.stroke(); }, // head
+ () => { this.context.beginPath(); this.context.moveTo(400, 140); this.context.lineTo(400, 200); this.context.stroke(); }, // body
+ () => { this.context.beginPath(); this.context.moveTo(400, 150); this.context.lineTo(380, 180); this.context.stroke(); }, // left arm
+ () => { this.context.beginPath(); this.context.moveTo(400, 150); this.context.lineTo(420, 180); this.context.stroke(); }, // right arm
+ () => { this.context.beginPath(); this.context.moveTo(400, 200); this.context.lineTo(380, 230); this.context.stroke(); }, // left leg
+ () => { this.context.beginPath(); this.context.moveTo(400, 200); this.context.lineTo(420, 230); this.context.stroke(); }, // right leg
+ ];
+
+ if (errorsLeft <= 10 && errorsLeft > 0) {
+ steps[10 - errorsLeft]();
+ }
}
gameOver() {
- // ... your code goes here
+ alert("Game Over! The word was: " + this.secretWord);
}
winner() {
- // ... your code goes here
+ alert("You Won! The word was: " + this.secretWord);
}
}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..31c0a14 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,74 @@
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;
}
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);
+ hangmanCanvas.drawHangman(this.errorsLeft); // Draw hagman figure after wrong guess
+ }
}
checkGameOver() {
- // ... your code goes here
+ return this.errorsLeft <= 0;
}
checkWinner() {
- // ... your code goes here
+ return [...this.secretWord].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']);
+startGameButton.addEventListener('click', () => {
+ hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+ hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+ hangmanCanvas.createBoard();
+});
- // HINT (uncomment when start working on the canvas portion of the lab)
- // hangman.secretWord = hangman.pickWord();
- // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+document.addEventListener('keydown', event => {
+ if (hangman && hangmanCanvas) {
+ const letter = event.key.toLowerCase();
- // ... your code goes here
- });
-}
+ if (hangman.checkIfLetter(event.keyCode)) {
+ if (hangman.checkClickedLetters(letter)) {
+ if (hangman.secretWord.includes(letter)) {
+ hangman.addCorrectLetter(letter);
+ hangmanCanvas.writeCorrectLetter(letter);
+ } else {
+ hangman.addWrongLetter(letter);
+ hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+ }
-document.addEventListener('keydown', event => {
- // React to user pressing a key
- // ... your code goes here
+ if (hangman.checkGameOver()) hangmanCanvas.gameOver();
+ if (hangman.checkWinner()) hangmanCanvas.winner();
+ }
+ }
+ }
});
diff --git a/styles/styles.css b/styles/styles.css
index 414e79c..0bdccaa 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,5 +1,6 @@
.game-logo {
-
+ max-width: 100%;
+ height: auto;
}
#start-game-button {
@@ -10,8 +11,10 @@
padding: 20px 40px;
font-size: 30px;
border-radius: 5px;
+ cursor: pointer;
}
#hangman {
- text-align: center;
+ display: block;
+ margin: 0 auto;
}