Stopping a function after a timer has stopped

I am making a game and I am wanting the game function to stop once the timer has reached 0.
Currently the game only resets when you press the reset button.

The timer resets however the user can keep clicking on the boxes and keep the game going, rather than having to press start game again.

This is my game function:

function startGame() {
    changedBox = null;
    let allBoxes = document.getElementsByClassName("box");
    for (let i = 0; i < allBoxes.length; i++) {
        allBoxes[i].style.backgroundColor = "#e7014c";
    }
    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);
    if (seconds < 0) {
        return;
    }
}

This is my start button function which also stops the timer:

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!";
            resetGame();
        }
    }, 1000);
});

Reset game function

    function resetGame() {
        clearInterval(intervalId);
        clearInterval(countDown);
        clicks = 0;
        level = 1;
        seconds = 20;
        timer = 20;
        document.getElementById("clicks").innerText = 0;
        document.getElementById("level").innerText = level;
        document.getElementById("timer").innerText = seconds;
        let allBoxes = document.getElementsByClassName("box");
        for (let i = 0; i < allBoxes.length; i++) {
            allBoxes[i].style.backgroundColor = "#e7014c";
        }
    }

Changes the colours of the boxes in the game:

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

I've tried everything I can think of and the game just keeps going.

I've tried adding the resetGame function into the startGame function.

Any help would really be appreciated!

I see that if you play your game and the time is up, that you can keep clicking boxes in your game table. You get an error but yes you can keep clicking (i.e. playing).

One thing you could do is when the time is up (i.e. game over), in addition to indicating the time is up on the screen, you could remove the game table div so the user can no longer play. So within your Click eventListener on the "Start Game" button you replace the call to resetGame(); with document.getElementById("game-table".style.display = 'none'; to make the game table disappear.

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);
});

Then in your restGame() function add a block to make game table Div to reappear:

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

Also within your StartGame() function add a check as well right below changedBox = null; and call the resetGame function to reset appropriately if already played.

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

I've had a look through the code and ran it. This code should fix your issue with the game not stopping and the user being still able to click the boxes.

// 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.log('box clicked');
        } else {
            clearInterval(intervalId);
            alert('Sorry Wrong Box, Try again!');
            console.log('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);

I've used a flag variable gameActive to check if the game is active and disable the 4x4 grid accordingly and modified the functions accordingly. The stopBoxes() function has been removed since it was redundant. Try it out. Although your game has other possible bugs such as if the user clicks on an old box that had been highlighted, he gets an incorrect message, which does not make logical sense.