javascript - Javascript石头剪刀布游戏的问题

Question

我是 JavaScript 的初学者，正在编写经典的石头剪刀布游戏，目前遇到一个问题。玩家和电脑第一次获胜时，分数似乎没有更新。只有玩家和计算机第二次获胜时，得分才会在记分牌上加分。换句话说，电脑或玩家的分数总是落后 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>

标签： javascripthtml

Answer 1

playerPoint(playerScore++)将 的当前值传递playerScore给playerPoint()函数，然后将其递增。您希望在将值传递给之前playerPoint()增加值：

playerPoint(++playerScore)

功能也一样computerPoint()。

后增量与前增量 - Javascript 优化