“再玩一次！！”时如何调用 eventListener 中的函数？显示按钮

Question

`

pScore = 0; 
cScore = 0;
tie = 0; 

//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
    intro = document.querySelector('.intro');
    playBtn = document.querySelector(".playBtn");
    match = document.querySelector('.match');

    playBtn.addEventListener('click', e => {
    match.classList.add("fadeIn");
    playBtn.style.display= 'none';
    });
}


//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
    button = document.querySelectorAll('.buttons button');
    choices= ["rock", "paper", "scissors"];
    choiceDisplay = document.querySelector('.matchContainer');
    playerDisplay = document.querySelector('.playerDisplay');

    button.forEach(button => {
        button.addEventListener('click', function(e) {

            //generate random computerSelection
            computerSelection = choices[ Math.floor((Math.random() *choices.length))];
            
            //display computer and player selection on UI
            playerSelection = this.textContent;
            playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
            choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         
            
            compareSelection(playerSelection, computerSelection);
        });
    }); 
}    

const compareSelection = ( playerSelection, computerSelection) => {
    //compare player and computer choice
    if (playerSelection === computerSelection){
    tie++;
    game();
    return;
    } else if ( playerSelection === "rock" && computerSelection === "scissors" ||
    playerSelection === "scissors" && computerSelection === "paper" ||
    playerSelection === "paper" && computerSelection === "rock" ){ 
    pScore++;
    game();
    return;  
    } else {
    cScore++;
    game();
    return; 
    }
    
}   
const game = () => {

    playerScore = document.querySelector('.playerScore');
    computerScore = document.querySelector('.computerScore');
    tieScore = document.querySelector('.tieScore');
    resetBtn = document.querySelector('.resetBtn');
    rpsBtns = document.querySelector('.buttons');
    displayHolder = document.querySelector('.displayHolder');
    theWinner = document.querySelector('.theWinner');
    winSection = document.querySelector('.winSection');
    resetContainer = document.querySelector('.resetContainer');
    intro =document.querySelector('.intro');

    playerScore.textContent = pScore; 
    computerScore.textContent = cScore;
    tieScore.textContent = tie; 

    count= pScore +cScore +tie; 

    
    if(count === 5){
        //disable R.P.S buttons and make 'reset' button clickable. Present winner add trophy img
        rpsBtns.style.display = 'none';
        displayHolder.style.display = 'none';
        
        
        if( pScore > cScore){
            //add .winSection to display winner
            winSection.classList.add('fadeIn');
           
            theWinner.textContent = ("player");
        }
        else if( cScore > pScore ){
            //add .winSection to display winner
            winSection.classList.add('fadeIn');
            
            theWinner.textContent = ("computer");
        }
        else {
            //add .winSection to display winner
           
            winSection.style.display = 'none';

            
        } 
        //Add reset Button
        resetBtn.classList.add('fadeIn');
        resetBtn.addEventListener('click', () => {
           
           
           playGame();
        });
    
    }

}



startGame();
playGame();

body{
    background-color: #844141;
}

.intro, .buttons{
    text-align: center;

}
div.fadeOut{
    opacity: 0;
    
}

div.fadeIn, .resetBtn.fadeIn, .theWinner.fadeIn, .winSection.fadeIn{
    opacity: 1;
}

.match, .resetBtn{
    opacity: 0%;
    transition: .5s ease;

}

.score-list, .score-list2, .winSection, .resetContainer{
    font-size: 20px;        
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;

}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
    margin: 10px;
    font-size: 30px;
}

.winnerTitle{
    font-size: 40px;
}

.playBtn, .resetBtn{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    
}


/* .reset{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    opacity: 10;

} */
.matchContainer, .playerDisplay{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px
    
}

.displayHolder{
    display: flex;
    justify-content: center;
}

.rockBtn, .paperBtn, .scissorsBtn{
    font-size: 50px;
    background-color:#555d5f;
    margin: 15px;
    border-radius: 5px;
    font-family: "Time New Roman", times, serif;
    
}

.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover, .resetBtn:hover{
    background-color: #3c3e3f;
    transition: .7s;
}

.title{
    font-size: 45px;
}
.titleStatement{
    font-size: 30px;
}

span{
    font-size: 25px;
}

.theWinner{
    font-size: 53px;
    margin: 13px;
     
}
.winSection{
    opacity: 0%;
    
}


img{
    margin: 10px;
    width: 45px;
    height: 50px;
    
}

<!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">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css">
    <script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
    <div class="intro">
        <h1 class="title">Rock Paper Scissors</h1>
        <h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
        <!--once this is pressed the screen will transition to everything below -->
        <button class="playBtn">Play!!</button> 
    </div>  

    <div class="match">
          
        <div class="buttons">
            <button class="rockBtn">rock</button>
            <button class="paperBtn">paper</button>
            <button class="scissorsBtn">scissors</button>
        </div>

        <div class="displayHolder">
            <div class="playerDisplay"></div>
            <div class="matchContainer"></div>
            
        </div>
        <div class="score-list">
            <p class="playerTitle">Player Score: </p>
                <span class="playerScore">0</span>
            <p class="computerTitle">Computer Score:</p>
                <span class="computerScore">0</span>
            
        </div>    
            <div class="score-list2">
                <p class="tieTitle">Tie: </p>
                <span class="tieScore">0</span>
            </div>
        
        <div class="winSection">
        <h3 class="winnerTitle">Winner: </h3>
            <span class="theWinner">?</span>
            <img src="/trophy.png" alt="trophy image">
        </div>
        <div class="resetContainer">
            <button class="resetBtn">Play Again!</button>
        </div>
    </div>
</div>
</body>
</html>

游戏进行了 5 轮后，如果用户决定按下“再玩一次！！”按钮 我正在尝试让事件侦听器调用 playGame() 函数，以便屏幕显示 playGame() 函数时的样子。任何帮助表示赞赏。另外，为什么事件侦听器在按下时不带我回到 playGame() 函数？

Answer 1

您可以将所有分数重置为

0

，显示所有处于初始状态的元素并隐藏所有其他元素（基本上还原整个游戏中所做的所有更改）。

resetBtn.addEventListener('click', e => {
  playerScore.textContent = computerScore.textContent = tieScore.textContent = pScore = cScore = tie = 0;
  match.classList.remove('fadeIn');
  winSection.classList.remove('fadeIn');
  resetBtn.classList.remove('fadeIn');
  playBtn.style.display = '';
  rpsBtns.style.display = '';
  displayHolder.style.display = '';
  playerDisplay.textContent = choiceDisplay.textContent = '';
});