【发布时间】：2020-08-27 23:20:23
【问题描述】：
我是一名 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>【问题讨论】：
-
当我尝试格式化代码时，JavaScript 缺少右括号。这是您需要修复的第一件事，因为此代码甚至无法运行。
标签： javascript html