Пишу простую игру для практики, угадай слово. Проблема такая когда 10 жизней сгорает, жму остановить игру, опять жму начать. Вроде все обнуляется, но после ввода буквы и клике на ОТПРАВИТЬ каждый раз вызывается алерт "вы проиграли" и все начинается сначала. Как быть?
if(document.getElementById('start')){
let start = document.getElementById('start'), /* Получение кнопки старт */
stop = document.getElementById('stop'), /* Получение кнопки стоп */
form = document.querySelector('.game-form'); /* Получение формы */
start.addEventListener('click', function(event){ /* Клик по кнопке старт */
toggleButton(); /* Вызов функции hide кнопок и формы */
startGame(); /* Вызов функции запуска игры */
});
stop.addEventListener('click', function(event){ /* Клик по кнопке стоп */
toggleButton(); /* Вызов функции hide кнопок и формы */
});
function toggleButton(){ /* Функция hide кнопок и формы */
event.preventDefault(); /* Отмена действия по умолчанию */
start.classList.toggle('header-button-hide'); /* Показать или скрыть кнопку старт */
stop.classList.toggle('header-button-hide'); /* Показать или скрыть кнопку стоп */
form.classList.toggle('game-form-hide'); /* Показать или скрыть форму */
}
let arrayWords = [{ /* Массив слов */
word: 'рыба',
hint: 'Плавает в воде'
},{
word: 'птица',
hint: 'Летает в небе'
},{
word: 'машина',
hint: '4 колеса'
},{
word: 'стол',
hint: 'За ним едят'
}];
function startGame(){ /* Функция запуска игры */
let hp = 10, /* Переменная с ХП */
number = Math.floor(Math.random() * arrayWords.length), /* Получаем рандомное число */
word = arrayWords[number].word, /* Получаем нужное слово */
hint = arrayWords[number].hint, /* Получаем нужную подсказку */
answerArray = [], /* Пустой массив для ответа */
remainingLetters = word.length, /* Счетчик, сколько букв осталось */
innerHp = document.getElementById('hp'), /* Получение блока вывода hp жизней*/
innerHint = document.getElementById('hint'), /* Получение блока вывода hint подсказки*/
innerLetter = document.getElementById('letter'), /* Получение блока вывода letter букв*/
buttonEnter = document.getElementById('enter-letter'), /* Кнопка отправки буквы */
message = document.querySelector('.message'); /* Получение блока для сообщений */
document.getElementById('input-letter').value = '' /* Очистки инпута */
innerHp.innerHTML = hp; /* Вывод ХП */
innerHint.innerHTML = hint; /* Вывод подсказки */
for(let i = 0; i < word.length; i++){
answerArray[i] = '_'; /* Заполнение пустого массива */
}
innerLetter.innerHTML = answerArray.join(' '); /* Вывод угаданных букв и замена запятых на пробел */
buttonEnter.addEventListener('click', function(event){ /* Клик по кнопки отправки буквы */
event.preventDefault(); /* Отмена действий по умолчанию */
message.innerHTML = '';
let enterLetter = document.getElementById('input-letter').value; /* Получение буквы */
document.getElementById('input-letter').value = '' /* Очистки инпута */
if(enterLetter.length !== 1){
message.innerHTML = 'Введите 1 букву'; /* Если поле ввода отличается от 1 */
}else{
message.innerHTML = '';
let negation = false; /* Отгаданна ли буква */
for(let q = 0; q < word.length; q++){ /* Перебор слова */
if(word[q] == enterLetter.toLowerCase()){ /* Если буквы совпадают */
answerArray[q] = enterLetter; /* Запись введенной буквы в массив */
innerLetter.innerHTML = answerArray.join(' '); /* Вывод обновленного массива с буквами */
negation = true; /* Если буква есть */
}
}
if(!negation && hp > 0){
message.innerHTML = 'Буква не найдена'; /* Буква не найдена*/
hp--; /* Отнять ХП */
innerHp.innerHTML = hp; /* Вывод ХП */
}
if(hp <= 0){
alert('Вы проиграли'); /* Счетчик ХП меньше 0, вы проиграли */
}
}
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Угадай слово</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" type="text/css" href="style/normalize.css">
</head>
<body>
<header class="header-page">
<form class="header-wrap" method="GET" action="/start.php">
<button id="start" class="header-button">Начать</button>
<button id="stop" class="header-button header-button-hide">Остановить</button>
</form>
</header>
<main>
<section class="game">
<form method="GET" action="/check.php" class="game-form game-form-hide">
<h2 class="message"></h2>
<p><span>Жизни:</span> <span id="hp"></span></p>
<p><span>Подсказка:</span> <span id="hint"></span></p>
<p><span>Ваши буквы:</span> <span id="letter"></span></p>
<label>Введите букву: <input type="text" name="letter" id="input-letter"></label>
<input type="submit" name="enter-letter" id="enter-letter">
</form>
</section>
</main>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
<code lang="css">
body,
html{
padding: 0;
margin: 0;
}
body{
background-color: #7e57c2;
}
.header-button-hide{
}
.header-button{
font-size: 16px;
border-radius: 10px;
padding: 5px 10px;
border: none;
}
.header-button:active{
background-color: gray;
color: white;
}
.header-page{
margin-top: 30px;
margin-bottom: 60px;
}
.header-wrap{
text-align: center;
}
.game-form{
margin: 0 auto;
max-width: 500px;
}
.header-button-hide{
display: none;
}
.game-form-hide{
display: none;
}
</code>