Creating a Rock-Paper-Scissors Game Using jQuery

Introduction
Understanding Rock-Paper-Scissors Rules
Setting Up the Development Environment
Creating the HTML Structure
Styling the Game with CSS
Implementing Game Logic with jQuery
Enhancing the Game with Animations
Adding Sounds for Better User Experience
Implementing Score Tracking
Making the Game Mobile Responsive
Optimizing Performance and Code Refinement
Conclusion

1. Introduction

Rock-Paper-Scissors is a simple hand game played between two players. It’s a great beginner project for learning how to work with JavaScript, jQuery, and DOM manipulation. In this guide, we will build an interactive Rock-Paper-Scissors game using jQuery, complete with animations, sound effects, and score tracking.

2. Understanding Rock-Paper-Scissors Rules

Players choose between Rock, Paper, or Scissors.
The winner is decided based on the following rules:
- Rock beats Scissors (Rock crushes Scissors)
- Scissors beats Paper (Scissors cut Paper)
- Paper beats Rock (Paper covers Rock)
If both players choose the same option, it results in a Draw.

Our implementation will have:

A player vs computer mode.
Randomized computer choice.
Display of results (Win, Lose, or Draw).

3. Setting Up the Development Environment

To develop this game, you need:

A code editor (VS Code, Sublime, or Notepad++).
A modern web browser (Google Chrome, Mozilla Firefox).
Basic knowledge of HTML, CSS, JavaScript, and jQuery.

4. Creating the HTML Structure

Let’s set up a simple HTML structure to build our game interface.

<!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="styles.css">
</head>
<body>

    <h1>Rock-Paper-Scissors</h1>

    <div class="game-container">
        <div class="choices">
            <button class="choice" id="rock">✊ Rock</button>
            <button class="choice" id="paper">✋ Paper</button>
            <button class="choice" id="scissors">✌️ Scissors</button>
        </div>

        <div class="result">
            <p>Your Choice: <span id="player-choice">-</span></p>
            <p>Computer Choice: <span id="computer-choice">-</span></p>
            <h2 id="winner">Result: -</h2>
        </div>

        <div class="scoreboard">
            <p>Player Score: <span id="player-score">0</span></p>
            <p>Computer Score: <span id="computer-score">0</span></p>
        </div>

        <button id="restart">Restart Game</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>

</body>
</html>

5. Styling the Game with CSS

The CSS will make our game visually appealing.

body {
    text-align: center;
    font-family: Arial, sans-serif;
}

.game-container {
    margin: 20px auto;
    width: 50%;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 10px;
}

.choices button {
    font-size: 18px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

.result {
    margin-top: 20px;
    font-size: 18px;
}

.scoreboard {
    margin-top: 20px;
    font-size: 20px;
}

#restart {
    margin-top: 15px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

6. Implementing Game Logic with jQuery

We will now add JavaScript/jQuery to handle the game logic.

$(document).ready(function() {
    let playerScore = 0;
    let computerScore = 0;
    const choices = ["Rock", "Paper", "Scissors"];

    $(".choice").click(function() {
        let playerChoice = $(this).text().trim();
        let computerChoice = choices[Math.floor(Math.random() * choices.length)];

        $("#player-choice").text(playerChoice);
        $("#computer-choice").text(computerChoice);

        let result = determineWinner(playerChoice, computerChoice);
        $("#winner").text(result);

        updateScore(result);
    });

    $("#restart").click(function() {
        playerScore = 0;
        computerScore = 0;
        $("#player-score").text(playerScore);
        $("#computer-score").text(computerScore);
        $("#player-choice, #computer-choice, #winner").text("-");
    });

    function determineWinner(player, computer) {
        if (player === computer) {
            return "It's a Draw!";
        }
        if (
            (player === "Rock" && computer === "Scissors") ||
            (player === "Scissors" && computer === "Paper") ||
            (player === "Paper" && computer === "Rock")
        ) {
            return "You Win!";
        } else {
            return "You Lose!";
        }
    }

    function updateScore(result) {
        if (result === "You Win!") {
            playerScore++;
        } else if (result === "You Lose!") {
            computerScore++;
        }
        $("#player-score").text(playerScore);
        $("#computer-score").text(computerScore);
    }
});

7. Enhancing the Game with Animations

We can add jQuery animations when a choice is clicked.

$(".choice").click(function() {
    $(this).fadeOut(100).fadeIn(100);
});

8. Adding Sounds for Better User Experience

Adding sound effects enhances user engagement.

<audio id="click-sound" src="click.mp3"></audio>

$(".choice").click(function() {
    $("#click-sound")[0].play();
});

9. Implementing Score Tracking

The game already updates and displays scores dynamically.

10. Making the Game Mobile Responsive

We use CSS media queries to ensure the game works well on mobile devices.

@media screen and (max-width: 600px) {
    .game-container {
        width: 90%;
    }
    .choices button {
        font-size: 16px;
    }
}

11. Optimizing Performance and Code Refinement

Minimize jQuery selectors usage.
Use event delegation for dynamic elements.
Optimize function calls for better performance.

Congratulations! 🎉 You have successfully created a Rock-Paper-Scissors game using jQuery. You learned how to:
✔️ Create an interactive UI using HTML & CSS.
✔️ Implement game logic using jQuery.
✔️ Add animations and sound effects.
✔️ Keep track of the score.
✔️ Optimize performance.

Now, you can extend the game by adding:
✅ A multiplayer mode.
✅ A timer for quick decisions.
✅ Advanced AI for computer choices.

Happy coding!

Creating a rock-paper-scissors game