Build a Rock Paper Scissors Game Website

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:

1. Clone the repository:
   

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

2. Open the project directory:
   

   cd Rock-Paper-Scissors
   

3. Run the project:

   • Open the index.html file in a web browser to start playing the Rock Paper Scissors game.

Usage

1. Open the website in a web browser.
2. Select your move by clicking on the Rock, Paper, or Scissors buttons.
3. 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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Rock Paper Scissors Game6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      4a249f0d628e2318394fd9b75b4636b1Rock Paper Scissors Game473f0a7621bec819994bb5020d29372a
      e388a4556c0f65e1904146cc1a846beeChoose your move:94b3e26ee717c64999d7867364b1b4a3
      cfc30845dcc69087db4670cfb20dbb15
        06909a81795c7b20fc7f465c5650f5e5👊65281c5ac262bf6d81768915a4a77ac0
        8f650b08ee1baf9097487bb7690c2cfe🖐65281c5ac262bf6d81768915a4a77ac0
        c434bb80fc2caadf54d6803b6423b351✌65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
      9369b95c0a54fa14078c71ff87b92a5394b3e26ee717c64999d7867364b1b4a3
      9c3cee03555a05e7fda6c3ddcac84285
        Your score: d8a54a40a42473022fcf25a18ceeb0b8054bdf357c58b8a65c66d7c19c8e4d114 Computer score:
        9777042b948140f7c37ec825c7ba0124054bdf357c58b8a65c66d7c19c8e4d114
      94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

The above is the detailed content of Build a Rock Paper Scissors Game Website. For more information, please follow other related articles on the PHP Chinese website!