@TonyGrouse1216

Как пофиксить баг функции js в HTML игре?

Здравствуйте. Столкнулся с багом в функции при создании игры. Сама игра работает вроде корректно, но при перезапуске(нажать на кнопку "начать заново") функция отрабатывает некорректно, а именно - она не завершается. Я закончил ее написав 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();
        }
    });
});
  • Вопрос задан
  • 125 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы