API tools faq
paste
Advertisement
brandblox

WebLab-3.5-(15/10/24)

brandblox
Oct 15th, 2024
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Rock Paper Scissors</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             background-color: #f0f0f0;
  11.             text-align: center;
  12.             padding: 50px;
  13.         }
  14.  
  15.         h1 {
  16.             color: #333;
  17.         }
  18.  
  19.         #game-container {
  20.             display: flex;
  21.             justify-content: center;
  22.             margin-top: 50px;
  23.         }
  24.  
  25.         .choice {
  26.             background-color: #ffffff;
  27.             border: 2px solid #333;
  28.             border-radius: 8px;
  29.             width: 150px;
  30.             padding: 20px;
  31.             margin: 0 20px;
  32.             cursor: pointer;
  33.             transition: 0.3s;
  34.         }
  35.  
  36.         .choice:hover {
  37.             background-color: #f2f2f2;
  38.         }
  39.  
  40.         #result {
  41.             margin-top: 30px;
  42.             font-size: 24px;
  43.             color: #555;
  44.         }
  45.  
  46.         #scoreboard {
  47.             margin-top: 20px;
  48.             font-size: 20px;
  49.         }
  50.  
  51.         .btn-reset {
  52.             background-color: #ff4d4d;
  53.             color: white;
  54.             padding: 10px 20px;
  55.             border: none;
  56.             border-radius: 5px;
  57.             cursor: pointer;
  58.             transition: 0.3s;
  59.         }
  60.  
  61.         .btn-reset:hover {
  62.             background-color: #ff3333;
  63.         }
  64.  
  65.     </style>
  66. </head>
  67. <body>
  68.  
  69.     <h1>Rock Paper Scissors Game</h1>
  70.  
  71.     <div id="game-container">
  72.         <div class="choice" data-choice="rock">
  73.             <img src="https://img.icons8.com/ios/100/000000/hand-rock.png" alt="Rock">
  74.             <p>Rock</p>
  75.         </div>
  76.         <div class="choice" data-choice="paper">
  77.             <img src="https://img.icons8.com/ios/100/000000/hand.png" alt="Paper">
  78.             <p>Paper</p>
  79.         </div>
  80.         <div class="choice" data-choice="scissors">
  81.             <img src="https://img.icons8.com/ios/100/000000/hand-scissors.png" alt="Scissors">
  82.             <p>Scissors</p>
  83.         </div>
  84.     </div>
  85.  
  86.     <div id="result"></div>
  87.  
  88.     <div id="scoreboard">
  89.         <p>Player Score: <span id="playerScore">0</span></p>
  90.         <p>Computer Score: <span id="computerScore">0</span></p>
  91.     </div>
  92.  
  93.     <button class="btn-reset" onclick="resetGame()">Reset Game</button>
  94.  
  95.     <script>
  96.         const choices = document.querySelectorAll('.choice');
  97.         const resultDiv = document.getElementById('result');
  98.         const playerScoreDiv = document.getElementById('playerScore');
  99.         const computerScoreDiv = document.getElementById('computerScore');
  100.  
  101.         let playerScore = 0;
  102.         let computerScore = 0;
  103.  
  104.         // Add click event listener for each choice
  105.         choices.forEach(choice => {
  106.             choice.addEventListener('click', playGame);
  107.         });
  108.  
  109.         function playGame(event) {
  110.             const playerChoice = event.currentTarget.getAttribute('data-choice');
  111.             const computerChoice = getComputerChoice();
  112.             const winner = getWinner(playerChoice, computerChoice);
  113.  
  114.             showResult(playerChoice, computerChoice, winner);
  115.             updateScore(winner);
  116.         }
  117.  
  118.         function getComputerChoice() {
  119.             const choices = ['rock', 'paper', 'scissors'];
  120.             const randomIndex = Math.floor(Math.random() * choices.length);
  121.             return choices[randomIndex];
  122.         }
  123.  
  124.         function getWinner(player, computer) {
  125.             if (player === computer) {
  126.                 return 'draw';
  127.             } else if (
  128.                 (player === 'rock' && computer === 'scissors') ||
  129.                (player === 'paper' && computer === 'rock') ||
  130.                (player === 'scissors' && computer === 'paper')
  131.            ) {
  132.                return 'player';
  133.             } else {
  134.                 return 'computer';
  135.             }
  136.         }
  137.  
  138.         function showResult(playerChoice, computerChoice, winner) {
  139.             let resultText = `Player chose ${playerChoice}, Computer chose ${computerChoice}.`;
  140.  
  141.             if (winner === 'player') {
  142.                 resultText += ' You win!';
  143.             } else if (winner === 'computer') {
  144.                 resultText += ' Computer wins!';
  145.             } else {
  146.                 resultText += ' It\'s a draw!';
  147.             }
  148.  
  149.             resultDiv.textContent = resultText;
  150.         }
  151.  
  152.         function updateScore(winner) {
  153.             if (winner === 'player') {
  154.                 playerScore++;
  155.             } else if (winner === 'computer') {
  156.                 computerScore++;
  157.             }
  158.  
  159.             playerScoreDiv.textContent = playerScore;
  160.             computerScoreDiv.textContent = computerScore;
  161.         }
  162.  
  163.         function resetGame() {
  164.             playerScore = 0;
  165.             computerScore = 0;
  166.             playerScoreDiv.textContent = playerScore;
  167.             computerScoreDiv.textContent = computerScore;
  168.             resultDiv.textContent = '';
  169.         }
  170.     </script>
  171.  
  172. </body>
  173. </html>
  174.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!