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

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

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>

<head>

</head>

<body>

<p style="font-family: monospace;" class="newdata"> Rock, Paper, Scissors </p>

<p></p>

</div>

// 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

Expert Solution

Step by step

Solved in 3 steps with 5 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

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.