diff --git a/index.html b/index.html
index 302e8e5..74dc691 100644
--- a/index.html
+++ b/index.html
@@ -1,27 +1,25 @@
-
-
-
-
-
- Hangman
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Hangman
+ 
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..d312ecb 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -1,34 +1,81 @@
class HangmanCanvas {
constructor(secretWord) {
- this.context = document.getElementById('hangman').getContext('2d');
- // ... your code goes here
+ this.secretWord = secretWord;
+ this.canvas = document.getElementById('hangman');
+ this.context = this.canvas.getContext('2d');
}
createBoard() {
- // ... your code goes here
+ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.drawLines();
}
drawLines() {
- // ... your code goes here
+ const ctx = this.context;
+ const startX = 200;
+ const startY = 500;
+ const lineWidth = 50;
+ const gap = 15;
+ ctx.lineWidth = 3;
+
+ for (let i = 0; i < this.secretWord.length; i++) {
+ const x = startX + i * (lineWidth + gap);
+ ctx.beginPath();
+ ctx.moveTo(x, startY);
+ ctx.lineTo(x + lineWidth, startY);
+ ctx.stroke();
+ ctx.closePath();
+ }
}
writeCorrectLetter(index) {
- // ... your code goes here
+ const ctx = this.context;
+ const letter = this.secretWord[index].toUpperCase();
+ const startX = 200;
+ const startY = 495;
+ const lineWidth = 50;
+ const gap = 15;
+ ctx.font = "40px Arial";
+ ctx.fillStyle = "black";
+ const x = startX + index * (lineWidth + gap) + 12;
+ ctx.fillText(letter, x, startY - 20);
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ const ctx = this.context;
+ ctx.font = "40px Arial";
+ ctx.fillStyle = "red";
+ const x = 700;
+ const y = 100 + (10 - errorsLeft) * 45;
+ ctx.fillText(letter.toUpperCase(), x, y);
}
drawHangman(errorsLeft) {
- // ... your code goes here
+ const ctx = this.context;
+ ctx.lineWidth = 4;
+ switch (errorsLeft) {
+ case 9: ctx.beginPath(); ctx.moveTo(100, 500); ctx.lineTo(300, 500); ctx.stroke(); break;
+ case 8: ctx.beginPath(); ctx.moveTo(150, 500); ctx.lineTo(150, 100); ctx.stroke(); break;
+ case 7: ctx.beginPath(); ctx.moveTo(150, 100); ctx.lineTo(350, 100); ctx.stroke(); break;
+ case 6: ctx.beginPath(); ctx.moveTo(350, 100); ctx.lineTo(350, 150); ctx.stroke(); break;
+ case 5: ctx.beginPath(); ctx.arc(350, 190, 40, 0, Math.PI * 2); ctx.stroke(); break;
+ case 4: ctx.beginPath(); ctx.moveTo(350, 230); ctx.lineTo(350, 350); ctx.stroke(); break;
+ case 3: ctx.beginPath(); ctx.moveTo(350, 260); ctx.lineTo(300, 310); ctx.stroke(); break;
+ case 2: ctx.beginPath(); ctx.moveTo(350, 260); ctx.lineTo(400, 310); ctx.stroke(); break;
+ case 1: ctx.beginPath(); ctx.moveTo(350, 350); ctx.lineTo(300, 430); ctx.stroke(); break;
+ case 0: ctx.beginPath(); ctx.moveTo(350, 350); ctx.lineTo(400, 430); ctx.stroke(); break;
+ }
}
gameOver() {
- // ... your code goes here
+ const img = new Image();
+ img.src = './images/gameover.png';
+ img.onload = () => this.context.drawImage(img, 100, 50, 400, 400);
}
winner() {
- // ... your code goes here
+ const img = new Image();
+ img.src = './images/awesome.png';
+ img.onload = () => this.context.drawImage(img, 100, 50, 400, 400);
}
}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..87ca781 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,80 @@
+let hangman;
+let hangmanCanvas;
+
+const startGameButton = document.getElementById('start-game-button');
+
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
+ if (!this.letters.includes(letter)) this.letters.push(letter);
+ this.guessedLetters += letter;
+ return this.checkWinner();
}
addWrongLetter(letter) {
- // ... your code goes here
+ if (!this.letters.includes(letter)) this.letters.push(letter);
+ this.errorsLeft -= 1;
}
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;
-
-const startGameButton = document.getElementById('start-game-button');
-
+// START 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
+ startGameButton.addEventListener('click', () => {
+ hangman = new Hangman([
+ 'node','javascript','react','miami','paris','amsterdam','lisboa'
+ ]);
+ 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
+// KEYDOWN HANDLER
+document.addEventListener('keydown', (event) => {
+ if (!hangman) return;
+
+ const letter = event.key.toLowerCase();
+
+ if (!hangman.checkIfLetter(event.keyCode)) return;
+ if (!hangman.checkClickedLetters(letter)) return;
+
+ if (hangman.secretWord.includes(letter)) {
+ hangman.addCorrectLetter(letter);
+ [...hangman.secretWord].forEach((char, idx) => {
+ if (char === letter) hangmanCanvas.writeCorrectLetter(idx);
+ });
+ if (hangman.checkWinner()) hangmanCanvas.winner();
+ } else {
+ hangman.addWrongLetter(letter);
+ hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+ hangmanCanvas.drawHangman(hangman.errorsLeft);
+ if (hangman.checkGameOver()) hangmanCanvas.gameOver();
+ }
});
diff --git a/styles/styles.css b/styles/styles.css
index 414e79c..f987e84 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,5 +1,5 @@
.game-logo {
-
+ text-align: center;
}
#start-game-button {
@@ -10,6 +10,8 @@
padding: 20px 40px;
font-size: 30px;
border-radius: 5px;
+ display: block;
+ margin: auto;
}
#hangman {