Rock Paper Scissors Game with Scoreboard in JavaScript

13 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Rock Paper Scissors Game with Scoreboard in JavaScript

<!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</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>Rock Paper Scissors</h1>
        
        <div class="scoreboard">
            <div class="score">Player: <span id="player-score">0</span></div>
            <div class="score">Computer: <span id="computer-score">0</span></div>
        </div>

<div class="display-area">
            <div class="choice-display">You chose: <span id="player-choice">-</span></div>
            <div class="choice-display">Computer chose: <span id="computer-choice">-</span></div>
        </div>

<div class="result-message" id="result-text">Make your move to start!</div>

<div class="choices">
            <button class="btn" onclick="playGame('rock')">✊ Rock</button>
            <button class="btn" onclick="playGame('paper')">✋ Paper</button>
            <button class="btn" onclick="playGame('scissors')">✌ Scissors</button>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.game-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.scoreboard {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
}

.display-area {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #555;
}

.choice-display {
    margin: 5px 0;
}

.result-message {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: #2c3e50;
    min-height: 30px;
}

.choices {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn {
    flex: 1;
    padding: 12px 0;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn:hover {
    background-color: #2980b9;
}

.btn:active {
    transform: scale(0.95);
}

/* Dynamic colors for the result text */
.win { color: #2ecc71; }
.lose { color: #e74c3c; }
.tie { color: #f39c12; }

let playerScore = 0;
let computerScore = 0;

const choices = ['rock', 'paper', 'scissors'];

function playGame(playerChoice) {
    // 1. Generate random computer choice
    const randomIndex = Math.floor(Math.random() * 3);
    const computerChoice = choices[randomIndex];

// 2. Update the text displays for choices
    document.getElementById('player-choice').textContent = capitalize(playerChoice);
    document.getElementById('computer-choice').textContent = capitalize(computerChoice);

// 3. Determine winner and update score
    const resultTextElement = document.getElementById('result-text');
    resultTextElement.className = 'result-message'; // Clear previous dynamic color classes

if (playerChoice === computerChoice) {
        resultTextElement.textContent = "It's a tie!";
        resultTextElement.classList.add('tie');
    } else if (
        (playerChoice === 'rock' && computerChoice === 'scissors') ||
        (playerChoice === 'paper' && computerChoice === 'rock') ||
        (playerChoice === 'scissors' && computerChoice === 'paper')
    ) {
        resultTextElement.textContent = "You win! 🎉";
        resultTextElement.classList.add('win');
        playerScore++;
        document.getElementById('player-score').textContent = playerScore;
    } else {
        resultTextElement.textContent = "Computer wins! 😢";
        resultTextElement.classList.add('lose');
        computerScore++;
        document.getElementById('computer-score').textContent = computerScore;
    }
}

// Helper function to capitalize choices for cleaner UI presentation
function capitalize(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
}

Comments 0

…

Rock Paper Scissors Game with Scoreboard in JavaScript

Recommended

Comments 0