Agar.io Clone

A fully multiplayer, real-time Agar.io clone featuring beautiful fluid softbody physics, dynamic themes, and interactive game mechanics.

Features

• Real-Time Multiplayer: Powered by Socket.io and Node.js for ultra-low latency entity synchronization.
• Softbody Physics: Custom-built softbody rendering using Matter.js and HTML5 Canvas quadratic curves. Player cells squish, jiggle, and bounce dynamically on collision!
• Interactive Hazards (Viruses):
  • Vivid parrot-green viruses that act as permanent hazard zones.
  • Rendered with identical softbody liquid physics as players.
  • Distinctive dashed membranes and aggressively pulsing nuclei.
• Dynamic Aesthetic: Choose between a sleek Dark Mode or a vibrant, natural Light Mode. The UI is built with React and features glassmorphism panels.
• Beautiful Visuals: Every entity uses curated, vibrant pastel colors (hsl) paired with 3D radial specular gradients.

Tech Stack

• Frontend: React, Vite, HTML5 Canvas API
• Backend: Node.js, Express.js
• Networking: Socket.io
• Physics Engine: Matter.js

Running Locally (Development)

1. Install Dependencies

   npm install
   cd client && npm install

2. Start the Backend Server (Port 3000)

   npm run dev
   # Or run 'node index.js' manually

3. Start the Frontend Vite Server (Port 5173)

   cd client
   npm run dev

Running Locally (Production)

The production build compiles the Vite frontend and serves it directly through the Node.js Express server on a single port.

1. Build the Application

   npm run build

   This command automatically compiles the React application into the client/dist directory.

2. Start the Server

   npm start

   The server will host both the WebSocket connection and the static frontend on http://localhost:3000.

Deployment

This application is configured for easy deployment on platforms like Render, Heroku, or Railway. Simply push the repository; the root package.json contains postinstall, build, and start scripts that most PaaS providers will automatically detect and execute.