sudokmaar / rps-clash

RPS Clash is a web-based Rock Paper Scissors game that allows users to play against a computer opponent. The objective of the game is to defeat the computer by choosing the winning move in each round.

RPS Clash - Rock Paper Scissors Game

RPS Clash is a web-based Rock Paper Scissors game that allows users to play against a computer opponent. The objective of the game is to defeat the computer by choosing the winning move in each round.

<<<<<<< HEAD

Live Demo

RPS Clash

Deployed at RPS Clash

47b5686b08db21c6ae3a05c89b098b7c3f648769

Features

• Play Rock Paper Scissors against the computer.
• Real-time scoring system to keep track of user and computer scores.
• Animated bomb confetti when the user wins a round.
• Round counter to show the current round number.
• Dark mode and light mode theme toggle.
• Fully responsive design for optimal viewing on different devices.

Technologies Used

• React.js: Front-end library for building user interfaces.
• Next.js: A framework for building server-rendered React applications.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• TypeScript: A superset of JavaScript that adds static typing to the language.
• Howler.js: A JavaScript library for handling audio and sound effects.
• HTML5 Canvas: For creating the animated bomb confetti effect.

Getting Started

Follow these steps to run the game locally on your machine:

1. Clone the repository to your local machine using the following command:

   git clone https://github.com/SudoKMaar/rps-clash.git
   

2. Navigate to the project directory:

   cd rps-clash
   

3. Install the required dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open your web browser and visit http://localhost:3000 to play the game.

How to Play

1. When you open the game, you will see the "RPS Clash" banner and a "Click me to start" link.
2. Click the link to start the game.
3. You will see the game view with two controller buttons for "Rock," "Paper," and "Scissors."
4. Click on your preferred move (Rock, Paper, or Scissors) to make your selection.
5. The computer will randomly choose its move.
6. The winner of the round will be determined based on the rules of Rock Paper Scissors.
7. The round number and scores will be updated accordingly.
8. An animated bomb confetti will appear if you win a round.
9. The game will continue until you decide to reset or exit.

Scoring System

• User Score: The number of rounds won by the user.
• PC Score: The number of rounds won by the computer.
• Equal: The number of rounds that resulted in a tie.

Theme Toggle

• Use the theme toggle button to switch between light mode and dark mode.

Reset Button

• Click the reset button to start a new game and reset the scores.

License

The game is released under the MIT License.