diff --git a/hangman/1.jpg b/hangman/1.jpg new file mode 100644 index 0000000..1b4d981 Binary files /dev/null and b/hangman/1.jpg differ diff --git a/hangman/2.jpg b/hangman/2.jpg new file mode 100644 index 0000000..a79ba57 Binary files /dev/null and b/hangman/2.jpg differ diff --git a/hangman/3.jpg b/hangman/3.jpg new file mode 100644 index 0000000..5c942e5 Binary files /dev/null and b/hangman/3.jpg differ diff --git a/hangman/4.jpg b/hangman/4.jpg new file mode 100644 index 0000000..5a8d6eb Binary files /dev/null and b/hangman/4.jpg differ diff --git a/hangman/5.jpg b/hangman/5.jpg new file mode 100644 index 0000000..09e7d17 Binary files /dev/null and b/hangman/5.jpg differ diff --git a/hangman/6.jpg b/hangman/6.jpg new file mode 100644 index 0000000..032db0e Binary files /dev/null and b/hangman/6.jpg differ diff --git a/hangman/gallows.jpg b/hangman/gallows.jpg new file mode 100644 index 0000000..3c937d3 Binary files /dev/null and b/hangman/gallows.jpg differ diff --git a/hangman/index.html b/hangman/index.html new file mode 100644 index 0000000..b54effc --- /dev/null +++ b/hangman/index.html @@ -0,0 +1,18 @@ + + + + + + Page Title + + + + + +
+
+
+ +
+ + \ No newline at end of file diff --git a/hangman/main.css b/hangman/main.css new file mode 100644 index 0000000..01d6ce6 --- /dev/null +++ b/hangman/main.css @@ -0,0 +1,43 @@ +.keyboard { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} +.horizontal-bar { + display: flex; + align-items: center; + justify-content: center; +} +.letter { + border: 2px solid grey; + border-radius: 10%; + margin: 10px; + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + font-size: 25px; + width: 20px; + text-align: center; +} + +.key-color{ + background-color: coral; +} + +.underline { + border-bottom: 2px solid grey; + border-radius: 10%; + margin: 10px; + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + font-size: 25px; + width: 20px; + text-align: center; +} + +.hangman { + height: 150px; + width: 150px; + /* background-image: url("gallows.jpg"); */ + /* background-image: "gallows.jpg" */ +} \ No newline at end of file diff --git a/hangman/main.js b/hangman/main.js new file mode 100644 index 0000000..097e6c8 --- /dev/null +++ b/hangman/main.js @@ -0,0 +1,93 @@ + +function Hangman(){ + + let keyboard = document.querySelector(".keyboard") + function makeKeyboard () { + for (let i = 65; i < 91; i++){ + let character = String.fromCharCode(i) + let letter = document.createElement("div") + letter.classList.add("letter") + letter.innerText = `${character}` + keyboard.append(letter) + }; + }; + makeKeyboard(); + + let letter = document.querySelectorAll(".letter"); + let clickedLetter = ""; + let guessedLetters = []; + function keyColor () { + letter.forEach(node=>{ + node.addEventListener("click", event=>{ + event.target.classList.add("key-color") + clickedLetter = event.target.textContent + if (matchedLetter() && !alreadyGuessed()){ + guessedLetters.push(clickedLetter); + correctLetter(); + } else if (alreadyGuessed()) { + alert("You've already tried this letter") + } else { + guessedLetters.push(clickedLetter); + incorrectLetter(); + }; + }); + }); + }; + keyColor(); + + const mySecretWordArray = ["STRANGER", "MONITOR", "CANADA", "LUKE"] + let randomIndex = Math.floor(Math.random()*mySecretWordArray.length) + const secretWord = mySecretWordArray[randomIndex] + const secretWordLength = secretWord.length + let horizontalBars = document.querySelector(".horizontal-bar") + for (let i = 0; i < secretWordLength; i++) { + let individualBar = document.createElement("div") + individualBar.classList.add("underline") + horizontalBars.append(individualBar) + }; + + function matchedLetter () { + return (secretWord.indexOf(clickedLetter) >= 0) + }; + + let correctAnswerLength = 0 + const winSound = () => new Audio(`sounds/dog-bark-4.wav`); + function correctLetter(){ + for (let index = 0; index < secretWordLength; index ++){ + if (secretWord[index]===clickedLetter){ + document.querySelector(".horizontal-bar").children[index].innerText = `${clickedLetter}` + correctAnswerLength += 1; + }; + if (correctAnswerLength === secretWordLength){ + winSound().play(); + setTimeout(function(){ + alert("you won") + document.location.reload() + }, 1500) + } + }; + }; + + let pictureIndex = 0 + const deadSound = () => new Audio(`sounds/small-explosion.wav`); + function incorrectLetter(){ + let pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg','6.jpg'] + if (pictureIndex <= 4){ + pictureIndex += 1 + document.querySelector("img").setAttribute("src", `${pictures[pictureIndex-1]}`) + } else { + document.querySelector("img").setAttribute("src", "6.jpg") + deadSound().play() + setTimeout(function() { + alert("you died") + document.location.reload() + }, 1000) + }; + }; + + function alreadyGuessed() { + return guessedLetters.indexOf(clickedLetter) >= 0; + }; +}; + +Hangman(); \ No newline at end of file diff --git a/hangman/sounds/dog-bark-4.wav b/hangman/sounds/dog-bark-4.wav new file mode 100644 index 0000000..3d34fed Binary files /dev/null and b/hangman/sounds/dog-bark-4.wav differ diff --git a/hangman/sounds/small-explosion.wav b/hangman/sounds/small-explosion.wav new file mode 100644 index 0000000..e5c5c9e Binary files /dev/null and b/hangman/sounds/small-explosion.wav differ