Игра застряла в интервале. Как можно решить?

Question

[Денис]

После прохождение игры и окончания всех жизней, выводится модальное окно со счетом набранным в игре. После нажатия ок игра должна очищаться так сказать, точнее принять такое же состояние как при открытыии игры чтобы ее можно было запустить заного. Но после нажатия ок в финальном модальном окне оно появляется заного с обнуленным значением счета. И при открытии инспектора счет в модальном окне странно себя ведет тоесть постоянно обновляется еще до нажатия ок но число не меняется.
Скорее всего я где-то не обнулил интервал или таймаут.
Если кто может взглянуть и подсказать куда мне нужно обратить внимание буду очень благодарен. Спасибо.

https://jsfiddle.net/hmzsrc07/

Answer 1

[0xD34F]

Скорее всего я где-то не обнулил интервал или таймаут.

Так точно. В методе gameOver. Должно быть. А вот нету. Надо добавить. Правда, это не сильно поможет. Потому что новый интервал создаётся при каждом клике. Так что надо ещё и обработчик клика снимать. Вы снимаете, но не там и не то (тут следует осознать такую вещь - в removeEventListener следует передавать ту же функцию, что передавалась в addEventListener). Исправлено.

Comments

[Денис]

Понял, но при старте новой игры счетчик очков не збрасывается, хотя метод в клике вроде прописсан

[0xD34F]

Денис, что прописано? Где прописано? Вы ошибаетесь. Не согласны? - ну тогда расскажите, в какой строке происходит обновление счётчика очков.

[Денис]

0xD34F,

gameOver() {
    this.finalModalScore.innerHTML = this.score;
    this.endGameModal.classList.add('end-game_show');
    clearInterval(this.gameInterval);
    document.removeEventListener('click', this.clickOnEmoji);
    this.closeEndModal.addEventListener('click', () => {
      this.endGameModal.classList.remove('end-game_show');
      this.fillInitScore();
      this.speedValueNum.innerHTML = "1";
      buttonStart.addEventListener('click', buttonClick);
    })
  }

this.fillInitScore(); разве не добавляет метод который обнуляет счет?

[0xD34F]

Денис, что значит "добавляет метод"? Кто добавляет? Куда добавляет? Зачем добавляет? Несёте какую-то пьяную околесицу. Это вызов метода fillInitScore. Что он делает? Например, обнуляет количество очков. Счётчик очков он не обновляет.

[Денис]

0xD34F, Ну я пытаюсь разобраться...

[0xD34F]

Денис, разобраться - это как? Вы же вроде автор кода. Значит должны понимать, что написали. Или код не ваш? Или всё-таки ваш, но писали не приходя в сознание?

Чтобы обновить счётчик, надо поместить в него значение счёта:

this.scoreElement.innerHTML = this.score;

[Денис]

0xD34F, Ну зачем так грубо. Ясное дело что не весь код писал я, помогали. Но я понял в чем был ошибка. Я писал так this.score.innerHTML = '0';

[Денис]

И разве не так? this.scoreElement.innerHTML = '0';

[0xD34F]

Денис, так, если для вас "обновить счётчик" == "обнулить счётчик" (очевидно, это не всегда так).

[Денис]

0xD34F, Буду иметь ввиду, в любом случае спасибо за ваше терпение и помощь

Answer 2

[hzzzzl]

gameOver() {
    this.finalModalScore.innerHTML = this.score;
    this.endGameModal.classList.add('end-game_show');
  }

  startGame() {
    this.mouseChance();
    this.fillLives();
    this.fillInitScore();
    this.fillInitLevel();
    this.gameInterval = setInterval(() => this.creatingAnimals(), this.speed);

    // листенеры делаем только в первый раз! 
    // иначе они будут дублироваться при начале каждой игры
    document.addEventListener('click', (e) => {
      if (e.target !== this.startButt) {
        this.clickOnEmoji(e);
      }
    });

    // поэтому этот листенер здесь, а не в gameover
    // иначе он будет добавляться каждый раз
    // и функция будет выполняться много раз
    this.closeEndModal.addEventListener('click', () => {
      this.endGameModal.classList.remove('end-game_show');
      this.fillInitScore();
      this.speedValueNum.innerHTML = "1";
      buttonStart.addEventListener('click', buttonClick);
      this.resetGame()
    })
  }

  resetGame() {
    // тут всё возвращаем в исходное состояние
    clearInterval(this.gameInterval)
    this.mouseChance();
    this.fillLives();
    this.fillInitScore();
    this.fillInitLevel();
    this.gameInterval = setInterval(() => this.creatingAnimals(), this.speed);
  }