I am new to JS and trying to finish Rock, Paper, Scissors, Lizard, Spock game. The only thing left to fix is shuffle emoji speed if I press 'Next round' button more than once.
I am struggling with clearing Interval . If click more than once on 'next round' button the interval speed increases and can't clear it even if clicking on emojis. Any suggestions?
I tried to use a for loop to clear interval each time 'next round' button is clicked more than once but just more confused how to solve it.
// ----------------------GAME----------------------
// Add active class to the current button (highlight it)
var header = document.getElementById("player-choice-container");
var btns = header.getElementsByClassName("emoji");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
// Counting score
let playerScore = 0;
let computerScore = 0;
let moves = 0;
let userChoice = "";
let computerChoice = "";
let emojis = ["✂️ ", "", "", "", ""];
let currentEmojiNumber = 0;
let shuffleIntervalID;
let userChoiceContainer = document.querySelector("#player-choice-container");
let emojiShuffleElement = document.querySelector("#emoji-shuffle");
userChoiceContainer.addEventListener("click", handlePlayerChoice);
// Function to get player choice
function handlePlayerChoice(event) {
if (!event.target.classList.contains("emoji") || moves >= 10) return;
userChoice = event.target.textContent;
clearInterval(shuffleIntervalID);
moves++;
document.querySelector('.movesleft').innerText = `Moves Left: ${10 - moves}`;
determineWinner();
if (moves == 10) {
gameOver();
} else {
shuffleEmojis();
}
determineWinner();
}
// Function to generate computer and user choice
let nextRound = document.getElementById('next-round');
nextRound.addEventListener('click', nextRoundBtn);
// Function to reset user and computer choice and pick choice again
function nextRoundBtn() {
shuffleIntervalID = setInterval(shuffleEmojis, 150);
}
function playerEmojis() {
playAgainEmoji = getElementById('player-choice-container');
userChoiceContainer.textContent = playAgainEmoji;
}
// Function to return a random emoji from the dictionary and genenerate computer choice.
function shuffleEmojis() {
computerChoice = emojis[currentEmojiNumber];
emojiShuffleElement.textContent = computerChoice;
if (currentEmojiNumber < emojis.length - 1) {
currentEmojiNumber++;
} else {
currentEmojiNumber = 0;
}
}
// Function to compare user and computer choices and determin game winner.
function determineWinner() {
let gameResultMessageElement = document.querySelector("#game-result-message");
let gameResultMessage = "";
let playerScoreBoard = document.querySelector('.p-count');
let computerScoreBoard = document.querySelector('.c-count');
if (userChoice === computerChoice) {
gameResultMessage = "It's a tie!";
playerScore += 0;
playerScoreBoard.textContent = playerScore;
computerScore += 0;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "✂️ ") {
gameResultMessage = 'Rock crushes scissors. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "✂️ " && computerChoice === "") {
gameResultMessage = 'Rock crushes scissors ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Paper covers rock. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Paper covers rock ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "✂️ " && computerChoice === "") {
gameResultMessage = 'Scissors cut paper. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "✂️ ") {
gameResultMessage = 'Scissors cut paper ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Lizard eats paper. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Lizard eats paper ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "✂️ " && computerChoice === "") {
gameResultMessage = 'Scissors decapitate lizard. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "✂️ ") {
gameResultMessage = 'Scissors decapitate lizard! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Rock crushes lizard. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Rock crushes lizard ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Spock vaporizes rock. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Spock vaporizes rock ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Paper disproves Spock. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Paper disproves Spock ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "✂️ ") {
gameResultMessage = 'Spock crushes scissors. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "✂️ " && computerChoice === "") {
gameResultMessage = 'Spock crushes scissors ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Lizard poisons Spock. You win !';
playerScore += 1;
playerScoreBoard.textContent = playerScore;
} else if (userChoice === "" && computerChoice === "") {
gameResultMessage = 'Lizard poisons Spock ! You lose';
computerScore += 1;
computerScoreBoard.textContent = computerScore;
}
gameResultMessageElement.textContent = gameResultMessage;
}
// Function to end the game and determine final winner.
function gameOver() {
if (playerScore > computerScore) {
window.location.href = "win.html";
} else {
window.location.href = "lose.html";
}
}
// Function to shuffle emojis in the game and to show full emoji choice to the user
shuffleIntervalID = setInterval(shuffleEmojis, 150);
handlePlayerChoice();
//------------------------GAME OVER---------------------------------
// Function to play again game and redirect it to game.html
function playAgain() {
window.location.href = "game.html";
};
<main>
<div class="game-container">
<p>Player</p>
<!--Options available to player to play game -->
<div class="choice-container" id="player-choice-container">
<p class="emoji active"></p>
<p class="emoji"></p>
<p class="emoji">✂️ </p>
<p class="emoji"></p>
<p class="emoji"></p>
</div>
</div>
<h2 id="vs">VS</h2>
<!--Computer choice -->
<div class="game-container">
<p>Computer</p>
<div class="choice-container">
<p class="emoji" id="emoji-shuffle"></p>
</div>
</div>
</main>
<!--Result of game -->
<div id="game-result-message"></div>
<!--Final result of game -->
<div class="result"></div>
<!--Display Score of player and computer -->
<div class="score">
<div class="playerScore">
<h2>Player</h2>
<p class="p-count count">0</p>
</div>
<!-- Next round button for user to pick his choice and computer to generate new one-->
<div><button id="next-round">Next round</button></div>
<div class="computerScore">
<h2>Computer</h2>
<p class="c-count count">0</p>
</div>
</div>
<!--Number of moves left before game ends -->
<div class="movesleft" id="moves-l">Moves Left: 10 </div>
</section>