Abhishek Gurjar

Posted on Aug 23

Build a Rock Paper Scissors Game Website

#html #css #javascript #rockpaperscissors

Introduction

Hello, fellow developers! I'm excited to introduce my latest project: a Rock Paper Scissors Game. This classic game is a fun way to practice your JavaScript skills and create an interactive user experience. Whether you're new to coding or looking to add a simple yet engaging game to your portfolio, this project offers a great opportunity to improve your front-end development abilities.

Project Overview

The Rock Paper Scissors Game is a web-based application where users can play the popular game against a computer. The project demonstrates how to manage user input, generate random computer moves, and determine the outcome of the game. It's an excellent exercise in working with conditional logic and DOM manipulation.

Features

Interactive Gameplay: Users can select Rock, Paper, or Scissors and see the result instantly.
Score Tracking: The game keeps track of the player's and computer's scores.
Responsive Design: Ensures a consistent and enjoyable experience across different devices.

Technologies Used

HTML: Structures the web page and game elements.
CSS: Styles the game interface for a clean and responsive design.
JavaScript: Manages the game logic, including user interactions and score tracking.

Project Structure

Here's a quick look at the project structure:

Rock-Paper-Scissors/
├── index.html
├── style.css
└── script.js

index.html: Contains the HTML structure for the Rock Paper Scissors game.
style.css: Includes CSS styles to enhance the appearance and responsiveness of the game.
script.js: Manages the game logic, including user interactions and score tracking.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Rock-Paper-Scissors.git

Open the project directory:
```
cd Rock-Paper-Scissors
```
Run the project:
- Open the index.html file in a web browser to start playing the Rock Paper Scissors game.

Usage

Open the website in a web browser.
Select your move by clicking on the Rock, Paper, or Scissors buttons.
View the result of the game, and see the scores update automatically.

Code Explanation

HTML

The index.html file provides the structure of the game, including the buttons for Rock, Paper, and Scissors, and the elements that display the result and scores. Here’s a snippet:

<!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 Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="main">
      <h1>Rock Paper Scissors Game</h1>
      <p>Choose your move:</p>
      <div class="buttons">
        <button id="rock">&#x1F44A;</button>
        <button id="paper">&#x1f590;</button>
        <button id="scissors">&#x270c;</button>
      </div>
      <p id="result"></p>
      <p id="scores">
        Your score: <span id="user-score">0</span> Computer score:
        <span id="computer-score">0</span>
      </p>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

CSS

The style.css file styles the Rock Paper Scissors game, providing a modern and user-friendly layout. Here are some key styles:

body {
  background-color: #f1f1f1;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin: 100px;
}

p {   
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5rem;
}

.buttons {
  display: flex;
  justify-content: center;
}

button {
  border: none;
  font-size: 3rem;
  margin: 0 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#rock {
  background-color: #ff0000;
}

#paper {
  background-color: #2196f3;
}

#scissors {
  background-color: #4caf50;
}

#user-score {
  color: #2196f3;
}

#computer-score {
  color: #ff0000;
}

.footer {
  margin-top: 250px;
  text-align: center;
}

.footer p {
  font-size: 16px;
  font-weight: 400;
}

JavaScript

The script.js file manages the logic for the Rock Paper Scissors game, including handling user input, generating computer moves, and determining the winner. Here’s a snippet:

const buttons = document.querySelectorAll("button");
const resultEl = document.getElementById("result");
const playerScoreEl = document.getElementById("user-score");
const computerScoreEl = document.getElementById("computer-score");

let playerScore = 0;
let computerScore = 0;

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const result = playRound(button.id, computerPlay());
    resultEl.textContent = result;
  });
});

function computerPlay() {
  const choices = ["rock", "paper", "scissors"];
  const randomChoice = Math.floor(Math.random() * choices.length);
  return choices[randomChoice];
}

function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    return "It's a tie!";
  } else if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "paper" && computerSelection === "rock") ||
    (playerSelection === "scissors" && computerSelection === "paper")
  ) {
    playerScore++;
    playerScoreEl.textContent = playerScore;
    return "You win! " + playerSelection + " beats " + computerSelection;
  } else {
    computerScore++;
    computerScoreEl.textContent = computerScore;
    return "You lose! " + computerSelection + " beats " + playerSelection;
  }
}

Live Demo

You can check out the live demo of the Rock Paper Scissors game here.

Conclusion

Building the Rock Paper Scissors game was a fun and educational experience that helped me practice JavaScript and DOM manipulation. I hope this project inspires you to explore more JavaScript projects and continue building your coding skills. Happy coding!

Credits

This project was developed as part of my journey to enhance my front-end development skills, focusing on creating interactive and dynamic web applications.

Author

Abhishek Gurjar
- GitHub Profile

DEV Community