setInterval and clearInterval for rock paper scissors

28 Views Asked by At

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>

0

There are 0 best solutions below