じゃんけんアプリ

負け！出直してこい😡
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>じゃんけんアプリ</title>
    <style>
      #result{
        font-size: 24pt;
        margin-top: 20px;
      }
      #lose{
        color: red;
        font-size: 36pt;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>じゃんけんアプリ</h1>
    <button onclick="rock();">グー</button>
    <button onclick="scissors();">チョキ</button>
    <button onclick="paper();">パー</button>
    <div id="result"></div>
    <div id="lose">負け！出直してこい😡</div>
    <script>
      function rock() {
        play(0);
      }
      
      function scissors() {
        play(1);
      }
      
      function paper() {
        play(2);
      }
      
      function play(player) {
        var computer = Math.floor(Math.random() * 3);
        var hands = ["グー", "チョキ", "パー"];
        var result = (player - computer + 3) % 3;
        document.getElementById("result").innerText = "あなた：" + hands[player] + "\nコンピューター：" + hands[computer];
        
        if (result === 0) {
          var messages = ["あいこだね！", "やり直し！", "次こそ勝つぞ！", "なんだかんだいって仲良くなれたね！"];
          document.getElementById("result").innerText += "\n" + messages[Math.floor(Math.random() * 4)];
        } else if (result === 1) {
          document.getElementById("lose").style.display = "block";
        } else {
          var messages = ["おめでとう！", "勝ったね！", "さすがだよ！", "まさか勝てるとは思わなかったよ！"];
          document.getElementById("result").innerText += "\n" + messages[Math.floor(Math.random() * 4)];
        }
      }
    </script>
  </body>
</html>