じゃんけんアプリ

自分の手を選んでください。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>じゃんけんアプリ</title>
  </head>
  <body>
    <h1>じゃんけんアプリ</h1>
    <p>自分の手を選んでください。</p>
    <button onclick="play('rock')">グー✊</button>
    <button onclick="play('scissors')">チョキ✌️</button>
    <button onclick="play('paper')">パー✋</button>
    
    <div id="message"></div>
    
    <script>
      function play(playerHand) {
        const hands = ["rock", "scissors", "paper"];
        const computerHand = hands[Math.floor(Math.random() * 3)]; // ランダムにじゃんけんの手を決定する
        let result = "";
        
        if (playerHand == computerHand) {
          result = "引き分け！もう一度！";
        } else if (
          (playerHand == "rock" && computerHand == "scissors") ||
          (playerHand == "scissors" && computerHand == "paper") ||
          (playerHand == "paper" && computerHand == "rock")
        ) {
          // 自分が勝った場合の処理
          const messages = ["やったね！🎉", "勝ちだー！👊", "素晴らしい！👌"];
          const index = Math.floor(Math.random() * messages.length);
          result = messages[index];
        } else {
          // 自分が負けた場合の処理
          result = '<span style="color: red; font-size: 48px; animation: spin 1s linear infinite">負け！出直してこい😡</span>';
        }
        
        document.getElementById("message").innerHTML = result;
      }
    </script>
    
    <style>
      @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }
    </style>
  </body>
</html>