Question 418678 in Html Question posted in
Some basic documentation can be found here.

Html – 2 player rock, paper, scissors game

I am very new to JavaScript and HTML. I am trying to get a 2 player rock, paper, scissors game where the first player chooses an option and then afterwards the second player will choose an option. I am having troubles linking the player1 and player2 together to enable me to use if and else statements effectively. I am not sure if I am using functions correctly either.

This is what I’ve done so far…

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", intial-scale="1.0"/>
<title> Two Player Rock, Paper, Scissors</title>    
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>2 Player Rock, Paper, Scissors</h1>
<div id="playerChoose">Player 1 Please Choose: </div>
<div class="player1Choices">
    <button id="rock" onclick="playGame('Rock')">👊</button>
    <button id="paper" onclick="playGame('Paper')">✋</button>
    <button id="scissors" onclick="playGame('Scissors')">✌</button>
  </div>

<div id=player2Choose>Player 2 Please Choose: </div>
  <div class="player2Choices">
    <button id="rock2" onclick="play2Game('Rock')">👊</button>
    <button id="paper2" onclick="play2Game('Paper')">✋</button>
    <button id="scissors2" onclick="play2Game('Scissors')">✌</button>
  </div>

<div id="player1Display">Player 1: </div> 
<div id="player2Display">Player 2: </div>

<div id="resultsDisplay"</div>

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

JavaScript

let player1Display = document.getElementById("player1Display");
let player2Display = document.getElementById("player2Display");


function playGame(player1Choice){
     player1Display.textContent = (`Player 1: ${player1Choice}`);          
}

function play2Game(player2Choice){
    player2Display.textContent = (`Player 2: ${player2Choice}`);
          
}
Tags:

2

Answers


  1. 0

    One issue is within your html file:

    <div id="resultsDisplay"</div>

    you have not closed the opening tag.

    The other issue that when you get the choices of the player, you will not be able to access them outside the function and so you will not be able to get the winner. I have the following code for your index.html:

    et player1Display = document.getElementById("player1Display");
let player2Display = document.getElementById("player2Display");
let resultsDisplay = document.getElementById("resultsDisplay");

// Variables to store player choices
let player1Choice = null;
let player2Choice = null;

// Function for Player 1
function playGame(choice) {
    player1Choice = choice; // Store Player 1's choice
    player1Display.textContent = `Player 1: ${choice}`;
    resultsDisplay.textContent = "Waiting for Player 2...";
}

// Function for Player 2
function play2Game(choice) {
    if (!player1Choice) {
        resultsDisplay.textContent = "Player 1 must choose first!";
        return;
    }

    player2Choice = choice; // Store Player 2's choice
    player2Display.textContent = `Player 2: ${choice}`;
    
    // Determine the winner
    determineWinner();
}

// Function to determine the winner
function determineWinner() {
    if (player1Choice === player2Choice) {
        resultsDisplay.textContent = "It's a tie!";
    } else if (
        (player1Choice === "Rock" && player2Choice === "Scissors") ||
        (player1Choice === "Paper" && player2Choice === "Rock") ||
        (player1Choice === "Scissors" && player2Choice === "Paper")
    ) {
        resultsDisplay.textContent = "Player 1 Wins!";
    } else {
        resultsDisplay.textContent = "Player 2 Wins!";
    }

    // Reset choices for a new game
    player1Choice = null;
    player2Choice = null;
}
    Login or Signup to reply.
  2. 0

    You can use a global variable result to store the result.

    let player1Display = document.getElementById("player1Display");
let player2Display = document.getElementById("player2Display");
var result = {
    p1: "",
    p2: ""
}
function playGame(player, playerChoice){
    result[player] = playerChoice;
    //// Notify that one layer has chosen, it's the other's turn
    player === "p1" ? player1Display.textContent = "Player 1: Selected" : player2Display.textContent = "Player 2: Selected";
    ///Show the result if both players finished their turns
    if (result.p1 !== ""  && result.p2 !== "") {
        player1Display.textContent = (`Player 1: ${result.p1}`);
        player2Display.textContent = (`Player 2: ${result.p2}`); 

        //// TODO: algorithm for evaluating results here - result.p1 result.p2

    }
}

document.getElementById("btnReset").onclick = function resetResult() {
  result = {
      p1: "",
      p2: ""
  }
  player1Display.textContent = (`Player 1:`);
  player2Display.textContent = (`Player 2:`); 
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", intial-scale="1.0"/>
<title> Two Player Rock, Paper, Scissors</title>    
<link href="style.css" rel="stylesheet">
</head>
  <body>
    <h1>2 Player Rock, Paper, Scissors</h1>
    <div id="playerChoose">Player 1 Please Choose: </div>
    <div class="player1Choices">
        <button id="rock" onclick="playGame('p1', 'Rock')">👊</button>
        <button id="paper" onclick="playGame('p1', 'Paper')">✋</button>
        <button id="scissors" onclick="playGame('p1', 'Scissors')">✌</button>
      </div>

    <div id=player2Choose>Player 2 Please Choose: </div>
      <div class="player2Choices">
        <button id="rock2" onclick="playGame('p2', 'Rock')">👊</button>
        <button id="paper2" onclick="playGame('p2', 'Paper')">✋</button>
        <button id="scissors2" onclick="playGame('p2', 'Scissors')">✌</button>
      </div>

    <div id="player1Display">Player 1: </div> 
    <div id="player2Display">Player 2: </div>

    <div id="resultsDisplay"></div>
    <button id="btnReset">Reset</button>

  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search