Javascript剪刀石头布游戏的问题

Question

我是JavaScript的初学者，正在编写经典的《 Rock Paper Scissors》游戏，此刻有一个问题。玩家和计算机第一次获胜时，分数似乎都没有更新。只有玩家和计算机第二次获胜时，分数才会添加到计分板上。换句话说，计算机或播放器的分数总是落后1分。感谢您理解为什么会发生这种情况。

这是我的JS / HTML代码：

const totalChoices = ["rock", "paper", "scissors"];
    
    let rock_button = document.getElementById("rock");
    let paper_button = document.getElementById("paper");
    let scissors_button = document.getElementById("scissors");
    let resultNarrative = document.getElementById("resultNarrative");
    let userScorePath = document.getElementById("playerScore");
    let computerScorePath = document.getElementById("computerScore");
    let playerScore = 0;
    let computerScore = 0;
    
    const compareChoices = (player) => {
        let randomNum = Math.floor(Math.random() * 3);
        let computerChoice = totalChoices[randomNum];
        console.log(computerChoice);
        console.log(player);
        if (computerChoice === totalChoices[0]) {
            if (player === totalChoices[1]) {
                narrative(`The Player wins! The computer chose ${totalChoices[0]}  
                            and the player chose ${totalChoices[1]}`);
                playerPoint(playerScore++);
                console.log(playerScore);
            } else if (player === totalChoices[2]) {
                narrative(`The computer wins! The computer chose 
                            ${totalChoices[0]} and the player chose  ${totalChoices[2]}`);
    
                computerPoint(computerScore++);
                console.log(computerScore);
            }
        }
        if (computerChoice === totalChoices[1]) {
            if (player === totalChoices[2]) {
                narrative(`The Player wins! The computer chose ${totalChoices[1]} 
                            and the player chose ${totalChoices[2]}`);
                playerPoint(playerScore++);
                console.log(playerScore);
            } else if (player === totalChoices[0]) {
                narrative(`The computer wins! The computer chose ${totalChoices[1]} and the player chose ${totalChoices[0]}`);
                computerPoint(computerScore++);
                console.log(computerScore);
            }
        }
        if (computerChoice === totalChoices[2]) {
            if (player === totalChoices[0]) {
                narrative(`The Player wins! The computer chose 
                               ${totalChoices[2]} and the player chose  ${totalChoices[0]}`);
                playerPoint(playerScore++);
                console.log(playerScore);
            } else if (player === totalChoices[1]) {
                narrative(`The computer wins! The computer chose 
                                ${totalChoices[2]} and the player chose  ${totalChoices[1]}`);
                computerPoint(computerScore++);
                console.log(computerScore);
            }
        }
        if (computerChoice === player) {
            narrative(`There is a tie! The computer chose ${computerChoice}  
                            and the player chose ${player}`);
        }
    };
    
    function main() {
        rock_button.addEventListener("click", function () {
            player = compareChoices("rock");
            console.log("you chose Rock");
        });
        paper_button.addEventListener("click", function () {
            player = compareChoices("paper");
            console.log("you chose Paper");
        });
        scissors_button.addEventListener("click", function () {
            player = compareChoices("scissors");
            console.log("you chose Scissors");
        });
    }
    
    main();
    
    function playerPoint(point) {
        userScorePath.innerHTML = point;
        console.log(point);
    }
    
    function computerPoint(point) {
        computerScorePath.innerHTML = point;
        console.log(point);
    }
    
    let narrative = (result) => {
        resultNarrative.innerHTML = result;
    };
    
    document.getElementById("rockPic").addEventListener("click", function () {
        console.log("You chose the rock image");
    });
    
    document.getElementById("paperPic").addEventListener("click", function () {
        console.log("You chose the paper image");
    });
    
    document.getElementById("scissorsPic").addEventListener("click", function () {
        console.log("You chose the scissors image");
    });

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="RPS_Style.css">
<title>Rock Paper Scissor Game</title>
<h1>Welcome to the Classic Game of Rock Paper Scissors</h1>
</head>
<body>

<div class="scoreboard">
    <span class = "score" id="playerScoreLabel">Player Score</span> : 
<span id="playerScore">0</span>
    <br>
    <span class = "score" id="computerScoreLabel">Computer 
Score</span> : <span id="computerScore">0</span>
    
    
</div>     
<h2>Ready to Test Your Luck? Choose an option below!</h2>
<div class="choices">
    <button id="rock">Rock</button>
    <button id="paper">Paper</button>
    <button id="scissors">Scissors</button>

    <div class="images">
        <img src="Rock Image.png" id = "rockPic" alt="picture of 
rock"/>
        <img src="Paper Image.png" id = "paperPic" alt="picture of 
 paper"/>
        <img src="Scissors Image.png" id = "scissorsPic" alt="picture 
of scissors"/>
    </div>

    <p id="resultNarrative">The player chose rock and the computer 
chose scissors. Player wins!</p>

</div>
<script src="AppRockPaperScissor.js"></script>
</body>
</html>

Answer 1

playerPoint(playerScore++)将playerScore的 current 值传递给playerPoint()函数，然后递增。您想增加值之前并将其传递给playerPoint()：

playerPoint(++playerScore)

与computerPoint()函数相同。

post increment vs pre increment - Javascript Optimization

Answer 2

基于@kmoser回答代码应该是这样的。 附言：我还编辑了您的代码，以修复某些串联格式，但我错误地使用了templatestrings

const totalChoices = ["rock", "paper", "scissors"];

let rock_button = document.getElementById("rock");
let paper_button = document.getElementById("paper");
let scissors_button = document.getElementById("scissors");
let resultNarrative = document.getElementById("resultNarrative");
let userScorePath = document.getElementById("playerScore");
let computerScorePath = document.getElementById("computerScore");
let playerScore = 0;
let computerScore = 0;

const compareChoices = (player) => {
    let randomNum = Math.floor(Math.random() * 3);
    let computerChoice = totalChoices[randomNum];
    console.log(computerChoice);
    console.log(player);
    if (computerChoice === totalChoices[0]) {
        if (player === totalChoices[1]) {
            narrative(`The Player wins! The computer chose ${totalChoices[0]}  
                        and the player chose ${totalChoices[1]}`);
            playerPoint(++playerScore);
            console.log(playerScore);
        } else if (player === totalChoices[2]) {
            narrative(`The computer wins! The computer chose 
                        ${totalChoices[0]} and the player chose  ${totalChoices[2]}`);

            computerPoint(++computerScore);
            console.log(computerScore);
        }
    }
    if (computerChoice === totalChoices[1]) {
        if (player === totalChoices[2]) {
            narrative(`The Player wins! The computer chose ${totalChoices[1]} 
                        and the player chose ${totalChoices[2]}`);
            playerPoint(++playerScore);
            console.log(playerScore);
        } else if (player === totalChoices[0]) {
            narrative(`The computer wins! The computer chose ${totalChoices[1]} and the player chose ${totalChoices[0]}`);
            computerPoint(++computerScore);
            console.log(computerScore);
        }
    }
    if (computerChoice === totalChoices[2]) {
        if (player === totalChoices[0]) {
            narrative(`The Player wins! The computer chose 
                           ${totalChoices[2]} and the player chose  ${totalChoices[0]}`);
            playerPoint(++playerScore);
            console.log(playerScore);
        } else if (player === totalChoices[1]) {
            narrative(`The computer wins! The computer chose 
                            ${totalChoices[2]} and the player chose  ${totalChoices[1]}`);
            computerPoint(++computerScore);
            console.log(computerScore);
        }
    }
    if (computerChoice === player) {
        narrative(`There is a tie! The computer chose ${computerChoice}  
                        and the player chose ${player}`);
    }
};

function main() {
    rock_button.addEventListener("click", function () {
        player = compareChoices("rock");
        console.log("you chose Rock");
    });
    paper_button.addEventListener("click", function () {
        player = compareChoices("paper");
        console.log("you chose Paper");
    });
    scissors_button.addEventListener("click", function () {
        player = compareChoices("scissors");
        console.log("you chose Scissors");
    });
}

main();

function playerPoint(point) {
    userScorePath.innerHTML = point;
    console.log(point);
}

function computerPoint(point) {
    computerScorePath.innerHTML = point;
    console.log(point);
}

let narrative = (result) => {
    resultNarrative.innerHTML = result;
};

document.getElementById("rockPic").addEventListener("click", function () {
    console.log("You chose the rock image");
});

document.getElementById("paperPic").addEventListener("click", function () {
    console.log("You chose the paper image");
});

document.getElementById("scissorsPic").addEventListener("click", function () {
    console.log("You chose the scissors image");
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="RPS_Style.css">
<title>Rock Paper Scissor Game</title>
<h1>Welcome to the Classic Game of Rock Paper Scissors</h1>
</head>
<body>

<div class="scoreboard">
    <span class = "score" id="playerScoreLabel">Player Score</span> : 
<span id="playerScore">0</span>
    <br>
    <span class = "score" id="computerScoreLabel">Computer 
Score</span> : <span id="computerScore">0</span>
    
    
</div>     
<h2>Ready to Test Your Luck? Choose an option below!</h2>
<div class="choices">
    <button id="rock">Rock</button>
    <button id="paper">Paper</button>
    <button id="scissors">Scissors</button>

    <div class="images">
        <img src="Rock Image.png" id = "rockPic" alt="picture of 
rock"/>
        <img src="Paper Image.png" id = "paperPic" alt="picture of 
 paper"/>
        <img src="Scissors Image.png" id = "scissorsPic" alt="picture 
of scissors"/>
    </div>

    <p id="resultNarrative">The player chose rock and the computer 
chose scissors. Player wins!</p>

</div>
<script src="AppRockPaperScissor.js"></script>
</body>
</html>