The dashes don't appear to represent the letters in the word. They're supposed to initiate when the start function is activated from clicking the play button.
<html>
<head>
<img src="images/hangman_large.png" style="width:200px;height:200px;">
<h1>Hangman</h1>
<h3>theStatus</h3>
<h4>theDashes</h4>
<SCRIPT LANGUAGE="JavaScript">
var guessInt = 6;
var guessStr = "You have " + guessInt + " tries left";
// Randomly select a word from the Array
function getWord()
{
var words = new Array("Number","Goblin","Prestidigitation","Invigorating","Radio",
"Bromine","Bosnia","Catastrophe","Manic","Marble",
"Granite","Georgia","Forlorn","Monster","Blasphemy");
var index = Math.floor(Math.random() * words.length);
return words[index];
}
// Given a string, "word", return a hidden version of it consisting of dashes for the display.
function getDisplay(word)
{
var display = "";
for (var i=0; i < word.length; i++)
{
display = display + "-";
}
return display;
}
// word is an object and search is a default function part of object word
// Given the word "word", check if it contains the letter "letter".
// FIND IF THE LETTER IS IN THE WORD
function isLetterInWord(word, letter)
{
/* Write an if conditional to check if the variable word is null OR
the value of guessInt equals 0 */
if (word === null || guessInt === 0)
{
return;// Return program control with a return statement
}
else
{
/* Write an if conditional that calls the search function on variable word
passing variable letter as an argument and use the logical compound not
operator and equality (!=) to compare the result to -1, -1 indicates that
it doesn't exist */
if(word.search(letter) != -1)
{
setLetter(word, letter, document.getElementById("theDashes").innerHTML);
// Call function setLetter(word, letter, document.getElementById("theDashes").innerHTML);
}
else
{
// letter was not in the word so decrease the number of tries left and update the display
guessInt--;// Decrement global variable guessInt by 1
guessStr="You have " + guessInt + " tries left";
// Update global variable guessStr based in the updated value of guessInt
document.getElementById("guesses").innerHTML = guessStr;
// Update element id "guesses" to the updated guessStr
}
isFinished(word, document.getElementById("theDashes").innerHTML, guessInt);
// Call function isFinished( word, document.getElementById("theDashes").innerHTML, guessInt );
}
}
//UPDATE GAME DISPLAY IF WE'VE BEEN GIVEN A MATCHING LETTER
// This method is called by the Hangman program when your isLetterInWord function above returns true.
// The parameters passed in are the guessed letter, the secret word, and the current display state of the secret word.
// This method will return a new display state of the secret word based on the matching letter.
function setLetter(word, letter, display)
{
/* Write an if conditional to check if the variable word is null OR
the value of guessInt equals 0 */
if(word === null || guessInt === 0)
{
return;// Return program control with a return statement
}
else
{
/* Write a repetition statement that calls the search function on variable word
passing variable letter as an argument and use the logical compound not operator
and equality (!=) to compare the result to -1 */
while(word.search(letter) != -1)
{
// Create variable index and set it equal to the search function call on variable
// word passing variable letter
var index = word.search(letter);
display = display.substr( 0, index ) + letter + display.substr( index + 1 );
word = word.substr( 0, index ) + '-' + word.substr( index + 1 );
}
display = index;// Update the display
document.getElementById("theDashes").innerHTML = display;
// Update element id "theDashes" to the updated display variable
}
}
// This method is called each time you guess a letter. Its job is to determine whether you have have won the game, lost the game,
// or if the game should continue.
// The input parameters passed are the secret word (word), the current word display (display), and the number of chances left (left)
// to reveal the secret word.
function isFinished(word, display, left)
{
// Write a conditional statement checking to see if the value of left is greater than 0
if(left > 0)
{
// Write a conditional statement checking to see word is equal to display
if(word == display)
{
document.getElementById("theStatus").innerHTML = "Congratulations! You won!";// Update element id "theStatus" and set it equal to "Congratulations! You won!"
}
}
else
{
/* Update element id "theStatus" and set it equal to "HANGMAN! Your man has been hanged! -->
The word was and concatenate the variable word */
document.getElementById("theStatus").innerHTML = "HANGMAN! Your man has been hanged!";
}
}
}
// This is the main function that runs the program
**function start()
{
// TODO reset variable guessInt set equal to 6
guessInt = 6;
// reset guessStr
guessStr = "You have " + guessInt + " tries left";
// create a variable called word set equal to function call getWord()
var word = getWord();
// create a variable called display set equal to function call getDisplay() passing variable word as an argument
var display = getDisplay(word);
// update HTML object id "guesses" so it equals variable guessStr
document.getElementById("guesses").innerHTML = guessStr;
// update HTML object id "theWord" so it equals variable word
document.getElementById("theWord").innerHTML = word;
// update HTML object id "theDashes" so it equals variable display
document.getElementById("theDashes").innerHTML = display;
// update HTML object id "theStatus" so it is empty for a new game
document.getElementById("theStatus").innerHTML = "";
}**
</script>
</head>
<body>
<script type="text/javascript">
</script>
<body style="background-color:green">
<FORM NAME="game">
<PRE>
<TEXTAREA NAME="status" ROWS="7" COLS="16"
ONFOCUS="stayAway()"></TEXTAREA>
</PRE><P>
<INPUT TYPE="TEXT" NAME="toGuess"
ONFOCUS="stayAway()"> <h1> theWord</h1><BR>
<INPUT TYPE="TEXT" NAME="guessed"
ONFOCUS="stayAway()"> <h2>guesses<h2><BR>
<table border="1" style="width:100%">
<tr>
<td><input name="Char" type="button" value="A" id="A" class="letter" onclick="isLetterInWord('A')"/></td>
<td><input name="Char" type="button" value="B" id="B" class="letter" onclick="isLetterInWord('B')"/></td>
<td><input name="Char" type="button" value="C" id="C" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'C')"/></td>
<td><input name="Char" type="button" value="D" id="D" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'D')"/></td>
<td><input name="Char" type="button" value="E" id="E" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'E')"/></td>
<td><input name="Char" type="button" value="F" id="F" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'F')"/></td>
<td><input name="Char" type="button" value="G" id="G" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'G')"/></td>
</tr>
<tr>
<td><input name="Char" type="button" value="H" id="H" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'H')"/></td>
<td><input name="Char" type="button" value="I" id="I" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'I')"/></td>
<td><input name="Char" type="button" value="J" id="J" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'J')"/></td>
<td><input name="Char" type="button" value="K" id="K" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'K')"/></td>
<td><input name="Char" type="button" value="L" id="L" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'L')"/></td>
<td><input name="Char" type="button" value="M" id="M" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'M')"/></td>
<td><input name="Char" type="button" value="N" id="N" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'N')" /></td>
</tr>
<tr>
<td><input name="Char" type="button" value="O" id="O" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'O')"/></td>
<td><input name="Char" type="button" value="P" id="P" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'P')"/></td>
<td><input name="Char" type="button" value="Q" id="Q" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Q')"/></td>
<td><input name="Char" type="button" value="R" id="R" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'R')"/></td>
<td><input name="Char" type="button" value="S" id="S" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'S')"/></td>
<td><input name="Char" type="button" value="T" id="T" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'T')"/></td>
<td><input name="Char" type="button" value="U" id="U" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'U')"/></td>
</tr>
<tr>
<td><input name="Char" type="button" value="V" id="V" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'V')"/></td>
<td><input name="Char" type="button" value="W" id="W" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'W')"/></td>
<td><input name="Char" type="button" value="X" id="X" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'X')"/></td>
<td><input name="Char" type="button" value="Y" id="Y" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Y')"/></td>
<td><input name="Char" type="button" value="Z" id="Z" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Z')"/></td>
</tr>
</table>
<input type="submit" style="width:150;height:50" value="Play" id="play" class="restart" onclick="start()"/>
</div>
<div style="width:400px;float:left;">
<h2>Let's Play!</h2>
<div style="width:200px;height:200px;float:left;">
<h3 id="guesses"></h3>
<h2 id="theDashes"></h2>
<!-- Update <h2 id="theWord"> with attribute hidden="true" so the selected word is not displayed -->
<h2 id="theWord" hidden="true"></h2>
<h3 id="theStatus"></h3>
<br/>
</div>
</body>
</html>
答案 0 :(得分：0)
您的代码有很多问题。我把它清理得足以让破折号显示出来。黑暗的破折号在绿色背景上显示得不是很好，但它们就在那里。
<!DOCTYPE html>
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var guessInt = 6;
var guessStr = "You have " + guessInt + " tries left";
// Randomly select a word from the Array
function getWord()
{
var words = new Array("Number","Goblin","Prestidigitation","Invigorating","Radio",
"Bromine","Bosnia","Catastrophe","Manic","Marble",
"Granite","Georgia","Forlorn","Monster","Blasphemy");
var index = Math.floor(Math.random() * words.length);
return words[index];
}
// Given a string, "word", return a hidden version of it consisting of dashes for the display.
function getDisplay(word)
{
var display = "";
for (var i=0; i < word.length; i++)
{
display = display + "-";
}
return display;
}
// word is an object and search is a default function part of object word
// Given the word "word", check if it contains the letter "letter".
// FIND IF THE LETTER IS IN THE WORD
function isLetterInWord(word, letter)
{
/* Write an if conditional to check if the variable word is null OR
the value of guessInt equals 0 */
if (word === null || guessInt === 0)
{
return;// Return program control with a return statement
}
else
{
/* Write an if conditional that calls the search function on variable word
passing variable letter as an argument and use the logical compound not
operator and equality (!=) to compare the result to -1, -1 indicates that
it doesn't exist */
if(word.search(letter) != -1)
{
setLetter(word, letter, document.getElementById("theDashes").innerHTML);
// Call function setLetter(word, letter, document.getElementById("theDashes").innerHTML);
}
else
{
// letter was not in the word so decrease the number of tries left and update the display
guessInt--;// Decrement global variable guessInt by 1
guessStr="You have " + guessInt + " tries left";
// Update global variable guessStr based in the updated value of guessInt
document.getElementById("guesses").innerHTML = guessStr;
// Update element id "guesses" to the updated guessStr
}
isFinished(word, document.getElementById("theDashes").innerHTML, guessInt);
// Call function isFinished( word, document.getElementById("theDashes").innerHTML, guessInt );
}
}
//UPDATE GAME DISPLAY IF WE'VE BEEN GIVEN A MATCHING LETTER
// This method is called by the Hangman program when your isLetterInWord function above returns true.
// The parameters passed in are the guessed letter, the secret word, and the current display state of the secret word.
// This method will return a new display state of the secret word based on the matching letter.
function setLetter(word, letter, display)
{
/* Write an if conditional to check if the variable word is null OR
the value of guessInt equals 0 */
if(word === null || guessInt === 0)
{
return;// Return program control with a return statement
}
else
{
/* Write a repetition statement that calls the search function on variable word
passing variable letter as an argument and use the logical compound not operator
and equality (!=) to compare the result to -1 */
while(word.search(letter) != -1)
{
// Create variable index and set it equal to the search function call on variable
// word passing variable letter
var index = word.search(letter);
display = display.substr( 0, index ) + letter + display.substr( index + 1 );
word = word.substr( 0, index ) + '-' + word.substr( index + 1 );
}
display = index;// Update the display
document.getElementById("theDashes").innerHTML = display;
// Update element id "theDashes" to the updated display variable
}
}
// This method is called each time you guess a letter. Its job is to determine whether you have have won the game, lost the game,
// or if the game should continue.
// The input parameters passed are the secret word (word), the current word display (display), and the number of chances left (left)
// to reveal the secret word.
function isFinished(word, display, left)
{
// Write a conditional statement checking to see if the value of left is greater than 0
if(left > 0)
{
// Write a conditional statement checking to see word is equal to display
if(word == display)
{
document.getElementById("theStatus").innerHTML = "Congratulations! You won!";// Update element id "theStatus" and set it equal to "Congratulations! You won!"
}
}
else
{
/* Update element id "theStatus" and set it equal to "HANGMAN! Your man has been hanged! -->
The word was and concatenate the variable word */
document.getElementById("theStatus").innerHTML = "HANGMAN! Your man has been hanged!";
}
}
// This is the main function that runs the program
function start()
{
// TODO reset variable guessInt set equal to 6
guessInt = 6;
// reset guessStr
guessStr = "You have " + guessInt + " tries left";
// create a variable called word set equal to function call getWord()
var word = getWord();
// create a variable called display set equal to function call getDisplay() passing variable word as an argument
var display = getDisplay(word);
// update HTML object id "guesses" so it equals variable guessStr
document.getElementById("guesses").innerHTML = guessStr;
// update HTML object id "theWord" so it equals variable word
document.getElementById("theWord").innerHTML = word;
// update HTML object id "theDashes" so it equals variable display
document.getElementById("theDashes").innerHTML = display;
// update HTML object id "theStatus" so it is empty for a new game
document.getElementById("theStatus").innerHTML = "";
}
</SCRIPT>
</head>
<body style="background-color:green">
<PRE>
<TEXTAREA NAME="status" ROWS="7" COLS="16"
ONFOCUS="stayAway()"></TEXTAREA>
</PRE><P>
<INPUT TYPE="TEXT" NAME="toGuess"
ONFOCUS="stayAway()"> <h1> theWord</h1><BR>
<INPUT TYPE="TEXT" NAME="guessed"
ONFOCUS="stayAway()"> <h2>
guesses
</h2>
<BR>
<table border="1" style="width:100%">
<tr>
<td><input name="Char" type="button" value="A" id="A" class="letter" onclick="isLetterInWord('A')" /></td>
<td><input name="Char" type="button" value="B" id="B" class="letter" onclick="isLetterInWord('B')" /></td>
<td><input name="Char" type="button" value="C" id="C" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'C')" /></td>
<td><input name="Char" type="button" value="D" id="D" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'D')" /></td>
<td><input name="Char" type="button" value="E" id="E" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'E')" /></td>
<td><input name="Char" type="button" value="F" id="F" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'F')" /></td>
<td><input name="Char" type="button" value="G" id="G" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'G')" /></td>
</tr>
<tr>
<td><input name="Char" type="button" value="H" id="H" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'H')" /></td>
<td><input name="Char" type="button" value="I" id="I" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'I')" /></td>
<td><input name="Char" type="button" value="J" id="J" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'J')" /></td>
<td><input name="Char" type="button" value="K" id="K" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'K')" /></td>
<td><input name="Char" type="button" value="L" id="L" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'L')" /></td>
<td><input name="Char" type="button" value="M" id="M" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'M')" /></td>
<td><input name="Char" type="button" value="N" id="N" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'N')" /></td>
</tr>
<tr>
<td><input name="Char" type="button" value="O" id="O" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'O')" /></td>
<td><input name="Char" type="button" value="P" id="P" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'P')" /></td>
<td><input name="Char" type="button" value="Q" id="Q" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Q')" /></td>
<td><input name="Char" type="button" value="R" id="R" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'R')" /></td>
<td><input name="Char" type="button" value="S" id="S" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'S')" /></td>
<td><input name="Char" type="button" value="T" id="T" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'T')" /></td>
<td><input name="Char" type="button" value="U" id="U" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'U')" /></td>
</tr>
<tr>
<td><input name="Char" type="button" value="V" id="V" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'V')" /></td>
<td><input name="Char" type="button" value="W" id="W" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'W')" /></td>
<td><input name="Char" type="button" value="X" id="X" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'X')" /></td>
<td><input name="Char" type="button" value="Y" id="Y" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Y')" /></td>
<td><input name="Char" type="button" value="Z" id="Z" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Z')" /></td>
</tr>
</table>
<input type="button" style="width:150;height:50" value="Play" id="play" class="restart" onclick="start()" />
<div style="width:400px;float:left;">
<h2>Let's Play!</h2>
<div style="width:200px;height:200px;float:left;">
<h3 id="guesses"></h3>
<h2 id="theDashes"></h2>
<!-- Update <h2 id="theWord"> with attribute hidden="true" so the selected word is not displayed -->
<h2 id="theWord" hidden="true"></h2>
<h3 id="theStatus"></h3>
<br />
</div>
</div>
</body>
</html>