Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
Please help me with this I am struggling. I need help replicating the image below. In image 2 and 3, below the grey box it display (Player 1 wins) that what I need help with   JavaScript: // Global variables to keep track of wins and losses let player1Wins = 0; let player2Wins = 0; let ties = 0; function playGame() {     // Generate random numbers for player and computer     const playerChoice = Math.floor(Math.random() * 3) + 1;     const computerChoice = Math.floor(Math.random() * 3) + 1;       // Convert the random numbers to text choices     let playerTextChoice;     let computerTextChoice;     if (playerChoice === 1) {       playerTextChoice = 'ROCK';     } else if (playerChoice === 2) {       playerTextChoice = 'SCISSORS';     } else {       playerTextChoice = 'PAPER';     }     if (computerChoice === 1) {       computerTextChoice = 'ROCK';     } else if (computerChoice === 2) {       computerTextChoice = 'SCISSORS';     } else {       computerTextChoice = 'PAPER';     }       // Update the paragraph with player and computer choices     const myData = document.getElementById('mydata');     myData.innerHTML = `Player 1 plays ${playerTextChoice} and Player 2 plays ${computerTextChoice}`;       // Determine the winner     let winner;     if (playerChoice === computerChoice) {       winner = 'Tie';       ties++;     } else if (playerChoice === 1 && computerChoice === 3) {       winner = 'Player 1 Wins!';       player1Wins++;     } else if (playerChoice === 2 && computerChoice === 1) {       winner = 'Player 1 Wins!';       player1Wins++;     } else if (playerChoice === 3 && computerChoice === 2) {       winner = 'Player 1 Wins!';       player1Wins++;     } else {       winner = 'Player 2 Wins!';       player2Wins++;     }       // Display the winner using an alert if it's not a tie     if (winner !== 'Tie') {       alert(winner);     } else {       alert('Tie!');     }     // Display the tally if (winner === 'Player 1 Wins!') {     alert(`Player 1 Wins: ${player1Wins}`);   } else if (winner === 'Player 2 Wins!') {     alert(`Player 2 Wins: ${player2Wins}`);   } else {     alert(`Ties: ${ties}`);   } } HTML:         Task 5                     Rock, Paper, Scissors                 Play                                   CSS: #box {   border: 3px solid black;   width: 80%;   margin: auto;   text-align: center;   overflow: auto;   padding: 20px; } #mydata {   margin: 20px;   width: 80%;   margin: auto;   background: grey;   height: 60px;   font-family: monospace;   font-size: 2em;   text-align: center;   border: 1px black solid; } Thank you

Please help me with this I am struggling. I need help replicating the image below. In image 2 and 3, below the grey box it display (Player 1 wins) that what I need help with   JavaScript: // Global variables to keep track of wins and losses let player1Wins = 0; let player2Wins = 0; let ties = 0; function playGame() {     // Generate random numbers for player and computer     const playerChoice = Math.floor(Math.random() * 3) + 1;     const computerChoice = Math.floor(Math.random() * 3) + 1;       // Convert the random numbers to text choices     let playerTextChoice;     let computerTextChoice;     if (playerChoice === 1) {       playerTextChoice = 'ROCK';     } else if (playerChoice === 2) {       playerTextChoice = 'SCISSORS';     } else {       playerTextChoice = 'PAPER';     }     if (computerChoice === 1) {       computerTextChoice = 'ROCK';     } else if (computerChoice === 2) {       computerTextChoice = 'SCISSORS';     } else {       computerTextChoice = 'PAPER';     }       // Update the paragraph with player and computer choices     const myData = document.getElementById('mydata');     myData.innerHTML = `Player 1 plays ${playerTextChoice} and Player 2 plays ${computerTextChoice}`;       // Determine the winner     let winner;     if (playerChoice === computerChoice) {       winner = 'Tie';       ties++;     } else if (playerChoice === 1 && computerChoice === 3) {       winner = 'Player 1 Wins!';       player1Wins++;     } else if (playerChoice === 2 && computerChoice === 1) {       winner = 'Player 1 Wins!';       player1Wins++;     } else if (playerChoice === 3 && computerChoice === 2) {       winner = 'Player 1 Wins!';       player1Wins++;     } else {       winner = 'Player 2 Wins!';       player2Wins++;     }       // Display the winner using an alert if it's not a tie     if (winner !== 'Tie') {       alert(winner);     } else {       alert('Tie!');     }     // Display the tally if (winner === 'Player 1 Wins!') {     alert(`Player 1 Wins: ${player1Wins}`);   } else if (winner === 'Player 2 Wins!') {     alert(`Player 2 Wins: ${player2Wins}`);   } else {     alert(`Ties: ${ties}`);   } } HTML:         Task 5                     Rock, Paper, Scissors                 Play                                   CSS: #box {   border: 3px solid black;   width: 80%;   margin: auto;   text-align: center;   overflow: auto;   padding: 20px; } #mydata {   margin: 20px;   width: 80%;   margin: auto;   background: grey;   height: 60px;   font-family: monospace;   font-size: 2em;   text-align: center;   border: 1px black solid; } Thank you

Microsoft Visual C#
Microsoft Visual C#
7th Edition
ISBN:9781337102100
Author:Joyce, Farrell.
Publisher:Joyce, Farrell.
Chapter4: Making Decisions
Section: Chapter Questions
Problem 8E: In the game Rock paper Scissors, two players simultaneously choose one of three options: rock,...
See similar textbooks
icon
Related questions
Question

Please help me with this I am struggling. I need help replicating the image below. In image 2 and 3, below the grey box it display (Player 1 wins) that what I need help with

 

JavaScript:

// Global variables to keep track of wins and losses
let player1Wins = 0;
let player2Wins = 0;
let ties = 0;

function playGame() {
    // Generate random numbers for player and computer
    const playerChoice = Math.floor(Math.random() * 3) + 1;
    const computerChoice = Math.floor(Math.random() * 3) + 1;
 
    // Convert the random numbers to text choices
    let playerTextChoice;
    let computerTextChoice;
    if (playerChoice === 1) {
      playerTextChoice = 'ROCK';
    } else if (playerChoice === 2) {
      playerTextChoice = 'SCISSORS';
    } else {
      playerTextChoice = 'PAPER';
    }
    if (computerChoice === 1) {
      computerTextChoice = 'ROCK';
    } else if (computerChoice === 2) {
      computerTextChoice = 'SCISSORS';
    } else {
      computerTextChoice = 'PAPER';
    }
 
    // Update the paragraph with player and computer choices
    const myData = document.getElementById('mydata');
    myData.innerHTML = `Player 1 plays ${playerTextChoice} and Player 2 plays ${computerTextChoice}`;
 
    // Determine the winner
    let winner;
    if (playerChoice === computerChoice) {
      winner = 'Tie';
      ties++;
    } else if (playerChoice === 1 && computerChoice === 3) {
      winner = 'Player 1 Wins!';
      player1Wins++;
    } else if (playerChoice === 2 && computerChoice === 1) {
      winner = 'Player 1 Wins!';
      player1Wins++;
    } else if (playerChoice === 3 && computerChoice === 2) {
      winner = 'Player 1 Wins!';
      player1Wins++;
    } else {
      winner = 'Player 2 Wins!';
      player2Wins++;
    }
 
    // Display the winner using an alert if it's not a tie
    if (winner !== 'Tie') {
      alert(winner);
    } else {
      alert('Tie!');
    }

    // Display the tally
if (winner === 'Player 1 Wins!') {
    alert(`Player 1 Wins: ${player1Wins}`);
  } else if (winner === 'Player 2 Wins!') {
    alert(`Player 2 Wins: ${player2Wins}`);
  } else {
    alert(`Ties: ${ties}`);
  }
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> Task 5 </title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script src="task5.js"></script>
</head>
<body>
    <div id="box">
        <p style="font-family: monospace;" class="newdata"> Rock, Paper, Scissors </p>
        <p></p>
        <button id="button" onclick="playGame();"> Play </button>
        <p> </p>
        <p id="alert"></p>
        <p style="font-family: monospace;" id="mydata" class="newdata"></p>
    </div>
    <script>
        // Display the tally when the final code is run
        if (winner === 'Player 1 Wins!') {
            alert(`Player 1 Wins: ${player1Wins}`);
        } else if (winner === 'Player 2 Wins!') {
            alert(`Player 2 Wins: ${player2Wins}`);
        } else {
            alert(`Ties: ${ties}`);
        }
    </script>
</body>
</html>
 
CSS:
#box {
  border: 3px solid black;
  width: 80%;
  margin: auto;
  text-align: center;
  overflow: auto;
  padding: 20px;
}

#mydata {
  margin: 20px;
  width: 80%;
  margin: auto;
  background: grey;
  height: 60px;
  font-family: monospace;
  font-size: 2em;
  text-align: center;
  border: 1px black solid;
}
Thank you
Tiel file:// Rock, Paper, Scissors Play When you close the alert, you should see something that looks like this: Rock, Paper, Scissors Play Player 1 plays PAPER and Player 2 plays PAPER No winner this round If there is a winner, however, you should see something like this: Rock, Paper, Scissors. Play Player 1 plays SCISSORS and Player 2 plays ROCK Player 2 wins
Transcribed Image Text:Tiel file:// Rock, Paper, Scissors Play When you close the alert, you should see something that looks like this: Rock, Paper, Scissors Play Player 1 plays PAPER and Player 2 plays PAPER No winner this round If there is a winner, however, you should see something like this: Rock, Paper, Scissors. Play Player 1 plays SCISSORS and Player 2 plays ROCK Player 2 wins
Expert Solution
steps

Step by step

Solved in 3 steps with 5 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Random Class and its operations
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Microsoft Visual C#
Microsoft Visual C#
Computer Science
ISBN:
9781337102100
Author:
Joyce, Farrell.
Publisher:
Cengage Learning,
EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Operations Research : Applications and Algorithms
Operations Research : Applications and Algorithms
Computer Science
ISBN:
9780534380588
Author:
Wayne L. Winston
Publisher:
Brooks Cole
SEE MORE TEXTBOOKS