Play Rock Paper Scissors Online - Free Game - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Rock, Paper, Scissors</title>
</head>
<body>
  <h1>Rock, Paper, Scissors</h1>
  <div id='user_choice' style='display:none;'></div>
  <div id='computer_choice' style='display:none;'></div>
  <div id='game_result' style='display:none;'></div>
  <p>Choose one:</p>
  <button id='rock'>Rock</button>
  <button id='paper'>Paper</button>
  <button id='scissors'>Scissors</button>
  <script>
    const choices = ['Rock', 'Paper', 'Scissors'];

    const user_choice_div = document.getElementById('user_choice');
    const computer_choice_div = document.getElementById('computer_choice');
    const game_result_div = document.getElementById('game_result');

    const rock_btn = document.getElementById('rock');
    rock_btn.addEventListener('click', () => play('Rock'));

    const paper_btn = document.getElementById('paper');
    paper_btn.addEventListener('click', () => play('Paper'));

    const scissors_btn = document.getElementById('scissors');
    scissors_btn.addEventListener('click', () => play('Scissors'));

    function play(user_choice) {
      const computer_choice = choices[Math.floor(Math.random() * choices.length)];

      user_choice_div.innerHTML = `Your choice: ${user_choice}`;
      computer_choice_div.innerHTML = `Computer's choice: ${computer_choice}`;

      if (user_choice == computer_choice) {
        game_result_div.innerHTML = 'It's a tie!';
      } else if (
        (user_choice == 'Rock' && computer_choice == 'Scissors') ||
        (user_choice == 'Paper' && computer_choice == 'Rock') ||
        (user_choice == 'Scissors' && computer_choice == 'Paper')
      ) {
        game_result_div.innerHTML = 'You win!';
      } else {
        game_result_div.innerHTML = 'You lose!';
      }
    }
  </script>
</body>
</html>