How To Built a Rock Paper Scissors Game Using JavaScript, HTML & CSS

JavaScript
Written by Rick Bowen (JavaScript)

Hey there! Today, I’m sharing a cool project that takes me back to childhood – building a Rock Paper Scissors game using JavaScript, HTML, and CSS. It’s simple, fun, and a great way to practice your coding skills. Whether you’re just starting with front-end development or sharpening your JavaScript logic, this project will help you learn, build, and grow. Let’s dive in step-by-step!

Setting the Foundation with HTML

The HTML is straightforward. We create a basic structure with elements for:

  • Game title (Rock Paper Scissors)
  • Choice buttons (Rock, Paper, Scissors)
  • Scoreboard (your score and computer’s score)
  • A message container to show the winner of each round

Here’s what the HTML file (index.html) looks like:

<!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>
    <h1>Rock Paper Scissors</h1>

    <!-- Game Choices -->
    <div class="choices">
        <div class="choice" id="rock">
            <img src="./images/pathhr.jpg" alt="Rock">
        </div>
        <div class="choice" id="paper">
            <img src="./images/kagti.jpg" alt="Paper">
        </div>
        <div class="choice" id="scissor">
            <img src="./images/scissor.jpg" alt="Scissor">
        </div>
    </div>

    <!-- Scoreboard -->
    <div class="score-board">
        <div class="score">
            <p id="user-score">0</p>
            <p>YOU</p>
        </div>
        <div class="score">
            <p id="comp-score">0</p>
            <p>COMP</p>
        </div>
    </div>

    <!-- Message Container -->
    <div class="msg-container">
        <p id="msg">Play your move</p>
    </div>

    <!-- Script -->
    <script src="logic.js"></script>
</body>
</html>

Styling It Up with CSS

The CSS makes our game visually appealing. We:

  • Center the game on the screen
  • Add colors, borders, and spacing to make the game look clean and fun
  • Style images and text so everything fits together perfectly

Here’s a basic CSS file (style.css):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f9;
    color: #333;
}

h1 {
    margin: 20px 0;
    color: #1a2a6c;
}

.choices {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.choice img {
    width: 100px;
    cursor: pointer;
    transition: transform 0.2s;
}

.choice img:hover {
    transform: scale(1.1);
}

.score-board {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 20px;
    font-size: 24px;
}

.msg-container {
    margin: 20px;
    font-size: 18px;
    font-weight: bold;
}

#msg {
    background: #1a2a6c;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
}

Adding the Logic with JavaScript

Here’s where the magic happens. In the JavaScript file (logic.js), we:

  • Capture user’s move (Rock, Paper, or Scissors) when they click
  • Generate a random computer move
  • Compare both moves to determine the winner
  • Update the score and display a message showing who won the round

Here’s the full JavaScript:

const choices = document.querySelectorAll(".choice");
const userScorePara = document.querySelector("#user-score");
const compScorePara = document.querySelector("#comp-score");
const msg = document.querySelector("#msg");

let userScore = 0;
let compScore = 0;

// Function to Generate Computer’s Move
function computerChoice() {
    const options = ["rock", "paper", "scissor"];
    const randomIndex = Math.floor(Math.random() * options.length);
    return options[randomIndex];
}

// Function to Determine the Winner
function determineWinner(user, comp) {
    if (user === comp) return "It's a draw!";
    if ((user === "rock" && comp === "scissor") ||
        (user === "paper" && comp === "rock") ||
        (user === "scissor" && comp === "paper")) {
        userScore++;
        return "You win!";
    } else {
        compScore++;
        return "Computer wins!";
    }
}

// Game Logic on Click
choices.forEach(choice => {
    choice.addEventListener("click", () => {
        const userChoice = choice.id;
        const compChoice = computerChoice();
        const resultMsg = determineWinner(userChoice, compChoice);
        
        // Update UI
        userScorePara.innerText = userScore;
        compScorePara.innerText = compScore;
        msg.innerText = `You chose ${userChoice}, Computer chose ${compChoice}. ${resultMsg}`;
    });
});

Testing and Enhancing

Once you have everything set up, open the index.html file in your browser (you can use VS Code’s Live Server extension for convenience). Test it out:

  • Click on Rock, Paper, or Scissors to play a round.
  • The score updates, and a message appears to show who won.

Feel free to enhance the game by:

  • Adding sounds for each click or win
  • Including animations for the choices
  • Keeping track of rounds (e.g., Best of 5)

What I Learned

  • HTML & CSS: Structuring the page and styling it cleanly
  • JavaScript Logic: Handling events, generating random choices, and using if conditions for comparisons
  • Problem-Solving: Debugging and ensuring the game works smoothly

Conclusion

Building a Rock Paper Scissors game is a fantastic project for learning and leveling up your front-end development skills. It’s fun, interactive, and covers the core concepts of web development. Plus, you get a working game to show off!

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.