Rock Paper Scissors Game

A simple and interactive Rock Paper Scissors game built with React. This project demonstrates basic React concepts like state management, event handling, and conditional rendering.

Preview

To see the game in action live here, check out the demo GIF below or run the app locally after following the installation steps.

Features

Interactive Gameplay: Play against the computer by selecting Rock, Paper, or Scissors.
Score Tracking: Keeps track of your score throughout the game.
Responsive Design: Works well on devices of all sizes.
Game Rules Popup: Displays the game rules for new players.

How to Play

Choose between Rock, Paper, or Scissors by clicking on the respective button.
The computer will randomly select its choice.
The game will display the result:
- YOU WON: If your choice beats the computer's choice.
- YOU LOSE: If the computer's choice beats your choice.
- IT IS DRAW: If both choices are the same.
The score is updated based on the result:
- Win: Score increases by 1.
- Lose: Score decreases by 1.
- Draw: Score remains the same.
Click "PLAY AGAIN" to start a new round.

Installation

Clone the repository:
```
git clone <repository-url>
```
Navigate to the project directory:
```
cd rock-paper-scissors
```
Install the dependencies:
```
npm install
```
Start the development server:
```
npm start
```

Technologies Used

React: For building the user interface.
Styled Components: For styling the components.
reactjs-popup: For displaying the game rules in a modal.

Project Structure

├── public
│   └── index.html
├── src
│   ├── components
│   │   ├── Game.js
│   │   ├── Header.js
│   │   ├── RulesModal.js
│   │   └── ...other components
│   ├── App.js
│   ├── index.js
│   └── ...other files
├── package.json
└── README.md