子手游戏。 为什么不显示破折号？
[英]Hangman game. Why won't the dashes show?
问题描述
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>
1 个解决方案
解决方案1
0 2015-12-10 02:23:33
Your code has a LOT of problems. 您的代码有很多问题。 I cleaned it up enough to get the dashes to show. 我将其清理干净，足以显示破折号。 The dark dashes don't show up real well on the green background but they are there. 深色破折号在绿色背景上显示不佳，但它们在那里。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
标题甚至不会显示在带有嵌入式JavaScript的HTML刽子手游戏中 - Heading won't even show in an HTML hangman game with embedded javascript
“ Hangman”游戏。 题词显示为“ tresc_diva”，而不是字母 - “Hangman” game. Instead of letters, the inscription is displayed “tresc_diva”
子手游戏。 2个数组。 一个需要相应地更新到另一个 - Hangman game. 2 arrays. One need to update accordingly to the other one
用于显示编码单词的简单刽子手游戏的逻辑 - Logic for a simple hangman game to show encoded word
为什么我的刽子手 JavaScript 游戏中没有显示我的所有信件？ - Why aren't all my letters showing up in my hangman javascript game?
JavaScript Pong游戏。 我不能一次移动2位玩家 - JavaScript Pong game. I can't move 2 players at once
为什么我的网络流不显示？ - Why won't my webstream show?
为什么引导程序导航栏菜单不显示？ - Why won't bootstrap navbar menu show?
为什么我的画布不显示？ - Why won't my Canvas show up?
为什么我的链接不显示？ - Why won't my links show?
相关标签