Question 342873 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Need to display result after end of round 5 without clicking event. Rock Paper Scissor game

I am trying to Build Rock paper scissor game in this everything is working fine. But the issue is after the end of 5 rounds the endGame function is not executing immediately it is showing result after i click on buttons again. The result should display after the end of 5 round without me clicking the button again.

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";
    }
}

I have also tried with else if(round == 5) and else if( round == 5) or with 4 but still it is showing result after i click on button. With for loop i was facing lot of issues hence tried with if else.

Tags:

2

Answers


  1. 0

    In playGame, move the endGame call inside the if block, and make it conditional to round being 5 after you’ve increased it. The else block means the game was already over, and nothing should happen.

        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

    Still, after this correction, the buttons can still be clicked, and you’d get into a continuation of the game that was already finished. One way to deal with that is to consider the next button click the first round of a new game. So at that button click the game should be "reset". You could for instance start the playGame function with this code:

        if (round === 5) { // Game was already over. Start a new game:
        playerScore = 0;
        computerScore = 0;
        round = 0;        
        playermarks.innerHTML = "";
        computermarks.innerHTML = "";
        res.innerHTML = "";
    }

    … and then have it followed by the code you already had (with the suggested correction).

    Login or Signup to reply.
  2. 0

    To resolve this issue, you need to check if the round count is equal to 5 immediately after the playerChoice() function is called, and then call the endGame() function if the condition is met.

    function playerChoice(e){
        playerSelection= e.target.innerHTML;
        playerid.innerHTML =playerSelection;
        console.log(" playerSelection", playerSelection);
        computerChoice();
        playGame();
        
        if (round === 5) {
           endGame(computerScore, playerScore);
        }
}

    With this change, the endGame() function will be called immediately after the 5th round is completed, without requiring an additional button click.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search