Homework SourseI am trying to make a game of hangman using Javascript I fig
I am trying to make a game of hangman using Javascript. I figured out how to solve the problem with a single word in the game, but now I am a bit stuck at having a game with multiple words that can be given. I am stuck trying to add clickable letters in a horizontal line using a loop, rather than hard coding them each 26 times, which I did earlier. I need help performing this loop and seeing if a letter is clicked.
Here is my html code. You can disregard the switch statements, as they were used in the first iteration of my program, which was with just one word.
<html>
<div class=\"alphabet\"></div>
<header>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\">
</script>
<script>
//Sets up the horizontal line of letters
<div id=\"letters\">
$(document).ready(function(){
var holder = $(\'.alphabet\');
var alphabet = \'abcdefghijklmnopqrstuwxyz\';
for (var i = 0; i < alphabet.length; i++) {
var letter = alphabet[i];
holder.append(\'<button class=\"alphabet\" id=\"\'+ letter +\'\">\'+ letter +\'</button>\');
}
})
$(document).on(\'click\', \'.alphabet\', function(){
//What do do when a letter is clicked
})
</div>
var guesses = 5;
var words = [\"hangman\", \"banana\", \"random\", \"oxford\", \"poland\", \"luggage\", \"trophy\", \"airplane\", \"tower\", \"blanket\", \"apple\", \"cylinder\", \"brackets\", \"football\", \"carpet\", \"battery\", \"drawer\", \"wooden\", \"woven\", \"sweatshirt\", \"president\", \"lilac\", \"engine\", \"television\", \"technology\", \"javascript\", \"jquery\", \"facts\", \"telephone\", \"origin\", \"country\", \"immigrant\", \"california\", \"desktop\", \"master\", \"online\", \"deodorant\", \"celsius\", \"compress\", \"boxer\", \"colonel\", \"chicken\", \"bottle\"];
var randomWordInt = Math.ceil(Math.random()*42);
var word = words[randomWordInt];
//length of random word
var spotsLeft = words.length();
<div id=\"current\"></div>
//Makes string of size of word chosen
for(var x=0; x<spotsLeft; x++){
$(\"#current\").html(((\"#current\").html())+\"-\");
}
//When a letter is clicked
$(document).ready(function(){
$(\".letter\").click(function(){
$(this).hide();
guesses--;
var id = $(this).attr(\'id\');
var text = $(\'#current\').html();
//If a letter is clicked that is in hangman
switch(id){
case \"h\":
$(\"#current\").html(\"h\"+((text).substring(1,7)));
guesses++;
spotsLeft--;
break;
case \"a\":
$(\"#current\").html((((((text).substring(0,1))+\"a\")+((text).substring(2,5)))+\"a\")+((text).substring(6,7)));
guesses++;
spotsLeft--;
spotsLeft--;
break;
case \"n\":
$(\"#current\").html(((((text).substring(0,2))+\"n\")+((text).substring(3,6)))+\"n\");
guesses++;
spotsLeft--;
spotsLeft--;
break;
case \"g\":
$(\"#current\").html(((((text).substring(0,3))+\"g\")+((text).substring(4,7))));
guesses++;
spotsLeft--;
break;
case \"m\":
$(\"#current\").html(((((text).substring(0,4))+\"m\")+((text).substring(5,7))));
guesses++;
spotsLeft--;
}
//If you run out of guesses
if(guesses != 0){
$(\"#guessesLeft\").html(\"You have \" + guesses + \" Guesses Left\");
}
//If you win the game
if(spotsLeft==0){
$(\"#letters\").remove();
$(\"#guessesLeft\").html(\"You DID IT, YOU WON!!!!!\");
}
//If there are no guesses left (If you lose the game)
if(guesses == 0){
$(\"#letters\").remove();
$(\"#guessesLeft\").html(\"You are out of guesses, YOU LOST!!!\");
}
});
});
</script>
<title>Hangman Game</title>
Harrison\'s Hangman Game
<br>
<link rel = \"stylesheet\"
type = \"text/css\"
href = \"hangman.css\"/>
</header>
<body>
<p1>
Guess the Word in 5 or fewer guesses
<br>
Click on each letter to guess the word
</p1>
<div id=\"guessesLeft\">You have 5 Guesses Left</div>
</body>
<footer>
Copyright - (C) 2017
</footer>
</html>
Solution
You have to read how the dom is loading in jquery.
<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Hangman Game</title>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>
<!--<link rel=\"stylesheet\" type=\"text/css\" href=\"hangman.css\" />-->
</head>
<body>
<div class=\"alphabet\"></div>
<header>
Harrison\'s Hangman Game
<br>
</header>
<div id=\"letters\"></div>
<div id=\"current\"></div>
<p1>
Guess the Word in 5 or fewer guesses
<br />
Click on each letter to guess the word
</p1>
<div id=\"guessesLeft\">You have 5 Guesses Left</div>
<footer>
Copyright - (C) 2017
</footer>
</body>
<script>
//first you have to read how dom is loading.
//Sets up the horizontal line of letters
$(document).ready(function () {
var holder = $(\'.alphabet\');
var alphabet = \'abcdefghijklmnopqrstuwxyz\';
for (var i = 0; i < alphabet.length; i++) {
var letter = alphabet[i];
holder.append(\'<button class=\"alphabet letter\" id=\"\' + letter + \'\">\' + letter + \'</button>\');
}
})
$(document).on(\'click\', \'.alphabet\', function () {
//What do do when a letter is clicked
})
var guesses = 5;
var words = [\"hangman\", \"banana\", \"random\", \"oxford\", \"poland\", \"luggage\", \"trophy\", \"airplane\", \"tower\", \"blanket\", \"apple\", \"cylinder\", \"brackets\", \"football\", \"carpet\", \"battery\", \"drawer\", \"wooden\", \"woven\", \"sweatshirt\", \"president\", \"lilac\", \"engine\", \"television\", \"technology\", \"javascript\", \"jquery\", \"facts\", \"telephone\", \"origin\", \"country\", \"immigrant\", \"california\", \"desktop\", \"master\", \"online\", \"deodorant\", \"celsius\", \"compress\", \"boxer\", \"colonel\", \"chicken\", \"bottle\"];
var randomWordInt = Math.ceil(Math.random() * 42);
var word = words[randomWordInt];
//length of random word
var spotsLeft = words.length;
//Makes string of size of word chosen
for (var x = 0; x < spotsLeft; x++) {
$(\"#current\").html(($(\"#current\").html()) + \"-\");
}
//When a letter is clicked
$(document).ready(function () {
var clickCount = 0;
$(\".letter\").click(function (e) {
if (clickCount == 0) {
$(this).hide();
guesses--;
var id = $(this).attr(\'id\');
var text = $(\'#current\').html();
//If a letter is clicked that is in hangman
switch (id) {
case \"h\":
$(\"#current\").html(\"h\" + ((text).substring(1, 7)));
guesses++;
spotsLeft--;
break;
case \"a\":
$(\"#current\").html((((((text).substring(0, 1)) + \"a\") + ((text).substring(2, 5))) + \"a\") + ((text).substring(6, 7)));
guesses++;
spotsLeft--;
spotsLeft--;
break;
case \"n\":
$(\"#current\").html(((((text).substring(0, 2)) + \"n\") + ((text).substring(3, 6))) + \"n\");
guesses++;
spotsLeft--;
spotsLeft--;
break;
case \"g\":
$(\"#current\").html(((((text).substring(0, 3)) + \"g\") + ((text).substring(4, 7))));
guesses++;
spotsLeft--;
break;
case \"m\":
$(\"#current\").html(((((text).substring(0, 4)) + \"m\") + ((text).substring(5, 7))));
guesses++;
spotsLeft--;
}
//If you run out of guesses
if (guesses != 0) {
$(\"#guessesLeft\").html(\"You have \" + guesses + \" Guesses Left\");
}
//If you win the game
if (spotsLeft == 0) {
$(\"#letters\").remove();
$(\"#guessesLeft\").html(\"You DID IT, YOU WON!!!!!\");
}
//If there are no guesses left (If you lose the game)
if (guesses == 0) {
$(\"#letters\").remove();
$(\"#guessesLeft\").html(\"You are out of guesses, YOU LOST!!!\");
clickCount++;
}
}
else
e.preventdefault();
});
});
</script>
</html>
