Im trying to make a rock paper scissors game and the player chooses by pressing a button but it isnt what I expected. Thanks

Question

1.00/5 (1 vote)

See more:

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 20-Jul-23 1:27am

Hamza Ayub

Updated 20-Jul-23 2:24am

v3

Add a Solution

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.

Andre Oosthuizen 20-Jul-23 8:17am

I'm glad you got it working as I picked up a few errors -
In the JavaScript code, you are trying to access elements with the ID "rockPlayer" and "rock" in the showPRock() function, but in your HTML, the elements have IDs "rockBtn" and "rock."

The IDs "rockPlayer" and "rock" are missing in your HTML. You need to add them to the respective elements.

The variables computerRPS and playerRPS are declared incorrectly as just strings. Instead, you should define them as arrays to hold the options for rock, paper, and scissors.

Your javascript also contains no code to make the "computer" interact when the player clicks on a button, you need to add logic to simulate the computer's choice and then determine the winner of the round.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Accepted Answer · 2023-07-20T02:24:00

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