Normally I will not add a solution to an un-explained question. It just happened to be that I had a working example of a rock, scissor, paper game from before. a Working sample can be seen at my fiddle -
Rock, Paper, Scissor sample[
^]. I used your code to make it easier for you to use with all of the appropriate corrections -
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="styles.css">
<title>Rock, Paper, and Scissors</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<h2 class="games-text">Let The Games Begin !</h2>
<div class="players">
<div id="player-1">Player</div>
<div id="computer">Computer</div>
</div>
<div class="score">
<div id="player-score">0</div>
<div id="computer-score">0</div>
</div>
<div class="playerBtn">
<button type="button" onclick="showPRock()" id="rockBtn">Rock</button>
<button type="button" onclick="showPPaper()" id="paperBtn">Paper</button>
<button type="button" onclick="showPScissors()" id="scissorsBtn">Scissors</button>
</div>
<div class="rps-player">
<img id="rock" src="rock.png" alt="rock" />
<img id="paper" src="paper.png" alt="paper" />
<img id="scissors" src="scissors.png" alt="scissors" />
</div>
<div class="rps-computer">
<img src="rock.png" alt="rock" id="rock-computer"/>
<img src="paper.png" alt="paper" id="paper-computer"/>
<img src="scissors.png" alt="scissors" id="scissors-computer"/>
</div>
<div class="score">
<div id="player-score">0</div>
<div id="computer-score">0</div>
</div>
<script src="script.js" ></script>
</body>
</html>
CSS -
:root{
--hue: 200;
--saturation: 70%;
--text-color: hsl(var(--hue), var(--saturation), 95%);
--background-color: hsl(var(--hue), var(--saturation), 50%);
}
body{
background-color:var(--background-color);
color: var(--text-color);
}
h1{
text-align: center;
}
.games-text{
text-align:center;
font-size:5vh;
}
.score{
display: flex;
justify-content: center;
font-weight: bold;
font-size: 7vh;
color: var(--text-color);
}
.score > *{
flex-grow: 1;
flex-basis: 0;
padding: 0 2vh;
margin: 1vh 0;
opacity: 5;
}
.score > :first-child{
text-align: right;
border-right: .5vh solid var(--text-color);
}
.players{
display: flex;
justify-content: center;
font-weight: bold;
font-size: 7vh;
color: var(--text-color);
}
.players > *{
flex-grow: 1;
flex-basis: 0;
padding: 0 50vh;
margin: 1vh 0;
opacity: 5;
}
.players > :first-child{
text-align: right;
}
.rps-player {
text-align: left;
margin-top: 10%;
}
.rps-computer {
text-align: right;
display: none;
}
.playerBtn > * {
font-size:4vh;
background-color: transparent;
color: var(--text-color);
border-color:var(--text-color);
margin-left: 2vh;
}
JAVASCRIPT -
const rockPlayer = document.getElementById("rock");
const paperPlayer = document.getElementById("paper");
const scissorsPlayer = document.getElementById("scissors");
const computerRock = document.getElementById("rock-computer");
const computerPaper = document.getElementById("paper-computer");
const computerScissors = document.getElementById("scissors-computer");
const ROCKbtn = document.getElementById("rockBtn");
const PAPERbtn = document.getElementById("paperBtn");
const SCISSORSbtn = document.getElementById("scissorsBtn");
const computerRPS = ["rock", "paper", "scissors"];
const playerRPS = ["rock", "paper", "scissors"];
let playerScore = 0;
let computerScore = 0;
function showPRock() {
if (rockPlayer.style.display === "none") {
rockPlayer.style.display = "block";
} else {
rockPlayer.style.display = "none";
}
playRound("rock");
}
function showPPaper() {
if (paperPlayer.style.display === "none") {
paperPlayer.style.display = "block";
} else {
paperPlayer.style.display = "none";
}
playRound("paper");
}
function showPScissors() {
if (scissorsPlayer.style.display === "none") {
scissorsPlayer.style.display = "block";
} else {
scissorsPlayer.style.display = "none";
}
playRound("scissors");
}
function computerChoice() {
const randomIndex = Math.floor(Math.random() * computerRPS.length);
return computerRPS[randomIndex];
}
function playRound(playerSelection) {
const computerSelection = computerChoice();
if (playerSelection === computerSelection) {
return;
} else if (
(playerSelection === "rock" && computerSelection === "scissors") ||
(playerSelection === "paper" && computerSelection === "rock") ||
(playerSelection === "scissors" && computerSelection === "paper")
) {
playerScore++;
} else {
computerScore++;
}
updateScores();
}
function updateScores() {
document.getElementById("player-score").textContent = playerScore;
document.getElementById("computer-score").textContent = computerScore;
}
function showPScissors() {
if (scissorsPlayer.style.display === "none") {
scissorsPlayer.style.display = "block";
} else {
scissorsPlayer.style.display = "none";
}
}