JSFiddle - React, Tailwind, and code Playground

by maxnjinjoh_

HTML

<!-- HTML FILE -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock, Paper, Scissors, Lizard, Spock</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Rock, Paper, Scissors, Lizard, Spock</h1>
    <label>Number of Rounds:</label>
    <input type="number" id="rounds" min="1" value="3">
    <button onclick="startGame()">Start</button>
    
    <div class="game-container" id="game">
        <h2>Choose your move:</h2>
        <button onclick="play('Rock')">Rock</button>
        <button onclick="play('Paper')">Paper</button>
        <button onclick="play('Scissors')">Scissors</button>
        <button onclick="play('Lizard')">Lizard</button>
        <button onclick="play('Spock')">Spock</button>
        
        <h3 id="result"></h3>
        <h3 id="overall-winner"></h3>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS

body { font-family: Arial, sans-serif; text-align: center; }
.game-container { margin-top: 20px; }
button { margin: 5px; padding: 10px; font-size: 16px; }

JavaScript

const choices = ["Rock", "Paper", "Scissors", "Lizard", "Spock"];
let roundsToPlay = 0;
let roundsPlayed = 0;
let playerWins = 0;
let computerWins = 0;

function startGame() {
    roundsToPlay = parseInt(document.getElementById("rounds").value);
    roundsPlayed = 0;
    playerWins = 0;
    computerWins = 0;
    document.getElementById("result").innerText = "";
    document.getElementById("overall-winner").innerText = "";
}

function play(playerChoice) {
    if (roundsPlayed >= roundsToPlay) {
        return;
    }
    
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    let result = "";
    
    if (playerChoice === computerChoice) {
        result = `It's a tie! Both chose ${playerChoice}.`;
    } else if (
        (playerChoice === "Rock" && (computerChoice === "Scissors" || computerChoice === "Lizard")) ||
        (playerChoice === "Paper" && (computerChoice === "Rock" || computerChoice === "Spock")) ||
        (playerChoice === "Scissors" && (computerChoice === "Paper" || computerChoice === "Lizard")) ||
        (playerChoice === "Lizard" && (computerChoice === "Spock" || computerChoice === "Paper")) ||
        (playerChoice === "Spock" && (computerChoice === "Scissors" || computerChoice === "Rock"))
    ) {
        result = `You win! ${playerChoice} beats ${computerChoice}.`;
        playerWins++;
    } else {
        result = `Computer wins! ${computerChoice} beats ${playerChoice}.`;
        computerWins++;
    }
    
    roundsPlayed++;
    document.getElementById("result").innerText = result;
    
    if (roundsPlayed >= roundsToPlay) {
        let finalResult = "";
        if (playerWins > computerWins) {
            finalResult = `You win the game! ${playerWins} to ${computerWins}.`;
        } else if (computerWins > playerWins) {
            finalResult = `Computer wins the game! ${computerWins} to ${playerWins}.`;
        } else {
            finalResult = "It's a tie game!";
        }
       ...