Question: I need help with this JavaScript project: 1 . Add code to ensure that all the game events stop as soon as time runs out.

I need help with this JavaScript project:
1. Add code to ensure that all the game events stop as soon as time runs out. This includes but is not limited to the timer, the adding of images, and the click-ability of images. This part is important because the game must end at some point. Your timer should not count below 0
seconds.
2. For the gamer to play the game again, you will need to reset the score, timer, and turn on the click event for the startbutton at the end of the game. After the alert appears, calling another function to reset the game will do the trick. Though there are few ways to accomplish this.
My code:
let firstName;
firstName= prompt("Please enter your first name") ;
const phrase= "Shall we play the game "+ firstName +"?";
const instructions = document.getElementById("directions");
const newParagraph = document.createElement("p");
let addImageInterval;
let count =0;
let score=0;
let seconds =30;
newParagraph.innerHTML = phrase;
instructions.parentNode.insertBefore(newParagraph, instructions);
$(document).ready(function (){//Creates ready function
$("#start_button").css({'color': '#a8a8a8',//Controls the look of the start button
'text-shadow': '1px 1px black',
'font-size':'20px',
'font-weight':'bold',
'font-family':'"Anta", sans-serif',
'background-color':'white',
'border-radius':'25px',
'width': '250px'
});
$("#start_button").click(function(){//When the start button is clicked it begins the game and the button can't be clicked again
$(this).off();
beginGame();
});
$('#gamespace').on('click','img', function(){//This controls the score when the image is clicked and makes the image go away
$(this).remove(); //Removes the image when it is clicked
incrementScore();
});
$("#footerinfo").load("load.html")
});
function getX(){// This grabs the random x position for the images to appear at
return Math.floor(Math.random()*500);
};
function getY(){//This grabs the random y positions for the images to appear at
return Math.floor(Math.random()*250);
};
function randImage(min, max){//This gets the random times for when the image appears
return Math.floor(Math.random()*(max - min +1))+ min;
};
function incrementScore(){//This is the function that makes the score work and updates the units of measure for the score
score+=1;
if (score ==1){
$("#score").text(score +" prisoner");
} else {
$("#score").text(score +" prisoners");
};
};
function beginGame(){//This function shows and starts the timer and adds images when the start button is pressed
$('.timerText').show(); // Shows the timer when the game starts
decrementTimer(); //Activates the timer when the game begins
addImage(); //Adds images when the game begins
}
function decrementTimer(){//This is the timer function
if (seconds <0){//Stops the images and timer from continuing after the timer hits zero
clearTimeout(decrementTimer);
clearTimeout(addImageInterval);
} else {//Shows the time remaining and counts down
$(".timerText").text(seconds +" seconds remaining");
seconds --;
setTimeout(decrementTimer,1000);
}
}
function addImage(){//This function adds the images to the game space
let xPos = getX(); //Gets the random positions for the images
let yPos = getY();
let imgID =`image_${count}`;
$("#gamespace").append(''); //Appends the image to the game space
count ++;
setTimeout(function(){//Function removes the images randomly form 1 sec to 3 secs
$('#'+ imgID).remove();
}, randImage(1000,3000));
addImageInterval = setTimeout(addImage, randImage(0,2000)); //Adds the image randomly from 0 to 2 secs
};

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!