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

<!DOCTYPE html>
<html>
<head>
  <title>Rock Paper Scissors</title>
  <style type="text/css">
  p {
    font-family: sans-serif;
    font-size: 18px;
  }
  #result {
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
  }
  </style>
</head>
<body>
  <h1>Rock Paper Scissors</h1>
  <p>Choose one of the options and click the button to start the game!</p>
  <button id="rock">Rock</button>
  <button id="paper">Paper</button>
  <button id="scissors">Scissors</button>
  <div id="result"></div>
  <script type="text/javascript">
    let playerChoice;
    let computerChoice;
    const options = ['rock', 'paper', 'scissors'];
    const result = document.getElementById('result');
<pre><code>document.getElementById('rock').onclick = function(){
  playerChoice = 'rock';
  playGame();
}
document.getElementById('paper').onclick = function(){
  playerChoice = 'paper';
  playGame();
}
document.getElementById('scissors').onclick = function(){
  playerChoice = 'scissors';
  playGame();
}

function playGame() {
  computerChoice = options[Math.floor(Math.random() * options.length)];
  switch (playerChoice + computerChoice) {
    case 'rockscissors':
    case 'paperrock':
    case 'scissorspaper':
      result.innerHTML = 'You win!';
      break;
    case 'rockpaper':
    case 'paperscissors':
    case 'scissorsrock':
      result.innerHTML = 'You lose!';
      break;
    case 'rockrock':
    case 'paperpaper':
    case 'scissorsscissors':
      result.innerHTML = 'It's a tie!';
      break;
  }
}
</code></pre>
  </script>
</body>
</html>