Javascript Hang子手遊戲如何保存用戶輸入的單詞

大家好，感恩節快樂。所以我想寫一個hang子手遊戲，允許用戶輸入六個字符的單詞，然後另一個人必須猜測單詞中的字母。像任何hang子手遊戲一樣。問題是我不確定如何編寫我的saveWord函數。下面是HTML：Javascript Hang子手遊戲如何保存用戶輸入的單詞

<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不工作，但我覺得我在正確的軌道上，我只是需要額外的推動，以幫助我開始。感謝您的幫助！另外我將如何檢查，看看這些字母是對還是錯。我有一個想法，我覺得我可能會不得不使用一個數組，但我不確定。任何幫助表示讚賞！謝謝！

來源

2013-11-28 user3025364

在節能這個詞的條款，你可以簡單地用<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聲明中所做的評論以滿足您的需求。

希望這會有所幫助。

來源

2013-11-28 19:30:35 Charles

你可能只是這樣做：

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

它會隱藏輸入，你仍然可以與內訪問該值：

txtWord.value;

來源

2013-11-28 19:18:57 Shryme

Javascript Hang子手遊戲如何保存用戶輸入的單詞

回答

相關問題