Simple HTML Rock Paper Scissors Game - Play Now! - 常规

<html>
    <head>
        <title>Rock, Paper, Scissors</title>
        <style>
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .square {
                width: 200px;
                height: 200px;
                background-color: #f5f5f5;
                margin: 10px;
            }
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
            .blue {
                background-color: blue;
            }
            .result {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="result" class="result">
            <h2>Rock Paper Scissors</h2>
            <p>Click on one of the options below to play:</p>
        </div>
        <div class="container">
            <div class="square" id="rock">Rock</div>
            <div class="square" id="paper">Paper</div>
            <div class="square" id="scissors">Scissors</div>
        </div>
        <script>
            const rock = document.getElementById('rock');
            const paper = document.getElementById('paper');
            const scissors = document.getElementById('scissors');
            const result = document.getElementById('result');
<pre><code>        let userChoice;
        let computerChoice;
        let computerOptions = ['rock', 'paper', 'scissors'];

        rock.addEventListener('click', (e) =&gt; {
            userChoice = 'rock';
            computerChoice = computerOptions[Math.floor(Math.random() * 3)];
            determineWinner(userChoice, computerChoice);
        });

        paper.addEventListener('click', (e) =&gt; {
            userChoice = 'paper';
            computerChoice = computerOptions[Math.floor(Math.random() * 3)];
            determineWinner(userChoice, computerChoice);
        });

        scissors.addEventListener('click', (e) =&gt; {
            userChoice = 'scissors';
            computerChoice = computerOptions[Math.floor(Math.random() * 3)];
            determineWinner(userChoice, computerChoice);
        });

        const determineWinner = (userChoice, computerChoice) =&gt; {
            if (userChoice === computerChoice) {
                result.innerHTML = `You chose ${userChoice} and the computer chose ${computerChoice}. It's a tie!`;
            } else if (userChoice === 'rock' &amp;&amp; computerChoice === 'scissors') {
                result.innerHTML = `You chose ${userChoice} and the computer chose ${computerChoice}. You win!`;
            } else if (userChoice === 'paper' &amp;&amp; computerChoice === 'rock') {
                result.innerHTML = `You chose ${userChoice} and the computer chose ${computerChoice}. You win!`;
            } else if (userChoice === 'scissors' &amp;&amp; computerChoice === 'paper') {
                result.innerHTML = `You chose ${userChoice} and the computer chose ${computerChoice}. You win!`;
            } else {
                result.innerHTML = `You chose ${userChoice} and the computer chose ${computerChoice}. You lost!`;
            }
        }
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>