Javascript Hangman игра, как сохранить слово, которое пользователь ввел

Привет и счастливый благодарение всем. Поэтому я пытаюсь написать игру палача, которая позволяет пользователю ввести шестизначное слово, а другой человек должен угадать эти буквы в слове. Как любая палач-игра. Проблема в том, что я не знаю, как написать функцию saveWord. Вот HTML:Javascript Hangman игра, как сохранить слово, которое пользователь ввел

<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>

Heres в 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();

с точки зрения проверки, если CHARAC тер угадали в слове, вы можете сделать это:

//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 Hangman игра, как сохранить слово, которое пользователь ввел

ответ

Смежные вопросы