JS石头剪刀布游戏，animation问题

Question

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 class="game"> <.-- This is the score section--> <div class="score"> <div class="player-score"> <.-- This will show the player score--> <h2>Player</h2> <p>0</p> </div> <div class="computer-score"> <.--This will show the computers score--> <h2>Computer</h2> <p>0</p> </div> </div> <div class="intro"> <.-- this is the main part of the gamne--> <h1>Rock Paper and Scissors</h1> <button>Let's play</button> </div> <div class="match fadeOut"> <h2 class="winner">Choose an option</h2> <div class="hands"> <img class="player-hand" src="./assets/rock.png" alt="rock"> <!-- This is the players hand that is on the left hand side. --> <img class="computer-hand" src="./assets/rock.png" alt="rock"> <!--This is the computers hand --> </div> <!-- This will show the hands--> <div class="options"> <!--This will be where the player can select their options--> <button class="rock">rock</button> <button class="paper">paper</button> <button class="scissors">scissors</button> </div> <!--This will be where the player can select their options--> </div> </section>

Answer 1

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/

Answer 2

 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 class="game"> <.-- This is the score section--> <div class="score"> <div class="player-score"> <.-- This will show the player score--> <h2>Player</h2> <p>0</p> </div> <div class="computer-score"> <.--This will show the computers score--> <h2>Computer</h2> <p>0</p> </div> </div> <div class="intro"> <.-- this is the main part of the gamne--> <h1>Rock Paper and Scissors</h1> <button>Let's play</button> </div> <div class="match fadeOut"> <h2 class="winner">Choose an option</h2> <div class="hands"> <img class="player-hand" src="./assets/rock.png" alt="rock"> <!-- This is the players hand that is on the left hand side. --> <img class="computer-hand" src="./assets/rock.png" alt="rock"> <!--This is the computers hand --> </div> <!-- This will show the hands--> <div class="options"> <!--This will be where the player can select their options--> <button class="rock">rock</button> <button class="paper">paper</button> <button class="scissors">scissors</button> </div> <!--This will be where the player can select their options--> </div> </section> <script src="./main.js"></script> </body> </html>