Rock Paper Scissor Game using Tailwind CSS & JavaScript

Last Updated : 07 Mar, 2024

Rock Paper Scissors Game is a web-based game that simulates the classic hand game. It allows users to play against the computer by choosing between rock, paper, or scissors. The game is built using Tailwind CSS, a utility-first CSS framework, which ensures a responsive and visual design.

Approach to create Rock, Paper, Scissors Game:

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import external resources like Tailwind CSS for styling.
Create a container div with Tailwind CSS classes for styling. Inside the container, include elements for the game title, buttons for rock, paper, and scissors, and a result container to display the player’s choice, computer’s choice, scores, and the game result.
Use JavaScript to handle the game logic. Define a function to play a round of the game, which takes the player’s and computer’s choices as arguments and returns the result of the round. Use event listeners to trigger the function when the player clicks on a button.
Update the content of the result container with the player’s and computer’s choices, the game result, and the updated scores after each round.
Use Tailwind CSS classes to style the game container, buttons, and result container. Customize the colors, fonts, and layout to create an appealing visual design for the game.

Example: Implementation to design rock paper scissor game.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Rock Paper Scissors</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100">
    <div
        class="game-container border-green-500 max-w-md 
               mx-auto text-center bg-gray-100 rounded-lg 
               shadow-md border-2 border-green-500 p-8 mt-20">
        <h1 class="text-3xl font-semibold mb-4">
              Rock Paper Scissors
          </h1>
        <div class="button-container">
            <button class="btn bg-blue-500 text-white 
                           font-semibold px-4 py-2 rounded mr-2" id="rock">
                  Rock
              </button>
            <button class="btn bg-blue-500 text-white 
                           font-semibold px-4 py-2 rounded mr-2" id="paper">
                  Paper
              </button>
            <button class="btn bg-blue-500 text-white 
                           font-semibold px-4 py-2 rounded" id="scissors">
                  Scissors
              </button>
        </div>
        <div class="result-container flex flex-col justify-center mt-10">
            <p class="font-semibold">
                  Your Choice: <span id="playerChoice"></span>
              </p>
            <p class="font-semibold">
                  Computer's Choice: <span id="computerChoice"></span>
              </p>
            <p class="font-semibold">
                  Your Score: <span id="playerScore">0</span>
              </p>
            <p class="font-semibold">
                  Computer Score: <span id="computerScore">0</span>
              </p>
            <p class="result-text" id="result"></p>
        </div>
    </div>
    <script>
        let playerScore = 0;
        let computerScore = 0;
        const playerScoreDisplay = document.getElementById('playerScore');
        const computerScoreDisplay = document.getElementById('computerScore');
        const playerChoiceDisplay = document.getElementById('playerChoice');
        const computerChoiceDisplay = document.getElementById('computerChoice');
        const buttons = document.querySelectorAll('.btn');
        const choices = ['rock', 'paper', 'scissors'];
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const playerChoice = button.id;
                const computerChoice = 
                          choices[Math.floor(Math.random() * choices.length)];
                playerChoiceDisplay.textContent = 
                      playerChoice.charAt(0).toUpperCase() + playerChoice.slice(1);
                computerChoiceDisplay.textContent = 
                      computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1);
                const result = playRound(playerChoice, computerChoice);
                document.getElementById('result').innerText = result;
                playerScoreDisplay.textContent = playerScore;
                computerScoreDisplay.textContent = computerScore;
            });
        });
        function playRound(playerChoice, computerChoice) {
            if (playerChoice === computerChoice) {
                return "It's a tie!";
            } else if (
                (playerChoice === 'rock' && computerChoice === 'scissors') ||
                (playerChoice === 'paper' && computerChoice === 'rock') ||
                (playerChoice === 'scissors' && computerChoice === 'paper')
            ) {
                playerScore++;
                return 'You win!';
            } else {
                computerScore++;
                return 'Computer wins!';
            }
        }
    </script>
</body>
 
</html>