Rock Paper Scissors Game (React + Phaser)

This React + Phaser project was originally a final project in one of my high school computer science classes. At the time, the entire game code was written in a single JavaScript file and was running on an online IDE. A few years after starting university, I learned better coding practices and how to structure projects using Object-Oriented Programming (OOP). Wanting to improve my skills, I revisited this project to refactor and turn it into something much greater.

🎮 Project Overview

This is an interactive Rock Paper Scissors game built using React.js and Phaser.js, featuring two game modes:

• Normal Mode – A faithful recreation of the classic Rock-Paper-Scissors game we play in real life.
• Insane Mode – A unique twist that introduces trivia-based challenges and game-changing mechanics!

The game includes animated sprites, dynamic sound effects, and engaging trivia challenges in Insane Mode to keep players on their toes.

🚀 Features

🎯 Core Gameplay

• Classic Rock-Paper-Scissors Mechanics – Play against an AI opponent.
• Smooth Animations – Custom sprite animations enhance gameplay.
• Real-Time HUD Updates – Displays scores, rounds, and game status.
• Panic Music Mode – Background music dynamically changes when losing.

🤯 Insane Mode Enhancements

• Trivia Challenge – Win a round? Answer a geography trivia question to keep your point.
• No Tie Games – A tie automatically counts as a loss, making the game tougher.
• Screen Shake Effect – The screen shakes when losing a round for added immersion.

🛠️ Technologies Used

• React.js – Handles UI components and game state management.
• Phaser.js – Manages rendering, animations, physics, and audio.
• JavaScript (ES6) – Uses Object-Oriented Programming (OOP) for maintainability.

📂 File Structure

🔹 `components/`

• HUD.js – Displays player/opponent scores, round number, and messages.
• Player.js – Manages player details, score, and rounds won.
• Opponent.js – Handles opponent's score and game logic.

🔹 `config/`

• PhasorConfig.js – Configures Phaser game settings.

🔹 `core/`

• gameLogic.js – Core game logic for Rock-Paper-Scissors.
• normalMode.js – Implements classic Rock-Paper-Scissors mechanics.
• insaneMode.js – Adds trivia challenges and tie-loss conversion.

🔹 `scenes/`

• InitializingScene.js – Initial screen with loading animation and name entry.
• StartScene.js – Game introduction with background music.
• MenuScene.js – Mode selection screen (Normal or Insane Mode).
• GameScene.js – Handles Normal Mode gameplay.
• InsaneGameScene.js – Implements Insane Mode with trivia.
• EndScene.js – Displays the final score and replay options.

🔹 `utils/`

• sharedConstants.js – Stores centralized assets (images, sprites, music).
• utilityFunctions.js – Reusable helper functions for game logic.

🔧 Installation & Setup

📌 Prerequisites

Ensure you have the following installed:

• Node.js (v16 or later)
• npm or yarn

📥 Clone the Repository

```sh git clone https://github.com/SansarSharma/RPS_Remastered.git cd RPS_Remastered ```

🔽 Install Dependencies

```sh npm install ```

▶️ Run the Game Locally

```sh npm start ``` The game will be available at http://localhost:3000/.

🎯 How to Play

1. Click “Sign In” when the game loads.
2. Enter your username to personalize your experience.
3. Press “Press Start” when the start scene appears.
4. Choose your game mode – Normal Mode or Insane Mode.
5. Enter the number of rounds you want to play.
6. Make your move – Click Rock, Paper, or Scissors.
7. Watch the animations showing your move and the opponent's move.
8. In Insane Mode: Answer trivia questions correctly to keep your points.
9. Game ends after the set number of rounds.
10. Check your record: Click the Scoreboard button after the game.
11. Play Again? Click “Play Again” and choose your game mode.