Question

大家好，感谢大家。因此，我正在尝试编写一个允许用户输入六个字符的刽子手游戏，然后另一个人必须猜测该字母中的字母。像任何刽子手游戏一样。问题是我不确定如何编写我的saveWord函数。这是HTML：

<html>
<title>HangMan</title>
<head>
<script type="text/javascript" src="hangman.js"></script>
<link rel="stylesheet" type="text/css" href="hangmanstyle.css">
</head>
<body>
<div id="gameover"></div>
<table align="center">
<tr>
<td align="left"><img alt="Bar" src="img/bar.jpg"/></td>
<td width="50px"></td>
</tr>
<tr>
<td colspan="2">
 <table>
 <tr>
   <td width="150px"></td>
   <td><img alt="Pole" src="img/pole.jpg"/></td>
   <td valign="top" width="400px">
     <table align="right">
     <tr>
       <td></td>
       <td><img id="head" alt="Head" src="img/head.jpg"/></td>
       <td></td>
     </tr>
     <tr>
       <td style="vertical-align:top;" align="right"><img id="arm1" alt="Arm1" src="img/arm1.jpg"/></td>
       <td align="center"><img id="body" alt="Body" src="img/body.jpg"/></td>
       <td style="vertical-align:top;" align="left"><img id="arm2" alt="Arm2" src="img/arm2.jpg"/></td>
     </tr>
     <tr>
       <td><img id="leg1" alt="Leg1" src="img/leg1.jpg"/></td>
       <td></td>
       <td><img id="leg2" alt="Leg2" src="img/leg2.jpg"/></td>
     </tr>
     </table>
     </td>
    </tr>
    </table>
    </td>
   <td width="50px"></td>
  </tr>
  <tr>
  <td align="center" colspan="2"><img alt="Base" src="img/base.jpg"/></td>
  </tr>
  </table>

  <div id="enterWordContainer" align="center">
Enter a six letter word for hangman:  <input id="hangManWord" type="text" value="" />
<input type="button" value="Submit" onclick="saveWord();"/>
 </div>
<div id="error" align="center"></div>

<div id="wordAnswer" align="center">
<div id="letter0" class="letterAnswer"></div>
<div id="letter1" class="letterAnswer"></div>
<div id="letter2" class="letterAnswer"></div>
<div id="letter3" class="letterAnswer"></div>
<div id="letter4" class="letterAnswer"></div>
<div id="letter5" class="letterAnswer"></div>
</div>
<br class="clearBoth" />  

<div id="letterContainer">
<table align="center">
<tr>
  <td>
    Guess a letter: <input class="letterInpt" id="letter" type="text" value="" />
    <input type="button" onclick="checkLetter('letter');" value="Guess"/>
   </td>
 </tr>
 </table>
 </div>

<div id="newGame" align="center">
 <input id="newGameBtn" type="button" value="New Game?" onclick="newGame();" />
</div>
</body>

</html>

继承人的CSS：

  body
 {
 }

.letterInpt
{
width:  45px;
height: 35px;
font-weight: bolder;
font-size: 1.5em;
text-align: center;
}

#letterContainer
{
display:none;
}

#head 
{
  visibility:hidden;
  }

  #body
  { 
  visibility:hidden;
  }

  #arm1
  {
   visibility:hidden;
  }

   #arm2
 {
   visibility:hidden;
 }

  #leg1
  {
  visibility:hidden;
  }

  #leg2
  {
  visibility:hidden;
  }

 #error
 {
display: none;
color: #E00;
font-weight: bold;
text-align: center;
}

 #wordAnswer
{
 display: none;

  float: left;
  position: relative;
  left: 50%;
}

 .letterAnswer
{
 width: 35px;
height: 35px;
border: 1px solid #CCC;
margin-left: 7px;
float:left;
position: relative;
left: -50%;
font-weight: bold;
font-size: 2em;
}

.clearBoth 
{ 
 clear:both; 
}

#gameover
{
background-color: #EEE;
text-align: center;
font-weight: bold;
font-size: 5em;
width:700px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-350px;
display: none;
}

#newGameBtn
{
display: none;
}

这是我到目前为止所获得的js。它真的不多。

var word = "";

function saveWord(word){
if(document.getElementById('hangManWord').innerHTML = word)
{
}

function wordAnswer(){
}
function checkLetter('letter'){
}
function newGame(){
}

当然我的js不起作用，但我觉得我在正确的轨道上我只需要额外的推动来帮助我开始。谢谢你的帮忙！另外，我如何检查字母是对还是错。我有一个想法，我觉得我可能不得不使用阵列，但我不确定。任何帮助表示赞赏！谢谢！

Answer 1

你可以这样做：

var txtWord = document.getElementById("hangManWord");
txtWord.style.display = 'none';

它将隐藏输入，您仍然可以使用以下内容访问内部值：

txtWord.value;

Answer 2

在保存单词方面，您可以只使用<input>框并使用

获取提交的值

var s = $('#inputbox').val();

在检查猜到的字符是否在单词中时，您可以这样做：

//s is the word that the user previously submitted
function checkLetter(letterGuessed) {
    for (var i = 0; i < s.length; i++) {
        if(letterGuessed == s.charAt(i)) {
            //you guessed right!
        }
        else {
            //you guessed wrong :(
        }
    }
}

之前的代码会将提交的单词分解为单个字符。从那里，它将评估每个字符，看它是否等于用户猜测的字母（存储为letterGuessed）。每次用户猜出一个字母时，只需调用该函数即可。当然，您必须修改我在if / else声明中所做的评论，以满足您的需求。

希望这有帮助。

Javascript Hangman游戏如何保存用户输入的单词

2 个答案: