你好，我目前正在重新审视 html/css/javascript 中的剪刀石头布游戏。现在我正在尝试制作一个相应的网站，您可以在其中单击按钮并以这种方式记录您的玩家选择。然后它会开始游戏并打印获胜者、回合等。 .看来玩家选择功能无法正常工作。 playerChoice = this.id 似乎工作正常，但是playerSelection 函数没有控制台记录任何内容。我还想知道是否需要更改任何内容才能将字符串从函数中取出并进行比较（请参阅 playRound 函数）。如果您碰巧知道这方面的情况，请告诉我:)
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="script.js" type="text/javascript"></script>
<title>Rock, Paper, Scissors</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<p>Play against the computer. First to 5 points wins the game!</p>
<h2>Select a Move:</h2>
<div id="Buttons">
<button id="ROCK">ROCK</button>
<button id="PAPER">PAPER</button>
<button id="SCISSORS">SCISSORS</button>
</div>
<p id="roundTxt"></p>
<h2>Scores:</h2>
<ul id="scoresBox">
<h3>Player: </h3>
<div id="SCORES_HUMAN">0</div>
<h3>Computer: </h3>
<div id="SCORES_COMPUTER">0</div>
</ul>
</body>
</html>
这是我的javascript：
document.getElementById("ROCK").onclick = playerSelection;
document.getElementById("PAPER").onclick = playerSelection;
document.getElementById("SCISSORS").onclick = playerSelection;
function getComputerChoice (){
//select Rock Paper or Scissors at random
//return the choice
const PICK = ["Rock", "Paper", "Scissors"];
const random = Math.floor(Math.random() * PICK.length);
return (PICK[random]);
}
function playerSelection() {
//prompt user for their choice
//return the choice
//let playerChoice = prompt("Rock, Paper, or Scissors?");
playerChoice = this.id;
return playerChoice;
}
function game() {
//Scoreboard
let SCORES_HUMAN = 0;
let SCORES_COMPUTER = 0;
//for(let i = 0; i<5; i++) {
playRound();
console.log(playRound(playerSelection(), getComputerChoice()));
//}
if(SCORES_HUMAN > SCORES_COMPUTER) {
console.log("You Win!");
} else if(SCORES_HUMAN < SCORES_COMPUTER) {
console.log("You Lose!");
}
console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);
function playRound(playerSelection, getComputerChoice) {
//compare playerSelection to getComputerChoice
//return the outcome
if (playerSelection === "ROCK" && getComputerChoice === "Scissors") {
SCORES_HUMAN++;
return "You Win! Rock beats Scissors";
} else if (playerSelection === "ROCK" && getComputerChoice === "Paper") {
SCORES_COMPUTER++;
return "You Lose! Paper beats Rock";
} else if (playerSelection === "PAPER" && getComputerChoice === "Rock") {
SCORES_HUMAN++;
return "You Win! Paper beats Rock";
} else if (playerSelection === "PAPER" && getComputerChoice === "Scissors") {
SCORES_COMPUTER++;
return "You Lose! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && getComputerChoice === "Paper") {
SCORES_HUMAN++;
return "You Win! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && getComputerChoice === "Rock") {
SCORES_COMPUTER++;
return "You Lose! Rock beats Scissors";
} else {
return "It's a tie!";
}
}
}
game();
这是我的CSS：
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-left: 50px;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p {
font-size: 18px;
}
button {
border: .3rem solid rgb(255, 0, 0);
border-radius: .5rem;
margin: .75rem;
font-size: 1rem;
font-weight: bold;
padding: .75rem .5rem;
width: 6rem;
text-align: center;
color: white;
background: rgb(89, 89, 89);
text-shadow: 0 0 .5rem rgb(229, 229, 229);
}
button:hover {
cursor: pointer;
}
button:active {
background-color: rgba(92, 92, 92, 0.208);
}
.Buttones {
flex: display;
align-self: center;
}
我感谢我得到的任何帮助，并感谢您的阅读:)
单击石头按钮（或布/剪刀按钮）会将字符串“rock”传递到 playround 函数中，游戏将正确进行。
因为playerSelection函数中的'this'指向函数而不是事件。 将事件参数传递给playerSelection函数
function playerSelection(e) { ... }