Post
Ask Question

Rock, Paper, Scissors Game in JavaScript

In this article, we will learn about the Rock, Paper, Scissors game by adding score tracking, animations for winning and losing states, a reset button, and a more polished user interface. Below is the updated code for both the HTML and JavaScript files.

HTML Code

Update your index.html file with the following content:

<!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;
            margin-top: 50px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
        }
        .result {
            margin-top: 20px;
            font-size: 24px;
        }
        .score {
            font-size: 20px;
            margin-top: 10px;
        }
        .win {
            color: green;
        }
        .lose {
            color: red;
        }
        .tie {
            color: orange;
        }
    </style>
</head>
<body>

    <h1>Rock, Paper, Scissors</h1>
    <button onclick="play('rock')">Rock</button>
    <button onclick="play('paper')">Paper</button>
    <button onclick="play('scissors')">Scissors</button>
    <button onclick="resetGame()">Reset Game</button>

    <div class="score" id="score">Player: 0 | Computer: 0</div>
    <div class="result" id="result"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript Code

Update your script.js file with the following content:

let playerScore = 0;
let computerScore = 0;

function play(userChoice) {
    const choices = ['rock', 'paper', 'scissors'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    
    let result = '';

    if (userChoice === computerChoice) {
        result = `It's a tie! You both chose ${userChoice}.`;
        document.getElementById('result').className = 'result tie';
    } else if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'paper' && computerChoice === 'rock') ||
        (userChoice === 'scissors' && computerChoice === 'paper')
    ) {
        result = `You win! ${userChoice} beats ${computerChoice}.`;
        playerScore++;
        document.getElementById('result').className = 'result win';
    } else {
        result = `You lose! ${computerChoice} beats ${userChoice}.`;
        computerScore++;
        document.getElementById('result').className = 'result lose';
    }

    document.getElementById('result').innerText = result;
    updateScore();
}

function updateScore() {
    document.getElementById('score').innerText = `Player: ${playerScore} | Computer: ${computerScore}`;
}

function resetGame() {
    playerScore = 0;
    computerScore = 0;
    updateScore();
    document.getElementById('result').innerText = '';
}

Code explanation

Two variables (playerScore and computerScore) are introduced to keep track of the scores. The updateScore function updates the score display on the webpage after each round.

CSS classes (win, lose, tie) are added to change the text color based on the game outcome. The class is dynamically assigned to the result message based on whether the player wins, loses, or ties.

A "Reset Game" button is added to allow users to reset their scores. The resetGame function resets the scores to zero and clears the result message.

The score display is styled for better visibility. The overall layout remains simple yet effective for user interaction.

Output

Save both updated files (index.html and script.js) in the same directory.

Open the index.html file in a web browser.

Rock Paper Scissors game

Click on any button to play the game, track your score, and use the reset button as needed.

Rock Paper Scissors game


Similar Articles