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'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 reset 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 previous internal is stopped before starting a new one.
* This was implements so that the colours did not all change together.
* An interval 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.