Rock Paper Scissors Javascript Game

Rock Paper Scissors Javascript Game

6 min read Jun 20, 2024
Rock Paper Scissors Javascript Game

Rock Paper Scissors JavaScript Game

This article will guide you through the process of creating a simple Rock Paper Scissors game using JavaScript.

1. Setting Up HTML Structure

First, we need to create the basic HTML structure for our game:




    
    
    Rock Paper Scissors
    


    

Rock Paper Scissors

You:

Computer:

This code creates a basic HTML structure with elements for:

  • Title: "Rock Paper Scissors"
  • Player Choice: Buttons for Rock, Paper, and Scissors
  • Computer Choice: A paragraph to display the computer's choice
  • Result: A paragraph to display the game result

2. Adding CSS Styling (style.css)

You can style your game using CSS to make it visually appealing. Here's a basic example:

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

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

This CSS styles the elements for a clean and modern look. You can adjust colors, fonts, and spacing to your preference.

3. Implementing JavaScript Logic (script.js)

Now, let's add the JavaScript code to make the game functional:

const rockButton = document.getElementById('rock');
const paperButton = document.getElementById('paper');
const scissorsButton = document.getElementById('scissors');
const computerChoice = document.getElementById('computer-choice');
const result = document.getElementById('result');

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

function determineWinner(playerChoice, computerChoice) {
    if (playerChoice === computerChoice) {
        return "It's a tie!";
    } else if (
        (playerChoice === "Rock" && computerChoice === "Scissors") ||
        (playerChoice === "Paper" && computerChoice === "Rock") ||
        (playerChoice === "Scissors" && computerChoice === "Paper")
    ) {
        return "You win!";
    } else {
        return "Computer wins!";
    }
}

rockButton.addEventListener('click', () => {
    const playerChoice = "Rock";
    const computerSelection = getComputerChoice();
    computerChoice.textContent = computerSelection;
    const winner = determineWinner(playerChoice, computerSelection);
    result.textContent = winner;
});

paperButton.addEventListener('click', () => {
    const playerChoice = "Paper";
    const computerSelection = getComputerChoice();
    computerChoice.textContent = computerSelection;
    const winner = determineWinner(playerChoice, computerSelection);
    result.textContent = winner;
});

scissorsButton.addEventListener('click', () => {
    const playerChoice = "Scissors";
    const computerSelection = getComputerChoice();
    computerChoice.textContent = computerSelection;
    const winner = determineWinner(playerChoice, computerSelection);
    result.textContent = winner;
});

This JavaScript code does the following:

  • Selects elements: It gets references to HTML elements using getElementById.
  • getComputerChoice function: Generates a random choice for the computer from "Rock", "Paper", and "Scissors".
  • determineWinner function: Determines the winner based on player and computer choices.
  • Event Listeners: Adds event listeners to the buttons so that when a button is clicked:
    • It gets the player's choice.
    • Calls getComputerChoice to get the computer's choice.
    • Displays both choices on the page.
    • Calls determineWinner to decide the winner and displays the result.

4. Running the Game

Save the HTML, CSS, and JavaScript files in the same directory. Open the HTML file in your web browser to play the Rock Paper Scissors game!

You can further enhance the game by adding features like:

  • Score Tracking: Keep track of the player's and computer's scores.
  • Multiple Rounds: Allow the game to run for a specific number of rounds.
  • Visual Feedback: Add animations or visual effects to the game.

This step-by-step guide helps you create a basic Rock Paper Scissors game using JavaScript. You can customize it further based on your desired features and styling.