diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..71c0e7c 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -1,34 +1,152 @@
class HangmanCanvas {
constructor(secretWord) {
- this.context = document.getElementById('hangman').getContext('2d');
- // ... your code goes here
+ this.context = document.getElementById("hangman").getContext("2d");
+ 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 ctx = this.context;
+ let startX = 50;
+ const startY = 300;
+
+ for (let i = 0; i < this.secretWord.length; i++) {
+ ctx.beginPath();
+ ctx.moveTo(startX, startY);
+ ctx.lineTo(startX + 40, startY);
+ ctx.stroke();
+ startX += 50;
+ }
}
writeCorrectLetter(index) {
- // ... your code goes here
+ const ctx = this.context;
+ const letter = this.secretWord[index];
+ const x = 55 + index * 50;
+ const y = 295;
+
+ ctx.font = "30px Arial";
+ ctx.fillStyle = "black";
+ ctx.fillText(letter.toUpperCase(), x, y);
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ const ctx = this.context;
+ const x = 600 - errorsLeft * 30;
+ const y = 50;
+
+ ctx.font = "25px Arial";
+ ctx.fillStyle = "red";
+ ctx.fillText(letter.toUpperCase(), x, y);
}
drawHangman(errorsLeft) {
- // ... your code goes here
+ const ctx = this.context;
+
+ if (errorsLeft <= 10) {
+ ctx.beginPath();
+ ctx.moveTo(50, 350);
+ ctx.lineTo(150, 350);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 9) {
+ ctx.beginPath();
+ ctx.moveTo(100, 350);
+ ctx.lineTo(100, 50);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 8) {
+ ctx.beginPath();
+ ctx.moveTo(100, 50);
+ ctx.lineTo(250, 50);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 7) {
+ ctx.beginPath();
+ ctx.moveTo(250, 50);
+ ctx.lineTo(250, 80);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 6) {
+ ctx.beginPath();
+ ctx.arc(250, 100, 20, 0, Math.PI * 2);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 5) {
+ ctx.beginPath();
+ ctx.moveTo(250, 120);
+ ctx.lineTo(250, 200);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 4) {
+ ctx.beginPath();
+ ctx.moveTo(250, 140);
+ ctx.lineTo(220, 170);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 3) {
+ ctx.beginPath();
+ ctx.moveTo(250, 140);
+ ctx.lineTo(280, 170);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 2) {
+ ctx.beginPath();
+ ctx.moveTo(250, 200);
+ ctx.lineTo(220, 250);
+ ctx.stroke();
+ }
+
+ if (errorsLeft <= 1) {
+ ctx.beginPath();
+ ctx.moveTo(250, 200);
+ ctx.lineTo(280, 250);
+ ctx.stroke();
+ }
}
gameOver() {
- // ... your code goes here
+ const img = new Image();
+ img.src = "images/gameover.png";
+ img.onload = () => {
+ this.context.drawImage(
+ img,
+ 0,
+ 0,
+ this.context.canvas.width,
+ this.context.canvas.height
+ );
+ };
}
winner() {
- // ... your code goes here
+ const img = new Image();
+ img.src = "images/awesome.png";
+ img.onload = () => {
+ this.context.drawImage(
+ img,
+ 0,
+ 0,
+ this.context.canvas.width,
+ this.context.canvas.height
+ );
+ };
}
}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..d2a34b2 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,130 @@
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
+ if (keyCode >= 65 && keyCode <= 90) {
+ return true;
+ } else {
+ return false;
+ }
}
checkClickedLetters(letter) {
- // ... your code goes here
+ if (this.letters.includes(letter)) {
+ return false;
+ } else {
+ return true;
+ }
}
addCorrectLetter(letter) {
- // ... your code goes here
+ this.guessedLetters += letter;
}
addWrongLetter(letter) {
- // ... your code goes here
+ this.errorsLeft--;
+ if (!this.letters.includes(letter)) {
+ this.letters.push(letter);
+ }
}
checkGameOver() {
- // ... your code goes here
+ if (this.errorsLeft > 0) {
+ return false;
+ } else {
+ return true;
+ }
}
checkWinner() {
- // ... your code goes here
+ for (let i = 0; i < this.secretWord.length; i++) {
+ if (!this.guessedLetters.includes(this.secretWord[i])) {
+ return false;
+ }
+ }
+ return true;
}
}
let hangman;
+let hangmanCanvas;
-const startGameButton = document.getElementById('start-game-button');
+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", (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);
+ hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+ hangmanCanvas.createBoard();
- // ... your code goes here
+ console.log("Game started! Secret word:", hangman.secretWord);
});
}
-document.addEventListener('keydown', event => {
- // React to user pressing a key
- // ... your code goes here
+document.addEventListener("keydown", (event) => {
+ if (!hangman || !hangmanCanvas) {
+ console.log("Game not started yet! Click START GAME first.");
+ return;
+ }
+
+ const keyCode = event.keyCode;
+ const letter = event.key.toLowerCase();
+
+ if (hangman.checkIfLetter(keyCode)) {
+ if (hangman.checkClickedLetters(letter)) {
+ if (hangman.secretWord.includes(letter)) {
+ console.log("Correct letter:", letter);
+ hangman.addCorrectLetter(letter);
+
+ for (let i = 0; i < hangman.secretWord.length; i++) {
+ if (hangman.secretWord[i] === letter) {
+ hangmanCanvas.writeCorrectLetter(i);
+ }
+ }
+
+ if (hangman.checkWinner()) {
+ console.log("You win!");
+ setTimeout(() => {
+ hangmanCanvas.winner();
+ }, 500);
+ }
+ } else {
+ console.log("Wrong letter:", letter);
+ hangman.addWrongLetter(letter);
+
+ hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+ hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+ if (hangman.checkGameOver()) {
+ console.log("Game Over!");
+ setTimeout(() => {
+ hangmanCanvas.gameOver();
+ }, 500);
+ }
+ }
+ } else {
+ console.log("Letter already used:", letter);
+ }
+ } else {
+ console.log("Please press a letter key (A-Z)");
+ }
});
diff --git a/styles/styles.css b/styles/styles.css
index 414e79c..281c1a0 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,5 +1,14 @@
-.game-logo {
+/* Made some changes to see better the game */
+body {
+ background-color: #f4f4f4;
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+}
+.game-logo {
+ max-width: 300px;
+ height: auto;
}
#start-game-button {
@@ -12,6 +21,17 @@
border-radius: 5px;
}
+#start-game-button:hover {
+ transform: translateY(-2px);
+}
+
+
+
#hangman {
text-align: center;
+ border: 2px solid #333;
+ background-color: white;
+ margin: 20px auto;
+ display: block;
}
+