@urajo

Как полностью обнулить функцию и запустить сначала?

Пишу простую игру для практики, угадай слово. Проблема такая когда 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>
  • Вопрос задан
  • 355 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы