需要在第5轮结束后显示结果而不点击事件。剪刀石头布游戏

Question

我正在尝试构建剪刀石头布游戏，一切正常。但问题是 5 轮结束后，endGame 函数不会立即执行，而是在我再次单击按钮后显示结果。结果应该在 5 轮结束后显示，而无需我再次单击按钮。

const choices = ["Rock","Paper","Scissor"];
const buttons = document.querySelectorAll("button");
let playerid = document.getElementById("playerid"); 
let computerid = document.getElementById("computerid");
const playermarks = document.getElementById("playerscore");
const computermarks = document.getElementById("computerscore");
const res = document.getElementById("res");
let computer;
let computerSelection;
let playerSelection;
//computer choice
function computerChoice(){
    computerSelection = choices[Math.floor(Math.random()*choices.length)];
    computerid.innerHTML = computerSelection;
    console.log("computerSelection",computerSelection);
}

buttons.forEach((btn) => {
    btn.addEventListener("click",(playerChoice));
})
//player choice
function playerChoice(e){
   playerSelection= e.target.innerHTML;
            playerid.innerHTML =playerSelection;
            console.log(" playerSelection", playerSelection);
            computerChoice();
            playGame();
            
}


//Round
function playRound(computerSel,playerSel){

    return (playerSel == computerSel) ? "Its a Tie" :
    ((computerSel == "Rock" && playerSel == "Paper") ||
    (computerSel == "Paper" && playerSel == "Rock") ||
    (computerSel == "Scissor" && playerSel == "Rock")) ? "computer won" : "player won";
}

// 5 Round



let playerScore = 0;
let computerScore = 0;
let round=0
function playGame(){
    
   
    if(round < 5){
        let result = playRound(computerSelection,playerSelection);
        console.log("result",result);
        if(result == "computer won"){
            computerScore++;
            computermarks.innerHTML = computerScore;
            console.log("computer Score",computerScore);
        }else if(result == "player won"){
             playerScore++;
             playermarks.innerHTML = playerScore;
            console.log("playerscore",playerScore);
        }
        round++;
    }else{
        endGame(computerScore,playerScore);
    }
    
    }
    
function endGame(cs,ps){
    if(cs > ps){
        res.innerHTML = "The Winner is Computer";
        console.log("The Winner is Computer");
    }else if (cs < ps){
        console.log("The Winner is Computer");
        res.innerHTML = "The Winner is Computer";
    }else{
        console.log("Its a tie")
        res.innerHTML = "Its a tie";
    }
}

我也尝试过 else if(round == 5) 和 else if(round == 5) 或 4 但在我单击按钮后它仍然显示结果。使用 for 循环时，我遇到了很多问题，因此尝试使用 if else。

Answer 1

在

playGame

中，将

endGame

调用移至

if

块内，并在增加后以

round

为 5 为条件。

else

块意味着游戏was 已经结束，并且不会发生任何事情。

    if(round < 5){
        let result = playRound(computerSelection,playerSelection);
        console.log("result",result);
        if(result == "computer won"){
            computerScore++;
            computermarks.innerHTML = computerScore;
            console.log("computer Score",computerScore);
        }else if(result == "player won"){
             playerScore++;
             playermarks.innerHTML = playerScore;
            console.log("playerscore",playerScore);
        }
        round++;
        // Check whether this was the last round:
        if (round === 5) {
            endGame(computerScore,playerScore);
        }
    } // No else-case