diff --git a/index.html b/index.html
index 302e8e5..ac831d5 100644
--- a/index.html
+++ b/index.html
@@ -10,16 +10,16 @@
-
+
-
+
diff --git a/javascript/canvas.js b/javascript/canvas.js
index ad78760..e70e603 100644
--- a/javascript/canvas.js
+++ b/javascript/canvas.js
@@ -2,33 +2,133 @@ 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,1200,800)
+ this.drawLines()
+ }
+ writeHint(hint)
+ {
+ this.context.font='30px sans-serif'
+ this.context.fillText(`HINT : ${hint}`,200,50)
}
drawLines() {
// ... your code goes here
+ let k=180;
+ for(let i=0;i<=this.secretWord.length;i++)
+ {
+ this.context.beginPath();
+ k+=20;
+ this.context.moveTo(k,700);
+ this.context.lineWidth=5;
+ k+=60;
+ this.context.lineTo(k,700);
+ this.context.stroke();
+ }
}
writeCorrectLetter(index) {
// ... your code goes here
+ const letter=this.secretWord[index]
+ this.context.font='40px monospace'
+ const x=220+(20+60)*index;
+ this.context.fillText(letter,x,680)
}
writeWrongLetter(letter, errorsLeft) {
- // ... your code goes here
+ let k=700; //extra space from left side
+ this.context.font='40px monospace'
+ k+=(30*(10-errorsLeft))
+ this.context.fillText(letter.toUpperCase(),k,200)
}
drawHangman(errorsLeft) {
- // ... your code goes here
- }
+ switch (errorsLeft) {
+ case 9:
+ this.context.beginPath();
+ this.context.moveTo(50, 700);
+ this.context.lineTo(150, 700);
+ this.context.stroke();
+ break;
+ case 8:
+ this.context.beginPath();
+ this.context.moveTo(50, 700);
+ this.context.lineTo(100, 630);
+ this.context.stroke();
+ break;
+ case 7:
+ this.context.beginPath();
+ this.context.moveTo(150, 700);
+ this.context.lineTo(100, 630);
+ this.context.stroke();
+ break;
+ case 6:
+ this.context.beginPath();
+ this.context.moveTo(100, 630);
+ this.context.lineTo(100, 100);
+ this.context.stroke();
+ break;
+ case 5:
+ this.context.beginPath();
+ this.context.moveTo(100, 100);
+ this.context.lineTo(400, 100);
+ this.context.stroke();
+ break;
+ case 4:
+ this.context.beginPath();
+ this.context.moveTo(400, 100);
+ this.context.lineTo(400, 160);
+ this.context.stroke();
+ break;
+ case 3:
+ this.context.beginPath();
+ this.context.arc(400, 210, 50, 0, Math.PI * 2);
+ this.context.stroke();
+ break;
+ case 2:
+ this.context.beginPath();
+ this.context.moveTo(400, 260);
+ this.context.lineTo(400, 300);
+ this.context.stroke();
+ break;
+ case 1:
+ this.context.beginPath();
+ this.context.moveTo(400, 260);
+ this.context.lineTo(400, 400);
+ this.context.stroke();
+ break;
+ case 0:
+ this.context.beginPath();
+ this.context.moveTo(400, 400);
+ this.context.lineTo(340, 500);
+ this.context.stroke();
+ break;
+ default:
+ this.context.beginPath();
+ this.context.moveTo(400, 400);
+ this.context.lineTo(460, 500);
+ this.context.stroke();
+ }
+}
+
gameOver() {
- // ... your code goes here
+ const over = new Image();
+ over.src = "images/gameover.png";
+ over.onload = () => {
+ this.context.drawImage(over, 500,250);
+};
}
winner() {
// ... your code goes here
+ const awesome=new Image();
+ awesome.src='images/awesome.png'
+ awesome.onload=()=>{
+ this.context.drawImage(awesome,300,60);
}
-}
+}}
diff --git a/javascript/hangman.js b/javascript/hangman.js
index ee01d18..fdda9e3 100644
--- a/javascript/hangman.js
+++ b/javascript/hangman.js
@@ -1,55 +1,100 @@
class Hangman {
constructor(words) {
this.words = words;
- // ... your code goes here
+ this.secretWord = '';
+ 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 /^[A-Z]$/.test(keyCode);
}
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
+ this.errorsLeft -= 1;
+ if (!this.letters.includes(letter)) {
+ this.letters.push(letter);
+ }
}
checkGameOver() {
- // ... your code goes here
+ return this.errorsLeft < 0;
}
checkWinner() {
- // ... your code goes here
+ if(this.guessedLetters.length==this.secretWord.length)
+ {
+ return true
+ }
+ return false
+ }
}
-}
+
+let words = ['Tailwind', 'node', 'java', 'django', 'html', 'react'];
+let hint = [
+ 'A CSS framework',
+ 'A JavaScript runtime',
+ 'A programming language launched in 1995 by Sun Microsystems',
+ 'A Python framework for the backend',
+ 'A markup language for websites',
+ 'A JavaScript framework',
+];
let hangman;
+let hangmanCanvas;
const startGameButton = document.getElementById('start-game-button');
if (startGameButton) {
- startGameButton.addEventListener('click', event => {
+ 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
+ let pickedWord = hangman.pickWord();
+ hangman.secretWord = pickedWord.toUpperCase();
+ const hintString = hint[words.indexOf(pickedWord)];
+ hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+ hangmanCanvas.createBoard();
+ hangmanCanvas.writeHint(hintString);
});
}
-document.addEventListener('keydown', event => {
- // React to user pressing a key
- // ... your code goes here
-});
+document.addEventListener('keydown', (event) => {
+ if (hangman && !hangman.checkGameOver()) {
+ let key = event.key.toUpperCase();
+ if (hangman.checkIfLetter(key) && !hangman.checkClickedLetters(key)) {
+ if (hangman.secretWord.includes(key)) {
+ if (!hangman.guessedLetters.includes(key)) {
+ for (let i = 0; i < hangman.secretWord.length; i++) {
+ let ch = hangman.secretWord[i];
+ if (ch === key) {
+ hangman.addCorrectLetter(key);
+ hangmanCanvas.writeCorrectLetter(i);
+ if (hangman.checkWinner()) hangmanCanvas.winner();
+ }
+ }
+ }
+ } else {
+ hangman.addWrongLetter(key);
+ if (hangmanCanvas) {
+ hangmanCanvas.writeWrongLetter(key, hangman.errorsLeft);
+ hangmanCanvas.drawHangman(hangman.errorsLeft);
+if (hangman.checkGameOver()) {
+ hangmanCanvas.gameOver();
+ }
+ }
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index 414e79c..792e4c4 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,5 +1,6 @@
.game-logo {
-
+ width: 450px;
+ height: 200px;
}
#start-game-button {
@@ -13,5 +14,7 @@
}
#hangman {
- text-align: center;
+ text-align: left;
+ position: absolute;
+ left: 0;
}
