Остановка функции после остановки таймера

Я вижу, что если вы играете в свою игру и время истекло, вы можете продолжать щелкать ячейками в своем игровом столе. Вы получаете сообщение об ошибке, но да, вы можете продолжать нажимать (то есть играть).

Одна вещь, которую вы можете сделать, это когда время истекло (то есть игра окончена), в дополнение к индикации времени на экране, вы можете удалить div игрового стола, чтобы пользователь больше не мог играть. Итак, в вашем Click eventListener на кнопке «Начать игру» вы заменяете вызов resetGame(); с document.getElementById("game-table".style.display = 'none'; чтобы игровой стол исчез.

let startButton = document.getElementById("start-game");
startButton.addEventListener("click", function () {
  startGame();
  countDown = setInterval(function () {
      document.getElementById("timer").innerHTML = seconds;
      seconds--;
      if (seconds < 0) {
        clearInterval(countDown);
        document.getElementById("timer").innerHTML = "Times up!";
        document.getElementById("game-table".style.display = 'none';
      }
  }, 1000);
});

Затем в вашей функции restGame() добавьте блок, чтобы игровой стол Div снова появился:

if (document.getElementById('game-table').style.display == 'none') {
  document.getElementById('game-table').style.display = 'flex';
}

Также в вашей функции StartGame() добавьте галочку прямо под changeBox = null; и вызовите функцию resetGame для соответствующего сброса, если игра уже пройдена.

if (document.getElementById('game-table').style.display == 'none') {
  resetGame();
}

Я просмотрел код и запустил его. Этот код должен решить вашу проблему с тем, что игра не останавливается, а пользователь все еще может щелкать поля.

// Variables
let intervalId;
let changedBox = null;
let level = 1;
let clicks = 0;
let seconds = 20;
let countDown;
let totalClicks = 0;
let gameActive = false;

/** COLOUR ARRAY
 * List of colours that the game can choose from to keep the site design with pastel colours
 */
let colors = ["#ffb5e8", "#d5aaff", "#6eb5ff", "#faf99d", "#bffcc6",
    "#ffabab", "#ff9cee", "#ffcf9e", "#b28dff", "#c4faf8", "#fff5ba", "#ffbebc", "#c4faf8"];

/** WHICH BOX HAS CHANGED
 * This if statement checks if the box that has been clicked matches the box that has changed colour
 * If the correct box is clicked, the increaseClicks function is called.
 * If user clicks on the wrong box the below message will appear
 */
function changeBackground(boxId) {
    if (!gameActive) {
        return;
    }

    if (seconds < 0) {
        return;
    }
    if (intervalId) {
        if (boxId === changedBox) {
            clearInterval(intervalId);
            increaseClicks();
            startGame();
            console.info('box clicked');
        } else {
            clearInterval(intervalId);
            alert('Sorry Wrong Box, Try again!');
            console.info('wrong box');
        }
    }
}

/** RANDOM COLOURS
 * This function runs through the array of colours outlined in the variable 'colors'
 * So that they are randomly selected
 */
function randomColor() {
    let randomColors = Math.floor(Math.random() * colors.length);
    return colors[randomColors];
}

/** START GAME FUNCTION
 * This function begins by making sure the changedBox is resert to null at the beginning of each round.
 * The for loop goes through each box and makes sure its background is set to the original pink colour.
 * The randomBox will change colour, and calls the randomColor function written above.
 * The clear interval clears the previouis internal is stoped before starting a new one.
 * This was impliments so that the colours did not all change together.
 * An internvial is set to change the boxes every 2 seconds
 */
function startGame() {
    changedBox = null;
    let allBoxes = document.getElementsByClassName("box");
    for (let i = 0; i < allBoxes.length; i++) {
        allBoxes[i].style.backgroundColor = "#e7014c";
        allBoxes[i].disabled = false; // Enable grid buttons
    }
    let randomBox = Math.floor(Math.random() * allBoxes.length);
    changedBox = allBoxes[randomBox].id;
    document.getElementById(changedBox).style.backgroundColor = randomColor();
    clearInterval(intervalId);
    intervalId = setInterval(function () {
        let randomBox = Math.floor(Math.random() * allBoxes.length);
        changedBox = allBoxes[randomBox].id;
        document.getElementById(changedBox).style.backgroundColor = randomColor();
    }, 2000);
}

// SCORE SECTION
function increaseClicks() {
    let currentClicks = parseInt(document.getElementById("clicks").innerText);
    let newClicks = currentClicks + 1;
    document.getElementById("clicks").innerText = newClicks;
    totalClicks++;
    document.getElementById("total-clicks").innerText = totalClicks;
}

// START GAME WITH CLICK
let startButton = document.getElementById("start-game");
startButton.addEventListener("click", function () {
    if (!gameActive) {
        startGame();
        countDown = setInterval(function () {
            document.getElementById("timer").innerHTML = seconds;
            seconds--;

            if (seconds < 0) {
                clearInterval(countDown);
                document.getElementById("timer").innerHTML = "Times up!";
                gameActive = false;
                resetButton.disabled = false; // Enable reset button when game ends
            }
        }, 1000);
        resetButton.disabled = false; // Enable reset game if start button is clicked
        gameActive = true;
    }
});

// RESET GAME
function resetGame() {
    clearInterval(intervalId);
    clearInterval(countDown);
    clicks = 0;
    level = 1;
    seconds = 20;
    document.getElementById("clicks").innerText = 0;
    document.getElementById("level").innerText = level;
    let allBoxes = document.getElementsByClassName("box");
    for (let i = 0; i < allBoxes.length; i++) {
        allBoxes[i].style.backgroundColor = "#e7014c";
        allBoxes[i].disabled = true; // Disable grid buttons
    }
    gameActive = false; // Set the game state to inactive
    resetButton.disabled = true; // Disable Reset button after resetting the game
    startButton.disabled = false; // Enable the Start button
}

// LEVEL
function addLevel() {
    let currentLevel = parseInt(document.getElementById("level").innerText);
    let newLevel = currentLevel + 1;
    document.getElementById("level").innerText = newLevel;
}

// RESET BUTTON
let resetButton = document.getElementById("reset");
resetButton.addEventListener("click", resetGame);

Я использовал флаговую переменную gameActive, чтобы проверить, активна ли игра, и соответственно отключить сетку 4x4, а также соответствующим образом изменить функции. Функция stopBoxes() была удалена, поскольку она была избыточной. Попробуйте. Хотя в вашей игре есть и другие возможные ошибки, например, если пользователь нажимает на старое выделенное поле, он получает неверное сообщение, что не имеет логического смысла.