Steps
1. Create a secret word that the player will have to guess and store it in a JavaScript variable. The word must be in English and use the simple Latin alphabet (All uppercase, no accents).
2. console.log the secret word so you can peek while debugging. (This also helps me when marking.)
3. Create the clue. Make a string that contains that many underscore characters (_) for every letter in the secret word. Display it on the page in the clue section. Don't hard code this! It must compute a new one if you change your secret word.
3. Create the clue. Make a string that contains that many underscore characters (_) for every letter in the secret word. Display it on the page in the clue section. Don't hard code this! It must compute a new one if you change your secret word.
5. If the letter is not in the message, a body part is added to the hangman. (Change the image. Note that the images are numbered.) The player has six wrong guesses before they lose.
6. Dim each letter as it is guessed. (There is a CSS class for that called used.)
8. If the player wins show the "You Win!" image. If the player loses show the "You Lose!" image and display the secret word in the clue section.
8. If the player wins show the "You Win!" image. If the player loses show the "You Lose!" image and display the secret word in the clue section.
9. When the game is over remove the event handler so they can't play any more and show the message at the bottom to tell the player that the game is over (message is provided in the HTML, just make it visible).
Solution start here
Introduction: The Game is a simple project developed using HTML, CSS, and JavaScript. This game is about guessing letters (A-Z) to form the words. To start the game, you can press any key. If the player guesses the right letter that is within the word, the letter appears at its correct positions. The user has 6 turns to guess the correct word, if he/she fails to complete the word then the game is over.
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="assets/favicon-32.png" sizes="32x32">
<link href="assets/style.css" rel="stylesheet">
<script src="script.js" defer></script>
<title>Hangman Game</title>
</head>
<body>
<h1>Hangman Game</h1>
<section id="letters">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
<div id="F">F</div>
<div id="G">G</div>
<div id="H">H</div>
<div id="I">I</div>
<div id="J">J</div>
<div id="K">K</div>
<div id="L">L</div>
<div id="M">M</div>
<div id="N">N</div>
<div id="O">O</div>
<div id="P">P</div>
<div id="Q">Q</div>
<div id="R">R</div>
<div id="S">S</div>
<div id="T">T</div>
<div id="U">U</div>
<div id="V">V</div>
<div id="W">W</div>
<div id="X">X</div>
<div id="Y">Y</div>
<div id="Z">Z</div>
</section>
<section id="image">
<img src="assets/hangman0.png" alt="hangman">
</section>
<!-- Here you will display the hint for the message. Use an underscore for each letter and a space fo a space. -->
<section id="clue"><p>________</p></section>
<!-- Show this message at the end of the game and reset the game. -->
<section id="gameover">
<p>Game Over (refresh to play again).</p>
</section>
</body>
</html>Css file
* {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
}
body {
margin: 0;
display: grid;
grid-template-rows: 6em auto 300px 6rem 2rem;
align-content: flex-start;
height: 100%;
text-align: center;
font-size: 2rem;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
text-align: center;
}
#letters {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1em 0;
font-family: 'Comic Sans MS', sans-serif;
}
#letters div {
margin: 5px;
padding-top: 0.5em;
border: 1px solid gray;
color: darkgreen;
width: 2em;
height: 2em;
line-height: 0.9;
overflow: hidden;
}
#letters div:hover {
background-color: palegreen;
}
#clue p {
margin: 0;
font-size: 4rem;
letter-spacing: 0.5em;
font-family: 'Comic Sans MS', sans-serif;
}
/*
This class will grey out the letters as they are used.
Just add the class "used".
*/
#letters div.used {
background-color: lightgray;
opacity: 0.5;
}
section#image {
text-align: center;
}
/*
Display the message when the game is over.
Hide it at the beginning.
*/
section#gameover p {
text-align: center;
font-size: 1rem;
display: none;
}
JavaScript File
let word = "HANGMAN";
let x = 0;
console.log(word);
let clue = [];
for (let i = 0; i < word.length; i++) {
clue[i] = "_";
}
document.getElementById("letters").addEventListener("click", function (e) {
if (x < 5) {
x++;
e.target.classList.add("used");
if (e.target && e.target.nodeName == "DIV") {
let flag = true;
for (let i = 0; i < word.length; i++) {
if (word[i] == e.target.id) {
clue[i] = e.target.id;
flag = false;
}
}
if (flag) {
switch (x) {
case 1:
document.getElementById("image").innerHTML = "<img
src='assets/hangman1.png' alt='hangman'></img>"
break;
case 2:
document.getElementById("image").innerHTML = "<img src='assets/hangman2.png' alt='hangman'></img>"
break;
case 3:
document.getElementById("image").innerHTML = "<img src='assets/hangman3.png' alt='hangman'></img>"
break;
case 4:
document.getElementById("image").innerHTML = "<img src='assets/hangman4.png' alt='hangman'></img>"
break;
case 5:
document.getElementById("image").innerHTML = "<img src='assets/hangman5.png' alt='hangman'></img>"
break;
default:
document.getElementById("gameover").style.display = "block";
}
}
document.getElementById("clue").innerHTML = clue;
}
} else {
//check win or loss
if (isHnagmanFulld(clue)) {
document.getElementById("image").innerHTML = "<img src='assets/winner.png' alt='hangman'></img>"
document.querySelector("section#gameover p").style.display = "block";
}
else
document.getElementById("image").innerHTML = "<img src='assets/hangman6.png' alt='hangman'></img>"
document.querySelector("section#gameover p").style.display = "block";
}
});
function isHnagmanFulld(clue) {
for (let i = 0; i < clue.length; i++) {
if (clue[i] == "_") {
return false
}
}
return true;
}
In this javascript code first we create let type variable word that hold 'HANGMAN' word,and then one other variable x that is hold zero. after that we create clue array and then excute for loop length of word and assign '_' to clue array. after that add event listener then perform if conditon. and add class used after that perform for loop , in this loop assign letter one by one to clue array and set flag false. after that one if condition in this condition one switch loop for display hangman images.then check win or lose.
after the condition, create isHnagmanFulld function it's have parameter that is clue array.
If you have project or assignment files, You can send atcontact@codersarts.com directly
Comentarios