Rock Paper Scissors Game

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock, Paper, Scissors Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #result {
            font-size: 1.2em;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Rock, Paper, Scissors Game</h1>
    <p>Choose your move:</p>
    <button onclick="playGame('rock')">Rock🪨</button>
    <button onclick="playGame('paper')">Paper📄</button>
    <button onclick="playGame('scissors')">Scissors✂️</button>
    <p id="result"></p>

    <script>
        function playGame(userChoice) {
            // Array of possible moves
            const moves = ['rock', 'paper', 'scissors'];

            // Get a random move for the computer
            const computerChoice = moves[Math.floor(Math.random() * moves.length)];

            // Determine the winner
            const result = determineWinner(userChoice, computerChoice);

            // Display the result
            document.getElementById("result").innerHTML = `You chose ${userChoice}. Computer chose ${computerChoice}. ${result}`;
        }

        function determineWinner(user, computer) {
            if (user === computer) {
                return "It's a tie!";
            } else if ((user === 'rock' && computer === 'scissors') ||
                       (user === 'paper' && computer === 'rock') ||
                       (user === 'scissors' && computer === 'paper')) {
                return "You win!";
            } else {
                return "Computer wins!";
            }
        }
    </script>
</body>
</html>