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

<!--
  Below is a simple game of rock, paper, scissors.
  The user is prompted to click one of the three buttons.
  Depending on their selection, they either win, lose, or draw.
-->
<html>
  <head>
    <title>Rock, Paper, Scissors</title>
    <style>
      .choice {
        padding: 10px;
        font-size: 20px;
        border-radius: 5px;
        background-color: #ddd;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Rock, Paper, Scissors</h1>
    <p>Choose one:</p>
    <div>
      <button class="choice" id="rock">Rock</button>
      <button class="choice" id="paper">Paper</button>
      <button class="choice" id="scissors">Scissors</button>
    </div>
    <div id="result"></div>
<pre><code>&lt;script&gt;
  function computerPlay() {
    let choices = ['rock', 'paper', 'scissors'];
    let randomChoice = Math.floor(Math.random() * 3);
    return choices[randomChoice];
  }

  let playerSelection;
  let computerSelection = computerPlay();

  const buttons = document.querySelectorAll('.choice');
  buttons.forEach(button =&gt; {
    button.addEventListener('click', e =&gt; {
      playerSelection = button.id;
      playGame(playerSelection, computerSelection);
    });
  });

  function playGame(playerSelection, computerSelection) {
    let result = document.getElementById('result');

    if (playerSelection === computerSelection) {
      result.textContent = 'It's a draw!';
    } else if (
      (playerSelection === 'rock' &amp;&amp; computerSelection === 'scissors') ||
      (playerSelection === 'paper' &amp;&amp; computerSelection === 'rock') ||
      (playerSelection === 'scissors' &amp;&amp; computerSelection === 'paper')
    ) {
      result.textContent = 'You win!';
    } else {
      result.textContent = 'Computer wins!';
    }
  }
&lt;/script&gt;
</code></pre>
  </body>
</html>