Здравствуйте. Столкнулся с багом в функции при создании игры. Сама игра работает вроде корректно, но при перезапуске(нажать на кнопку "начать заново") функция отрабатывает некорректно, а именно - она не завершается. Я закончил ее написав return, а также пробовал вернуть из нее значение и использовать его, но тоже без результата. Из-за этого при перезапуске игры эта функция не перезапускается, а дублируется и при клике на кнопку алфавита клик идет столько раз, сколько функция была запущена, не переопределяются переменные wrong и right, из-за чего происходят некорректные действия. Речь идет о функции game().
При первой игре все работает нормально, при следующих плохо
Прикреплю ссылку на код всего проекта
'use strict';
window.addEventListener('DOMContentLoaded', () => {
const words = ['Компьютер', 'Программа', 'Клавиатура', 'Монитор', 'Мышь', 'Микрофон', 'Дисковод'];
const btnStart = document.querySelector('.btn__start'),
subtitle = document.querySelector('.subtitle'),
title = document.querySelector('.title'),
alphabet = document.querySelector('.alphabet'),
alphabetLetters = document.querySelectorAll('.alphabet__word'),
wordsItem = document.querySelector('.words'),
bodyItem = document.querySelectorAll('.body-item');
// get random word from array
function randomWord(arr) {
const i = Math.floor(Math.random() * arr.length);
const word = arr[i];
return word;
}
// create blocks with letters
function createBlocks(word) {
let blocks = word.toLowerCase().split('');
const elements = [];
for (let i = 0; i < blocks.length; i++) {
let w = document.createElement('div');
w.classList.add('word');
w.textContent = blocks[i];
elements.push(w);
}
elements.forEach(e => wordsItem.append(e));
return elements;
}
// get blocks with right letter
function getBlock(letter, blocks) {
let b = [];
blocks.forEach(block => {
if (block.textContent === letter.value) {
b.push(block);
}
});
return b;
}
// start our game
function startGame() {
btnStart.style.display = 'none';
alphabet.style.cssText = `
transform: translate(0%, -50%);
opacity: 1;
`;
title.textContent = 'Добро пожаловать на казнь!';
title.style.color = '#b40000';
subtitle.textContent = 'Выберите букву';
}
// playing game
function game() {
startGame();
let wrong = 0,
right = 0;
// word from array and blocks with letters
let gameWord = randomWord(words),
gameBlocks = createBlocks(gameWord);
console.log(gameWord);
alphabetLetters.forEach(letter => {
letter.style.cssText = `text-transform: uppercase;`;
//с этого места начинается баг
letter.addEventListener('click', (e) => {
e.preventDefault();
const target = e.target;
let rightAnswer = getBlock(target, gameBlocks);
if (rightAnswer.length > 0) {
target.style.backgroundColor = 'rgb(116, 224, 72)';
target.disabled = true;
rightAnswer.forEach(answ => {
answ.style.cssText = `
font-size: 20px;
text-transform: uppercase;
`;
});
right += rightAnswer.length;
if (right === gameWord.length) {
winGame();
return;
}
} else {
bodyItem[wrong].style.opacity = '1';
wrong++;
target.disabled = true;
target.style.backgroundColor = 'rgb(255, 72, 72)';
if (wrong === 6) {
loseGame(gameBlocks);
return;
}
}
});
});
}
function endGame() {
alphabetLetters.forEach(l => {
l.disabled = true;
});
btnStart.style.display = 'block';
btnStart.textContent = 'Начать заново';
btnStart.classList.remove('btn__start');
btnStart.classList.add('btn__restart');
}
function winGame() {
endGame();
title.textContent = 'Победа!';
title.style.color = 'rgb(0, 255, 85)';
subtitle.textContent = 'Вы обманули смерть';
}
function loseGame(gameBlocks) {
endGame();
title.textContent = 'Поражение!';
title.style.color = 'rgb(255, 43, 43)';
subtitle.textContent = 'Смерть настигла вас';
gameBlocks.forEach(item => {
item.style.cssText = `
font-size: 20px;
text-transform: uppercase;
`;
});
const message = document.createElement('p');
message.textContent = 'Было загадано слово';
wordsItem.insertAdjacentElement('beforebegin', message);
}
function restart() {
bodyItem.forEach(item => {
item.style.opacity = '0';
});
alphabetLetters.forEach(letter => {
letter.disabled = false;
letter.style.backgroundColor = 'rgb(243, 255, 79)';
});
document.querySelectorAll('.word').forEach(word => {
word.remove();
});
game();
}
btnStart.addEventListener('click', () => {
if (btnStart.classList.contains('btn__start')) {
game();
} else if (btnStart.classList.contains('btn__restart')) {
restart();
}
});
});