Javascript 剪刀石头布游戏的问题

Question

I am a beginner in JavaScript and writing the classic Rock Paper Scissors game and having one issue at the moment.我是 JavaScript 的初学者，正在编写经典的石头剪刀布游戏，目前遇到一个问题。 The scores don't seem to update the first time both the player and computer win.第一次玩家和计算机获胜时，分数似乎不会更新。 Only the second time the player and computer win does the score add a point to the scoreboard.只有当玩家和计算机第二次获胜时，得分才会在记分板上增加一分。 In other words, the points of either the computer or player are always 1 point behind.换句话说，无论是电脑还是玩家的积分总是落后1分。 Appreciate the help in understanding why this is happening.感谢帮助理解为什么会发生这种情况。

Here is my JS/HTML code:这是我的 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++) passes the current value of playerScore to the playerPoint() function, then increments it afterwards. playerPoint(playerScore++)将playerPoint(playerScore++)的当前值playerScore给playerPoint()函数，然后将其递增。 You want to increment the value before passing it to playerPoint() :您想在将值传递给playerPoint()之前增加该值：

playerPoint(++playerScore)

Same thing for the computerPoint() function. computerPoint()函数也是如此。

post increment vs pre increment - Javascript Optimization 后增量与前增量 - Javascript优化

Answer 2

Taking base on @kmoser answer the code should be like this.以@kmoser 回答为基础，代码应该是这样的。 Ps: I also edited your code to fix some formats the concatenation were done wrongly I used templatestrings instead Ps：我还编辑了您的代码以修复某些格式连接错误我使用模板字符串代替

 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>

Javascript 剪刀石头布游戏的问题

问题描述

2 个解决方案

解决方案1
1 2020-08-27 23:35:48

解决方案2
0 2020-08-27 23:41:21

Javascript 剪刀石头布游戏的问题

问题描述

2 个解决方案

解决方案1 1 2020-08-27 23:35:48

解决方案2 0 2020-08-27 23:41:21

解决方案1
1 2020-08-27 23:35:48

解决方案2
0 2020-08-27 23:41:21