diff --git a/Games/Memory_Game/index.html b/Games/Memory_Game/index.html index ce390456dd..38d731987c 100644 --- a/Games/Memory_Game/index.html +++ b/Games/Memory_Game/index.html @@ -29,7 +29,11 @@

INSTRUCTIONS

3. Click on another block and try to remember on which block have you seen the same image

4. Your Number of moves are counted

+ +
+ +

diff --git a/Games/Memory_Game/script.js b/Games/Memory_Game/script.js index 32c76941a6..a792af3372 100644 --- a/Games/Memory_Game/script.js +++ b/Games/Memory_Game/script.js @@ -2,11 +2,12 @@ const moves = document.getElementById("moves-count"); const timeValue = document.getElementById("time"); const startButton = document.getElementById("start"); const stopButton = document.getElementById("stop"); +const pauseButton = document.getElementById("pause"); const gameContainer = document.querySelector(".game-container"); const result = document.getElementById("result"); const controls = document.querySelector(".controls-container"); let cards; -let interval; +let interval = null; let firstCard = false; let secondCard = false; @@ -32,6 +33,8 @@ let seconds = 0, //Initial moves and win count let movesCount = 0, winCount = 0; + let secondsValue = 0; + let minutesValue = 0; //For timer const timeGenerator = () => { @@ -42,8 +45,8 @@ const timeGenerator = () => { seconds = 0; } //format time before displaying - let secondsValue = seconds < 10 ? `0${seconds}` : seconds; - let minutesValue = minutes < 10 ? `0${minutes}` : minutes; + secondsValue = seconds < 10 ? `0${seconds}` : seconds; + minutesValue = minutes < 10 ? `0${minutes}` : minutes; timeValue.innerHTML = `Time:${minutesValue}:${secondsValue}`; }; @@ -98,6 +101,11 @@ const matrixGenerator = (cardValues, size = 4) => { cards = document.querySelectorAll(".card-container"); cards.forEach((card) => { card.addEventListener("click", () => { + +if (interval === null) { // prevents multiple intervals + interval = setInterval(timeGenerator, 1000); + } + //If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored) if (!card.classList.contains("matched")) { //flip the cliked card @@ -161,7 +169,7 @@ startButton.addEventListener("click", () => { stopButton.classList.remove("hide"); startButton.classList.add("hide"); //Start timer - interval = setInterval(timeGenerator, 1000); + //interval = setInterval(timeGenerator, 1000); //initial moves moves.innerHTML = `Moves: ${movesCount}`; initializer(); @@ -175,6 +183,20 @@ stopButton.addEventListener( stopButton.classList.add("hide"); startButton.classList.remove("hide"); clearInterval(interval); + seconds = 0; + minutes = 0; + secondsValue = 0; + minutesValue = 0; + interval = null; + timeValue.innerHTML = `Time:${minutesValue}:${secondsValue}`; + }) +); + +pauseButton.addEventListener( + "click", + (pauseGame = () => { + clearInterval(interval); + interval = null; }) );