JS Rock paper scissors game, animation issue-CodePudding

I am very new to coding. I followed a tutorial by dev Ed.

When I click on the button 'Lets Play' It should fade out and show the game. It worked at first but at some point it stopped.

There may be more errors than this but I am not able to test it until I can get past this first one. I apologise if it is something simple and I am very new to this. Is anyone able to help me out with this?

const game = () => {
  let pScore = 0; //Player score
  let cScore = 0; //Computer score
}
//Start the game
const startGame = () => {
  const playBtn = document.querySelector('.intro button'); // Lets play button
  const introScreen = document.querySelector('.intro'); //This is the main screen of the game that will fade when the button is pressed. 
  const match = document.querySelector('.match');

  playBtn.addEventListener('click', () => {
    introScreen.classList.add('fadeOut');
    match.classList.add('fadeIn');
  });
};

//play match
const playMatch = () => {
  const options = document.querySelectorAll('.options button'); //Selects all the options from the buttons
  const playerHand = document.querySelector('.player-hand');
  const computerHand = document.querySelector('.computer-hand');
  const hands = document.querySelectorAll('.hands img');

  hands.forEach(hand => {
    hand.addEventListener('animationend', function() {
      this.style.animation = '';
    });
  })
  //Computer Options
  const computerOptions = ['rock', 'paper', 'scissors'];

  options.forEach(option => {
    option.addEventListener('click', function() {
      //computer choice
      const computerNumber = math.floor(Math.random() * 3);
      const computerChoice = computerOptions[computerNumber];
      //Here is the where we call compare hands everytime the user preses one of the buttons
      setTimeout(() => {
        compareHands(this.textContent, computerChoice);
        //Update Images
        playerHand.src = `./assets/${this.textContent}.png`;
        computerHand.src = `./assets/${computerChoice}.png`;
      }, 2000);
      //Animation
      playerHand.style.animation = "shakePlayer 2s ease";
      computerHand.style.animation = "shakeComputer 2s ease";
    });
  });
};

const updateScore = () => {
  const playerScore = document.querySelector('.player-score p');
  const computerScore = document.querySelector('.computer-score p');
  playerScore.textContent = pScore;
  computerScore.textContent = cScore;
}

//The function below is getting the computers choice from above 
const compareHands = (playerChoice, computerChoice) => {
  //Update Text
  const winner = document.querySelector('.winner');
  //Checking for a tie
  if (playerChoice === computerChoice) {
    winner.textContent = 'It is a tie';
    return; //If it is a tie, this will stop the rest of the code from running. and will end the function.
  }
}
//Check for Rock
if (playerChoice === 'rock') {
  if (computerChoice === 'scissors') {
    winner.textContent = 'Player Wins';
    pScore  ;
    updateScore();
    return;
  } else {
    winner.textContent = 'Computer Wins';
    cScore  ;
    updateScore();
    return;
  }
}
//Check for paper
if (playerChoice === 'paper') {
  if (computerChoice === 'scissors') {
    winner.textContent = 'Computer Wins';
    cScore  ;
    updateScore();
    return;

  } else {
    winner.textContent = 'Player Wins';
    pScore  ;
    updateScore();
  }
}
//Check for Scissors
if (playerChoice === 'scissors') {
  if (computerChoice === 'rock') {
    winner.textContent = 'Computer Wins';
    cScore  ;
    return;
  } else {
    winner.textContent = 'Player Wins';
    pScore  ;
    updateScore();
    return;
  }
  //Is call all the the inner  functions.
  startGame();
  playMatch();
};

//start the game function
game();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  background-color: rgb(39, 41, 68);
  font-family: sans-serif;
}

.score {
  color: rgb(216, 214, 214);
  height: 20vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.score h2 {
  font-size: 30px;
}

.score p {
  text-align: center;
  padding: 10px;
  font-size: 25px;
}

.intro {
  color: rgb(216, 214, 214);
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: opacity 0.5s ease;
}

.intro h1 {
  font-size: 50px;
}

.intro button,
.match button
/*This is styling the buttons */

{
  width: 150px;
  height: 50px;
  background: none;
  border: none;
  color: rgb(216, 214, 214);
  font-size: 20px;
  background: rgb(45, 117, 96);
  border-radius: 3px;
  cursor: pointer;
}

.match {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease 0.5;
}

.winner {
  color: rgb(216, 214, 214);
  text-align: center;
  font-size: 50px;
}

.hands,
.options
/* This is styling the hands section*/

{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.player-hand {
  transform: rotateY(180deg);
}

div.fadeOut
/* This will make the fade out */

{
  opacity: 0;
  pointer-events: none;
}

div.fadeIn {
  opacity: 1;
  pointer-events: all;
}

@keyframes shakePlayer {
  0% {
    transform: rotateY(180deg) translateY(0px);
  }
  15% {
    transform: rotateY(180deg) translateY(-50px);
  }
  25% {
    transform: rotateY(180deg) translateY(0px);
  }
  35% {
    transform: rotateY(180deg) translateY(-50px);
  }
  50% {
    transform: rotateY(180deg) translateY(0px);
  }
  65% {
    transform: rotateY(180deg) translateY(-50px);
  }
  75% {
    transform: rotateY(180deg) translateY(0px);
  }
  85% {
    transform: rotateY(180deg) translateY(-50px);
  }
  100% {
    transform: rotateY(180deg) translateY(0px);
  }
}

@keyframes shakeComputer {
  0% {
    transform: translateY(0px);
  }
  15% {
    transform: translateY(-50px);
  }
  25% {
    transform: translateY(0px);
  }
  35% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(0px);
  }
  65% {
    transform: translateY(-50px);
  }
  75% {
    transform: translateY(0px);
  }
  85% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}

<section >
  <!-- This is the score section-->
  <div >
    <div >
      <!-- This will show the player score-->
      <h2>Player</h2>
      <p>0</p>
    </div>
    <div >
      <!--This will show the computers score-->
      <h2>Computer</h2>
      <p>0</p>
    </div>
  </div>

  <div >
    <!-- this is the main part of the gamne-->
    <h1>Rock Paper and Scissors</h1>
    <button>Let's play</button>
  </div>

  <div >
    <h2 >Choose an option</h2>
    <div >
      <img  src="./assets/rock.png" alt="rock">
      <!-- This is the players hand that is on the left hand side. -->
      <img  src="./assets/rock.png" alt="rock">
      <!--This is the computers hand -->
    </div>
    <!-- This will show the hands-->

    <div >
      <!--This will be where the player can select their options-->
      <button >rock</button>
      <button >paper</button>
      <button >scissors</button>
    </div>
    <!--This will be where the player can select their options-->
  </div>
</section>

CodePudding user response：

It looks like there's a mistake in compareHands with closing the curly brackets too early. The startGame() and playMatch() are being called in that last if statement if you follow the brackets, so the event listener in startGame() is not being added to the button.

Fix the brackets issue in compareHands (look at line 66 and see the brackets are closing before it gets to the if statements) and move startGame() and playMatch() outside of that function, like game(), so that they are called and the event listener is added to the button.

https://jsfiddle.net/53Lsbyxu/20/

CodePudding user response：

let scores = {
  player: 0,
  computer: 0
};
let enemies = {
  rock: "scissors",
  paper: "rock",
  scissors: "paper"
};

const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");
const winner = document.querySelector(".winner");
const options = document.querySelectorAll(".options");
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
const hands = document.querySelectorAll(".hands img");
const playerScore = document.querySelector(".player-score p");
const computerScore = document.querySelector(".computer-score p");

const startGame = () => {
  playBtn.onclick = () => {
    introScreen.classList.add("fadeOut");
    match.classList.add("fadeIn");
  };
};


const playMatch = () => {
  hands.forEach((hand) => (hand.onanimationend = (e) => (e.target.style.animation = "")));
  options.forEach((option) => {
    option.onclick = (e) => {
      const computerChoice = Object.keys(enemies)[Math.floor(Math.random() * 3)];
      setTimeout(() => {
        compareHands(e.target.textContent, computerChoice);
        playerHand.src = `./assets/${e.target.textContent}.png`;
        computerHand.src = `./assets/${computerChoice}.png`;
      }, 2000);
      playerHand.style.animation = "shakePlayer 2s ease";
      computerHand.style.animation = "shakeComputer 2s ease";
    };
  });
};

const updateMatch = () => {
  playerScore.textContent = scores.player;
  computerScore.textContent = scores.computer;
};

const compareHands = (playerChoice, computerChoice) => {
  if (playerChoice === computerChoice) return (winner.textContent = "It is a tie");

  if (enemies[playerChoice] === computerChoice) {
    scores.computer  ;
    winner.textContent = "Computer Wins";
  } else {
    scores.player  ;
    winner.textContent = "Player Wins";
  }
  updateMatch();
};
startGame();
playMatch();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  background-color: rgb(39, 41, 68);
  font-family: sans-serif;
}

.score {
  color: rgb(216, 214, 214);
  height: 20vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.score h2 {
  font-size: 30px;
}

.score p {
  text-align: center;
  padding: 10px;
  font-size: 25px;
}

.intro {
  color: rgb(216, 214, 214);
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: opacity 0.5s ease;
}

.intro h1 {
  font-size: 50px;
}

.intro button,
.match button
/*This is styling the buttons */

{
  width: 150px;
  height: 50px;
  background: none;
  border: none;
  color: rgb(216, 214, 214);
  font-size: 20px;
  background: rgb(45, 117, 96);
  border-radius: 3px;
  cursor: pointer;
}

.match {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease 0.5;
}

.winner {
  color: rgb(216, 214, 214);
  text-align: center;
  font-size: 50px;
}

.hands,
.options
/* This is styling the hands section*/

{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.player-hand {
  transform: rotateY(180deg);
}

div.fadeOut
/* This will make the fade out */

{
  opacity: 0;
  pointer-events: none;
}

div.fadeIn {
  opacity: 1;
  pointer-events: all;
}

@keyframes shakePlayer {
  0% {
    transform: rotateY(180deg) translateY(0px);
  }
  15% {
    transform: rotateY(180deg) translateY(-50px);
  }
  25% {
    transform: rotateY(180deg) translateY(0px);
  }
  35% {
    transform: rotateY(180deg) translateY(-50px);
  }
  50% {
    transform: rotateY(180deg) translateY(0px);
  }
  65% {
    transform: rotateY(180deg) translateY(-50px);
  }
  75% {
    transform: rotateY(180deg) translateY(0px);
  }
  85% {
    transform: rotateY(180deg) translateY(-50px);
  }
  100% {
    transform: rotateY(180deg) translateY(0px);
  }
}

@keyframes shakeComputer {
  0% {
    transform: translateY(0px);
  }
  15% {
    transform: translateY(-50px);
  }
  25% {
    transform: translateY(0px);
  }
  35% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(0px);
  }
  65% {
    transform: translateY(-50px);
  }
  75% {
    transform: translateY(0px);
  }
  85% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css" />
  <title>Rock Paper and Scissors</title>
</head>

<body>
  <section >
    <!-- This is the score section-->
    <div >
      <div >
        <!-- This will show the player score-->
        <h2>Player</h2>
        <p>0</p>
      </div>
      <div >
        <!--This will show the computers score-->
        <h2>Computer</h2>
        <p>0</p>
      </div>
    </div>

    <div >
      <!-- this is the main part of the gamne-->
      <h1>Rock Paper and Scissors</h1>
      <button>Let's play</button>
    </div>

    <div >
      <h2 >Choose an option</h2>
      <div >
        <img  src="./assets/rock.png" alt="rock">
        <!-- This is the players hand that is on the left hand side. -->
        <img  src="./assets/rock.png" alt="rock">
        <!--This is the computers hand -->
      </div>
      <!-- This will show the hands-->

      <div >
        <!--This will be where the player can select their options-->
        <button >rock</button>
        <button >paper</button>
        <button >scissors</button>
      </div>
      <!--This will be where the player can select their options-->
    </div>
  </section>
  <script src="./main.js"></script>
</body>

</html>