Tech

Dec 23, 2024

4 mins read

21views

4 mins read

Master JavaScript Basics: Create Your Own Rock Paper Scissors Game

JavaScript is an essential language for web developers, providing the interactivity and dynamic features users expect from modern websites. One great way to practice JavaScript and reinforce foundational concepts is by creating simple, interactive games. Fsiblog, we’ll walk you through building a Rock Paper Scissors game step-by-step. This beginner-friendly project is perfect for honing your skills in variables, conditionals, functions, and user interaction.

What You Will Learn

By the end of this tutorial, you’ll have learned:

How to use JavaScript to handle user input.
How to implement conditional logic.
How to create and use functions to structure code.
Basic debugging skills for troubleshooting your JavaScript code.

Let’s dive into it!

Step 1: Setting Up Your Environment

Before writing any code, ensure you have the following ready:

A text editor like Visual Studio Code.
A web browser with developer tools (Google Chrome, Firefox, etc.).
Basic understanding of HTML and CSS for structuring and styling your game interface.

Create a project folder, and inside it, create the following files:

index.html (for the game interface)
style.css (for styling)
script.js (for JavaScript functionality)

Step 2: Writing the HTML

The HTML structure provides the basic layout of the game. Here’s an example:

<!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>
        <p id="message">Make your choice:</p>
        <div class="choices">
            <button id="rock">Rock</button>
            <button id="paper">Paper</button>
            <button id="scissors">Scissors</button>
        </div>
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

This creates a simple interface with three buttons for Rock, Paper, and Scissors, along with placeholders for displaying messages and results.

Step 3: Styling the Game with CSS

Add some styles in style.css to make the game visually appealing:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.game-container {
    text-align: center;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #4caf50;
    color: white;
}

button:hover {
    background-color: #45a049;
}

#result {
    font-weight: bold;
    margin-top: 20px;
}

Step 4: Adding the JavaScript

Now, let’s bring the game to life with JavaScript. Open the script.js file and start coding:

1. Define Choices and Random Selection

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

function getComputerChoice() {
    const randomIndex = Math.floor(Math.random() * choices.length);
    return choices[randomIndex];
}

2. Determine the Winner

function determineWinner(playerChoice, computerChoice) {
    if (playerChoice === computerChoice) {
        return "It's a tie!";
    }

    if (
        (playerChoice === "rock" && computerChoice === "scissors") ||
        (playerChoice === "paper" && computerChoice === "rock") ||
        (playerChoice === "scissors" && computerChoice === "paper")
    ) {
        return "You win!";
    }

    return "Computer wins!";
}

3. Add Event Listeners to Buttons

const buttons = document.querySelectorAll("button");
const resultDisplay = document.getElementById("result");
const messageDisplay = document.getElementById("message");

buttons.forEach(button => {
    button.addEventListener("click", () => {
        const playerChoice = button.id;
        const computerChoice = getComputerChoice();

        messageDisplay.textContent = `You chose ${playerChoice}, computer chose ${computerChoice}.`;
        resultDisplay.textContent = determineWinner(playerChoice, computerChoice);
    });
});

This code:

Generates the computer’s choice randomly.
Determines the winner using conditional logic.
Updates the user interface with the results when a button is clicked.

Step 5: Testing Your Game

Open the index.html file in your browser.
Click the Rock, Paper, or Scissors buttons to play the game.
Check if the displayed results match your expectations.

Enhancing the Game

Once your basic game works, consider adding these features:

Scorekeeping: Track and display the scores of the player and computer.
Game Rounds: Let users play a best-of-5 or best-of-10 series.
Improved UI: Add animations or sound effects for more engagement.

Conclusion

Building a Rock Paper Scissors game is a fun and effective way to strengthen your JavaScript skills. You’ve practiced working with functions, event listeners, and conditionals while creating an interactive application. Keep experimenting and adding features to this project as you progress in your JavaScript journey. Happy coding!