我的石头剪刀布应用有什么问题？
What is wrong with my Rock Paper Scissors app?
由于我正在学习 DOM，所以我一直在尝试将旧的 JavaScript 学习项目转变为棘手的 Web 应用程序。我已经有一段时间没有写这样的基本 JavaScript 脚本了，所以我很可能在这里遗漏了一些明显的东西，但是我的程序输出了我的游戏算法的最后一行，而不管用户的选择如何 ('Rock beats scissors. You lose.' ), 计算机分数以三个为增量更新。这显然不是我想要的。
我相信输出应该是什么是相当直观的，但我在我的 JavaScript 文件中包含了注释以突出显示所需的输出（游戏应遵循剪刀石头布的常规规则）。如果界面看起来混乱，我深表歉意，我将其设计为 15.6" 屏幕规格，尚未制定跨用户功能。
//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard")
/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
// Rock is 0; Paper is 1; Scissors is 2.
let choice = Math.floor(Math.random() * 3);
return choice;
};
/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;
/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
const game = () => {
let playerChoice;
let computerChoice = getComputerChoice();
if (playerChoice === computerChoice) {
gameResults.innerHTML = 'You tied!';
playerScore++;
computerScore++;
}
if (playerChoice === rock && computerChoice === 2) {
gameResults.innerHTML = 'Rock beats scissors. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Paper covers rock. You lose.'
computerScore++;
}
if (playerChoice === paper && computerChoice === 0) {
gameResults.innerHTML = 'Paper covers rock. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Scissors cuts paper. You lose.'
computerScore++;
}
if (playerChoice === scissors && computerChoice === 1) {
gameResults.innerHTML = 'Scissors cuts paper. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Rock beats scissors. You lose.'
computerScore++;
}
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};
//Event listeners
rock.addEventListener("click", game);
paper.addEventListener("click", game);
scissors.addEventListener("click", game);
body {
background-image: url("pexels-pixabay-326311.jpg");
}
p {
color: white;
text-align: center;
}
#gameHeader {
font-family: 'Shizuru', cursive, serif, sans-serif;
font-size: 75px;
border: 3px solid white;
padding-bottom: 20px;
margin-left: 350px;
margin-right: 350px;
}
#gameResults {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 50px;
}
#scoreboard {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 20px;
background-color: black;
margin-left: 600px;
margin-right: 600px;
border: 2px solid white;
border-radius: 50px;
padding: 5px;
}
.results {
position: relative;
top: 100px;
}
label {
font-family: 'Roboto Mono', sans-serif, serif;
font-size: 25px;
color: white;
}
.labels {
display: inline-flexbox;
margin-top: 20px;
}
#rockLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 520px;
background-color: black;
}
#paperLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 722px;
background-color: black;
}
#scissorsLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 915px;
background-color: black;
}
#rock {
background-image: url("Rock.jpeg");
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
#paper {
background-image: url("Papers.jpg");
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
margin-left: 100px;
margin-right: 100px;
}
#scissors {
background-image: url("Scissors.jpg");
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="Rock-Paper-Scissors.css">
<script src="Rock-Paper-Scissors.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marko+One&family=Orbitron&family=Roboto+Mono:wght@100&family=Rowdies:wght@300&family=Saira+Condensed:wght@100&family=Shizuru&family=Supermercado+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<p id="gameHeader">Rock Paper Scissors</p>
</header>
<div class="buttons">
<center>
<button id="rock"></button>
<button id="paper"></button>
<button id="scissors"></button>
</center>
</div>
<div class="labels">
<label for="rock" id="rockLabel">Rock</label>
<label for="paper" id="paperLabel">Paper</label>
<label for="scissors" id="scissorsLabel">Scissors</label>
</div>
<div class="results">
<p id="gameResults">Try your luck!</p>
<p id="scoreboard">Player: 0 | Computer: 0</p>
</div>
</body>
</html>
您的 game() 函数中的逻辑略有偏差。即如果要使用else条件，需要嵌套，否则每次不满足主条件就执行
此外，对于结果并列的情况，您似乎正在将 playerChoice 的未定义值与 computerChoice[ 的整数值进行比较=27=]。我已经注释掉这一行并修改了您的事件侦听器以将 pcValue（0、1 或 2）传递给您的方法。
往下看
const game = (playerChoice, pcValue) => {
// let playerChoice;
let computerChoice = getComputerChoice();
if(pcValue === computerChoice) {
gameResults.innerHTML = 'You tied!';
playerScore++;
computerScore++;
} else {
if(playerChoice === rock) {
if(computerChoice === 2) {
gameResults.innerHTML = 'Rock beats scissors. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Paper covers rock. You lose.'
computerScore++;
}
}
if(playerChoice === paper) {
if(computerChoice === 0) {
gameResults.innerHTML = 'Paper covers rock. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Scissors cuts paper. You lose.'
computerScore++;
}
}
if(playerChoice === scissors) {
if(computerChoice === 1) {
gameResults.innerHTML = 'Scissors cuts paper. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Rock beats scissors. You lose.'
computerScore++;
}
}
}
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};
我还修改了您的事件侦听器，以便您的按钮点击将点击的元素和一个值传递给游戏函数，然后可用于跟踪得分。
//Event listeners
rock.addEventListener("click", evt => game(rock, 0));
paper.addEventListener("click", evt => game(paper, 1));
scissors.addEventListener("click", evt => game(scissors, 2));
现在应该可以了。
您需要添加玩家选择。
在HTML代码中
<button data-choice="0" id="rock"></button>
<button data-choice="1" id="paper"></button>
<button data-choice="2" id="scissors"></button>
在游戏功能中
const game = (event) => {
let playerChoice = event.currentTarget.dataset.choice;
让我们减少大量重复逻辑并在按钮组上使用单个事件侦听器，然后利用事件委托。
最重要的是，为玩家选择赋值
//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard");
/*Set up a matirx of results */
let gameMatrix = {
"rock": {
"defeats": "scissors",
"action": "smashes"
},
"paper": {
"defeats": "rock",
"action": "covers"
},
"scissors": {
"defeats": "paper",
"action": "cuts"
}
};
/*Computer options*/
let computerChoices = ["rock", "paper", "scissors"];
/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
// Rock is 0; Paper is 1; Scissors is 2.
let choice = Math.floor(Math.random() * 3);
//Get actual name to use as a key
return computerChoices[choice];
}
/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;
/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
/*Use event delegation from button group*/
const game = (event) => {
//Check it's a button
if (event.target.matches("button")) {
//get player choince from id
let playerChoice = event.target.id;
let computerChoice = getComputerChoice();
let result;
console.log(`C: ${computerChoice}, P: ${playerChoice}`);
//Check for a tie
if (playerChoice === computerChoice) {
result = 'You tied!';
playerScore++;
computerScore++;
//From the matrix, check if player defets computer choice
} else if (gameMatrix[playerChoice].defeats === computerChoice) {
playerScore++;
//Set the result using the action from the matrix
result = `You win, ${playerChoice} ${gameMatrix[playerChoice].action} ${computerChoice}`;
} else {
computerScore++;
//Set the result usig the action from the matrix but using the computer choice instead
result = `You lose, ${computerChoice} ${gameMatrix[computerChoice].action} ${playerChoice}`;
}
console.log(result);
gameResults.innerHTML = result;
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
}
};
//Event listeners- sust to the group holding the button
document.querySelector(".buttons").addEventListener("click", game);
body {
background-image: url("pexels-pixabay-326311.jpg");
}
p {
color: white;
text-align: center;
}
#gameHeader {
font-family: 'Shizuru', cursive, serif, sans-serif;
font-size: 75px;
border: 3px solid white;
padding-bottom: 20px;
margin-left: 350px;
margin-right: 350px;
}
#gameResults {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 50px;
background-color: #EEE;
}
#scoreboard {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 20px;
background-color: black;
margin-left: 600px;
margin-right: 600px;
border: 2px solid white;
border-radius: 50px;
padding: 5px;
}
.results {
position: relative;
top: 100px;
}
label {
font-family: 'Roboto Mono', sans-serif, serif;
font-size: 25px;
color: white;
}
.labels {
display: inline-flexbox;
margin-top: 20px;
}
/*Set a standard class for the labels*/
.labels label{
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 520px;
background-color: black;
}
/*Now just set what is needed*/
#rockLabel {
left: 520px;
}
#paperLabel {
left: 722px;
}
#scissorsLabel {
left: 915px;
}
/*Set a standard class for the buttons*/
.buttons button{
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
/*Now just set what is needed*/
#rock {
background-image: url("Rock.jpeg");
}
#paper {
background-image: url("Papers.jpg");
margin-left: 100px;
margin-right: 100px;
}
#scissors {
background-image: url("Scissors.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="Rock-Paper-Scissors.css">
<script src="Rock-Paper-Scissors.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marko+One&family=Orbitron&family=Roboto+Mono:wght@100&family=Rowdies:wght@300&family=Saira+Condensed:wght@100&family=Shizuru&family=Supermercado+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<p id="gameHeader">Rock Paper Scissors</p>
</header>
<div class="buttons">
<center>
<button id="rock"></button>
<button id="paper"></button>
<button id="scissors"></button>
</center>
</div>
<div class="labels">
<label for="rock" id="rockLabel">Rock</label>
<label for="paper" id="paperLabel">Paper</label>
<label for="scissors" id="scissorsLabel">Scissors</label>
</div>
<div class="results">
<p id="gameResults">Try your luck!</p>
<p id="scoreboard">Player: 0 | Computer: 0</p>
</div>
</body>
</html>
由于我正在学习 DOM，所以我一直在尝试将旧的 JavaScript 学习项目转变为棘手的 Web 应用程序。我已经有一段时间没有写这样的基本 JavaScript 脚本了，所以我很可能在这里遗漏了一些明显的东西，但是我的程序输出了我的游戏算法的最后一行，而不管用户的选择如何 ('Rock beats scissors. You lose.' ), 计算机分数以三个为增量更新。这显然不是我想要的。
我相信输出应该是什么是相当直观的，但我在我的 JavaScript 文件中包含了注释以突出显示所需的输出（游戏应遵循剪刀石头布的常规规则）。如果界面看起来混乱，我深表歉意，我将其设计为 15.6" 屏幕规格，尚未制定跨用户功能。
//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard")
/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
// Rock is 0; Paper is 1; Scissors is 2.
let choice = Math.floor(Math.random() * 3);
return choice;
};
/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;
/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
const game = () => {
let playerChoice;
let computerChoice = getComputerChoice();
if (playerChoice === computerChoice) {
gameResults.innerHTML = 'You tied!';
playerScore++;
computerScore++;
}
if (playerChoice === rock && computerChoice === 2) {
gameResults.innerHTML = 'Rock beats scissors. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Paper covers rock. You lose.'
computerScore++;
}
if (playerChoice === paper && computerChoice === 0) {
gameResults.innerHTML = 'Paper covers rock. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Scissors cuts paper. You lose.'
computerScore++;
}
if (playerChoice === scissors && computerChoice === 1) {
gameResults.innerHTML = 'Scissors cuts paper. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Rock beats scissors. You lose.'
computerScore++;
}
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};
//Event listeners
rock.addEventListener("click", game);
paper.addEventListener("click", game);
scissors.addEventListener("click", game);
body {
background-image: url("pexels-pixabay-326311.jpg");
}
p {
color: white;
text-align: center;
}
#gameHeader {
font-family: 'Shizuru', cursive, serif, sans-serif;
font-size: 75px;
border: 3px solid white;
padding-bottom: 20px;
margin-left: 350px;
margin-right: 350px;
}
#gameResults {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 50px;
}
#scoreboard {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 20px;
background-color: black;
margin-left: 600px;
margin-right: 600px;
border: 2px solid white;
border-radius: 50px;
padding: 5px;
}
.results {
position: relative;
top: 100px;
}
label {
font-family: 'Roboto Mono', sans-serif, serif;
font-size: 25px;
color: white;
}
.labels {
display: inline-flexbox;
margin-top: 20px;
}
#rockLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 520px;
background-color: black;
}
#paperLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 722px;
background-color: black;
}
#scissorsLabel {
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 915px;
background-color: black;
}
#rock {
background-image: url("Rock.jpeg");
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
#paper {
background-image: url("Papers.jpg");
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
margin-left: 100px;
margin-right: 100px;
}
#scissors {
background-image: url("Scissors.jpg");
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="Rock-Paper-Scissors.css">
<script src="Rock-Paper-Scissors.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marko+One&family=Orbitron&family=Roboto+Mono:wght@100&family=Rowdies:wght@300&family=Saira+Condensed:wght@100&family=Shizuru&family=Supermercado+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<p id="gameHeader">Rock Paper Scissors</p>
</header>
<div class="buttons">
<center>
<button id="rock"></button>
<button id="paper"></button>
<button id="scissors"></button>
</center>
</div>
<div class="labels">
<label for="rock" id="rockLabel">Rock</label>
<label for="paper" id="paperLabel">Paper</label>
<label for="scissors" id="scissorsLabel">Scissors</label>
</div>
<div class="results">
<p id="gameResults">Try your luck!</p>
<p id="scoreboard">Player: 0 | Computer: 0</p>
</div>
</body>
</html>
您的 game() 函数中的逻辑略有偏差。即如果要使用else条件，需要嵌套，否则每次不满足主条件就执行
此外，对于结果并列的情况，您似乎正在将 playerChoice 的未定义值与 computerChoice[ 的整数值进行比较=27=]。我已经注释掉这一行并修改了您的事件侦听器以将 pcValue（0、1 或 2）传递给您的方法。
往下看
const game = (playerChoice, pcValue) => {
// let playerChoice;
let computerChoice = getComputerChoice();
if(pcValue === computerChoice) {
gameResults.innerHTML = 'You tied!';
playerScore++;
computerScore++;
} else {
if(playerChoice === rock) {
if(computerChoice === 2) {
gameResults.innerHTML = 'Rock beats scissors. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Paper covers rock. You lose.'
computerScore++;
}
}
if(playerChoice === paper) {
if(computerChoice === 0) {
gameResults.innerHTML = 'Paper covers rock. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Scissors cuts paper. You lose.'
computerScore++;
}
}
if(playerChoice === scissors) {
if(computerChoice === 1) {
gameResults.innerHTML = 'Scissors cuts paper. You win!'
playerScore++;
} else {
gameResults.innerHTML = 'Rock beats scissors. You lose.'
computerScore++;
}
}
}
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};
我还修改了您的事件侦听器，以便您的按钮点击将点击的元素和一个值传递给游戏函数，然后可用于跟踪得分。
//Event listeners
rock.addEventListener("click", evt => game(rock, 0));
paper.addEventListener("click", evt => game(paper, 1));
scissors.addEventListener("click", evt => game(scissors, 2));
现在应该可以了。
您需要添加玩家选择。
在HTML代码中
<button data-choice="0" id="rock"></button>
<button data-choice="1" id="paper"></button>
<button data-choice="2" id="scissors"></button>
在游戏功能中
const game = (event) => {
let playerChoice = event.currentTarget.dataset.choice;
让我们减少大量重复逻辑并在按钮组上使用单个事件侦听器，然后利用事件委托。
最重要的是，为玩家选择赋值
//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard");
/*Set up a matirx of results */
let gameMatrix = {
"rock": {
"defeats": "scissors",
"action": "smashes"
},
"paper": {
"defeats": "rock",
"action": "covers"
},
"scissors": {
"defeats": "paper",
"action": "cuts"
}
};
/*Computer options*/
let computerChoices = ["rock", "paper", "scissors"];
/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
// Rock is 0; Paper is 1; Scissors is 2.
let choice = Math.floor(Math.random() * 3);
//Get actual name to use as a key
return computerChoices[choice];
}
/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;
/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
/*Use event delegation from button group*/
const game = (event) => {
//Check it's a button
if (event.target.matches("button")) {
//get player choince from id
let playerChoice = event.target.id;
let computerChoice = getComputerChoice();
let result;
console.log(`C: ${computerChoice}, P: ${playerChoice}`);
//Check for a tie
if (playerChoice === computerChoice) {
result = 'You tied!';
playerScore++;
computerScore++;
//From the matrix, check if player defets computer choice
} else if (gameMatrix[playerChoice].defeats === computerChoice) {
playerScore++;
//Set the result using the action from the matrix
result = `You win, ${playerChoice} ${gameMatrix[playerChoice].action} ${computerChoice}`;
} else {
computerScore++;
//Set the result usig the action from the matrix but using the computer choice instead
result = `You lose, ${computerChoice} ${gameMatrix[computerChoice].action} ${playerChoice}`;
}
console.log(result);
gameResults.innerHTML = result;
scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
}
};
//Event listeners- sust to the group holding the button
document.querySelector(".buttons").addEventListener("click", game);
body {
background-image: url("pexels-pixabay-326311.jpg");
}
p {
color: white;
text-align: center;
}
#gameHeader {
font-family: 'Shizuru', cursive, serif, sans-serif;
font-size: 75px;
border: 3px solid white;
padding-bottom: 20px;
margin-left: 350px;
margin-right: 350px;
}
#gameResults {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 50px;
background-color: #EEE;
}
#scoreboard {
font-family: 'Rowdies', cursive, serif, sans-serif;
font-size: 20px;
background-color: black;
margin-left: 600px;
margin-right: 600px;
border: 2px solid white;
border-radius: 50px;
padding: 5px;
}
.results {
position: relative;
top: 100px;
}
label {
font-family: 'Roboto Mono', sans-serif, serif;
font-size: 25px;
color: white;
}
.labels {
display: inline-flexbox;
margin-top: 20px;
}
/*Set a standard class for the labels*/
.labels label{
border: 2px solid white;
border-radius: 10px;
padding: 5px;
position: fixed;
left: 520px;
background-color: black;
}
/*Now just set what is needed*/
#rockLabel {
left: 520px;
}
#paperLabel {
left: 722px;
}
#scissorsLabel {
left: 915px;
}
/*Set a standard class for the buttons*/
.buttons button{
background-color: white;
background-position: center;
background-size: contain;
padding: 50px;
border: 3px solid black;
border-radius: 50px;
}
/*Now just set what is needed*/
#rock {
background-image: url("Rock.jpeg");
}
#paper {
background-image: url("Papers.jpg");
margin-left: 100px;
margin-right: 100px;
}
#scissors {
background-image: url("Scissors.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="Rock-Paper-Scissors.css">
<script src="Rock-Paper-Scissors.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marko+One&family=Orbitron&family=Roboto+Mono:wght@100&family=Rowdies:wght@300&family=Saira+Condensed:wght@100&family=Shizuru&family=Supermercado+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<p id="gameHeader">Rock Paper Scissors</p>
</header>
<div class="buttons">
<center>
<button id="rock"></button>
<button id="paper"></button>
<button id="scissors"></button>
</center>
</div>
<div class="labels">
<label for="rock" id="rockLabel">Rock</label>
<label for="paper" id="paperLabel">Paper</label>
<label for="scissors" id="scissorsLabel">Scissors</label>
</div>
<div class="results">
<p id="gameResults">Try your luck!</p>
<p id="scoreboard">Player: 0 | Computer: 0</p>
</div>
</body>
</html>