我正在编写一个使用JavaScript制作Hangman游戏的作业。除了一个关键部分，我真的一切都在工作。当用户点击正确的字母时，它应该用字母替换相应的连字符。而是出现一个数字。如果用户按下不正确的按钮，则会失去一个点，就像应该是这样。我相信这个功能可能会发生一些事情。 编辑：一个例子是隐藏的单词是“动物”。首先，它会为每个字母显示一个短划线：“------”。如果用户按下“A”按钮，则应显示“a --- a-”。用户然后按'N'，它显示“an - a-”等等。
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
}
}
这是背景代码。除了上述功能之外，我认为所有这些都是正确的。 编辑：我遗漏了代码的其他部分，认为它会更容易，只显示头部的功能。我现在意识到你甚至看不到整个页面，并且更好地了解它应该如何工作，从而使这更难。我很抱歉。这是整个代码。
<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<script type="text/javascript">
<!-- global variables -->
var guessInt = 6;
var guessStr = "You have " + guessInt + " tries left";
// Randomly select a word from the Array
function getWord()
{
var words = new Array("JAVASCRIPT", "COMPUTER", "PROGRAMMING", "OPERATOR",
"OPERAND", "CONDITIONAL", "REPETITION", "FUNCTION",
"ARRAY", "ERROR", "LOOP", "BOOLEAN", "STRING",
"NUMBER", "DEBUG", "SWITCH", "CASE", "HTML", "SCRIPT",
"BODY", "DOCTYPE", "RETURN", "OBJECT", "DATE", "MATH",
"TERNARY", "WHILE", "TABLE", "INPUT", "VALUE", "CLICK",
"CLASS", "STYLE", "BUTTON", "DOCUMENT", "TITLE", "HEAD");
var index = Math.floor(Math.random() * words.length);
return words[index];
}
// word is an object and length is an attribute of object word
// 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()
{
// reset guessInt
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>
<div id="header">
<img src ="http://www.cs.ucf.edu/courses/cop2500/sum2015/hw/hangman_large.png" style="float:left"; width:"100" height="100">
<hr/>
<h1 align="center">Hangman</h1>
<hr/>
</img>
</div>
<br/>
<div id="letters" style="width:400px;float:left;">
<!-- Complete the onclick actions for the buttons in the table of the <body> to -->
<!-- include onclick="isLetterInWord( document.getElementById('theWord').innerHTML, 'A')" -->
<!-- changing the letter as appropriate for the button -->
<table>
<tr>
<td><input name="Char" type="button" value="A" id="A" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'A')"/></td>
<td><input name="Char" type="button" value="B" id="B" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, '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="Click to Play" id="play" class="restart" onclick="start()"/>
</div>
<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 :(得分：1)
我最终搞清楚了我的问题。我添加了一些我甚至不需要的东西。关于这个任务的指示有时令人困惑，并且不清楚我是否真的需要在一行上键入一些代码，或者它是否只是描述我输入的下一部分代码将要执行的操作。
display = index;// Update the display
//^^I didn't need anything on this line ^^.
document.getElementById("theDashes").innerHTML = display;// Update element id "theDashes" to the updated display variable
//^^This was all I needed to do. Everything ran perfectly after that.
谢谢你们的帮助。
答案 1 :(得分：0)
您正在为setLetter函数中的显示变量分配索引变量，索引将是一个整数值，因此您需要修改如下代码：
function setLetter(word, letter, display)
{
var origWord = word;
// keep the word that is passed in the function safely
/* 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 = origWord[index];
// Update the display with the letter and not just the index
document.getElementById("theDashes").innerHTML = display;// Update element id "theDashes" to the updated display variable
}
}
答案 2 :(得分：0)
我知道这不是你提出的要求，但你可能认为这很有用。
在我看来，使用子串和文本替换不是最佳选择。我建议将答案视为一个对象并改变其成员的状态。
假设您有一个对象，其中包含Letter对象：
function Answer(word, wrapperId){
this.letters = [];
this.wrapperId = wrapperId;
this.setAnswer(word);
display();
this.setAnswer = setAnswer;
function setAnswer(word){
this.letters = [];
for(var i=0; i<word.length; i++){
this.letters.push(new Letter(word[i]));
}
display();
}
this.guess = guess;
function guess(letter){
for(var i=0; i=this.letters.length; i++){
if(this.letters[i].value = letter){
this.letters[i].isHidden = false;
display();
}
}
}
function display(){
var answer = "";
for(var i=0; i<this.letters.length; i++){
answer += (this.letters[i].isHidden) ? "-" : this.letters[i].value;
}
document.getElementById(this.wrapperId).innerHTML = answer;
}
}
function Letter(letter){
this.value = letter;
this.isHidden = true;
}
在初始化时，您只需拨打var ans = new Answer("your word", "yourWrapperId")，然后在按键上拨打ans.guess()并输出一个猜测为参数的字母。