Click here to Skip to main content
15,881,424 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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>

    <script src="script.js" ></script>

</body>
</html>


CSS:

:root{ /* using this the css will apply to the entire application*/
    --hue: 200;/*represent custom properties that contain a value that can be used in other declarations using the var() function.*/
    --saturation: 70%;
    --text-color: hsl(var(--hue), var(--saturation), 95%);/* The hsl() function define colors using the Hue-saturation-lightness model (HSL). it has three variables hue, saturation, and lightness. */
    --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;/*The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.*/
    justify-content: center;/*justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.*/
    font-weight: bold;
    font-size: 7vh;
    color: var(--text-color);
}

.score > *{ /* this allows to select everything inside of score*/
    flex-grow: 1; /*The flex-grow property specifies how much the item will grow compared to others item inside that container.*/
    flex-basis: 0; /*The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .*/
    padding: 0 2vh; /* 0 is for tp and bottom and 2vh is for left and right*/
    margin: 1vh 0;
    opacity: 5; /* this sets the clarity*/
}

.score > :first-child{
    text-align: right;
    border-right: .5vh solid var(--text-color);

}

.players{
    display: flex;/*The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.*/
    justify-content: center;/*justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.*/
    font-weight: bold;
    font-size: 7vh;
    color: var(--text-color);
}

.players > *{ /* this allows to select everything inside of score*/
    flex-grow: 1; /*The flex-grow property specifies how much the item will grow compared to others item inside that container.*/
    flex-basis: 0; /*The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .*/
    padding: 0 50vh; /* 0 is for tp and bottom and 2vh is for left and right*/
    margin: 1vh 0;
    opacity: 5; /* this sets the clarity*/
}

.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;
}


js:

const rockPlayer = document.getElementById("rock");
const computerRock = document.getElementById("rock-computer");

const paper = document.getElementById("paper");
const computerPaper = document.getElementById("paper-computer");

const scissors = document.getElementById("scissors");
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");

function showPRock(){
    if(rockPlayer.style.dsplay === "none"){
        rock.style.display = "block";
    } else{
        rockPlayer.style.display = "none";
    };
};


What I have tried:

i tried many ways to do this but, none of them worked. i made an alert to make sure that the js code is working, and it worked, but not the rest of the code.
Posted
Updated 20-Jul-23 2:24am
v3
Comments
CHill60 20-Jul-23 7:49am    
"but it isn't working"/"none of them worked" is the least useful way of describing a problem. What exactly is happening that you were not expecting or is not happening that you hoped would.
Hamza Ayub 20-Jul-23 7:57am    
thanks, but do you know how to help me? because it is important
Andre Oosthuizen 20-Jul-23 8:02am    
Read the vomment from Chill60 properly - Quote:What exactly is happening that you were not expecting or is not happening that you hoped would.

What is not working? For starters you have not shown any functions for 'showPPaper' and for 'showPScissors' which will error as undefined.
Hamza Ayub 20-Jul-23 8:06am    
oh ok ok thank you it works now
CHill60 20-Jul-23 8:11am    
If you want us to see your replies then you have to use the "Reply" link. Until you actually tell us what the problem is then we cannot help you.

1 solution

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 -
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 -
CSS
:root{ /* using this the css will apply to the entire application*/
    --hue: 200;/*represent custom properties that contain a value that can be used in other declarations using the var() function.*/
    --saturation: 70%;
    --text-color: hsl(var(--hue), var(--saturation), 95%);/* The hsl() function define colors using the Hue-saturation-lightness model (HSL). it has three variables hue, saturation, and lightness. */
    --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;/*The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.*/
    justify-content: center;/*justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.*/
    font-weight: bold;
    font-size: 7vh;
    color: var(--text-color);
}

.score > *{ /* this allows to select everything inside of score*/
    flex-grow: 1; /*The flex-grow property specifies how much the item will grow compared to others item inside that container.*/
    flex-basis: 0; /*The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .*/
    padding: 0 2vh; /* 0 is for tp and bottom and 2vh is for left and right*/
    margin: 1vh 0;
    opacity: 5; /* this sets the clarity*/
}

.score > :first-child{
    text-align: right;
    border-right: .5vh solid var(--text-color);

}

.players{
    display: flex;/*The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.*/
    justify-content: center;/*justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.*/
    font-weight: bold;
    font-size: 7vh;
    color: var(--text-color);
}

.players > *{ /* this allows to select everything inside of score*/
    flex-grow: 1; /*The flex-grow property specifies how much the item will grow compared to others item inside that container.*/
    flex-basis: 0; /*The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .*/
    padding: 0 50vh; /* 0 is for tp and bottom and 2vh is for left and right*/
    margin: 1vh 0;
    opacity: 5; /* this sets the clarity*/
}

.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 -
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) {
    // It's a tie
    return;
  } else if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "paper" && computerSelection === "rock") ||
    (playerSelection === "scissors" && computerSelection === "paper")
  ) {
    // Player wins the round
    playerScore++;
  } else {
    // Computer wins the round
    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";
    }
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900