Extremely serious rock-paper-scissors game. Has a rich UI and lots of random humor.

Extremely Serious Rock-Paper-Scissors Game
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Extremely Serious Rock-Paper-Scissors Game</title>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        background-color: #F7DC6F;
      }
      
      h1 {
        font-size: 3em;
        margin-top: 50px;
      }
      
      #result {
        font-size: 2em;
        margin-top: 50px;
      }
      
      #choices {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
      }
      
      #choices img {
        cursor: pointer;
        border: 5px solid #ffffff;
        border-radius: 50%;
        box-shadow: 5px 5px 5px #888888;
      }
      
      #computer-choice {
        margin-top: 50px;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h1>Extremely Serious Rock-Paper-Scissors Game</h1>
    <div id="result"></div>
    <div id="choices">
      <img id="rock" src="https://cdn.pixabay.com/photo/2014/04/02/10/55/rock-305212_960_720.png" alt="Rock">
      <img id="paper" src="https://cdn.pixabay.com/photo/2013/07/12/16/51/paper-151870_960_720.png" alt="Paper">
      <img id="scissors" src="https://cdn.pixabay.com/photo/2013/07/12/16/55/scissors-151876_960_720.png" alt="Scissors">
    </div>
    <div id="computer-choice"></div>
    <script>
      const choices = ["rock", "paper", "scissors"];
      const randomIndex = Math.floor(Math.random() * choices.length);
      const computerChoice = choices[randomIndex];
      
      const rock = document.getElementById("rock");
      const paper = document.getElementById("paper");
      const scissors = document.getElementById("scissors");
      const computerChoiceDisplay = document.getElementById("computer-choice");
      const resultDisplay = document.getElementById("result");
      
      rock.addEventListener("click", function() {
        compareChoices("rock");
      });
      
      paper.addEventListener("click", function() {
        compareChoices("paper");
      });
      
      scissors.addEventListener("click", function() {
        compareChoices("scissors");
      });
      
      function compareChoices(userChoice) {
        computerChoiceDisplay.textContent = `The computer chose ${computerChoice}.`;
        
        if (userChoice === computerChoice) {
          resultDisplay.textContent = "It's a tie!";
        } else if (userChoice === "rock" && computerChoice === "scissors" ||
                   userChoice === "paper" && computerChoice === "rock" ||
                   userChoice === "scissors" && computerChoice === "paper") {
          resultDisplay.textContent = "You win!";
        } else {
          resultDisplay.textContent = "You lose! Better luck next time!";
        }
      }
      
      // Funny joke related to the content of the app
      console.log("Why did the chicken play rock-paper-scissors? To see if he could cross the road safely!");
    </script>
  </body>
</html>