Slither.io Web Game

A real-time multiplayer web game inspired by Slither.io, built with PIXI.js for the frontend and Node.js with WebSockets for the backend.

🎮 Game Features

• Real-time multiplayer gameplay - Play with multiple players simultaneously
• Snake mechanics - Control your snake, eat food to grow, and avoid other snakes
• AI opponents - Battle against AI-controlled snakes for more dynamic gameplay
• Food system - Collect food pellets to grow your snake and increase your score
• Collision detection - Advanced physics system with collision detection for snake interactions
• Smooth rendering - High-performance 2D graphics powered by PIXI.js
• Responsive controls - Mouse-based movement controls for precise snake navigation

🏗️ Architecture

The project consists of two main components:

Client (Frontend)

• Framework: PIXI.js for 2D graphics rendering
• Build Tool: Vite for fast development and building
• Language: Vanilla JavaScript (ES6 modules)
• Features: Real-time rendering, input handling, asset management

Server (Backend)

• Runtime: Node.js
• WebSocket: Native WebSocket implementation for real-time communication
• Game Engine: Custom game world implementation with physics simulation
• Data Format: MessagePack for efficient binary data transmission

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd slither(pixi)

2. Install client dependencies

   cd client
   npm install

3. Install server dependencies

   cd ../server
   npm install

Running the Game

1. Start the server

   cd server
   npm start

   The server will start on http://localhost:3000

2. Start the client

   cd client
   npm run dev

   The client will be available at http://localhost:5500

3. Open your browser and navigate to the client URL to start playing!

🎯 How to Play

1. Start the game by clicking the "Start" button
2. Control your snake by moving your mouse cursor - your snake will follow the mouse
3. Eat food pellets (small colored circles) to grow your snake and increase your score
4. Avoid other snakes - hitting another snake's body will cause you to die
5. Survive and grow to become the largest snake on the field!

🛠️ Development

Project Structure

├── client/                 # Frontend application
│   ├── src/
│   │   ├── game.js        # Main game logic and rendering
│   │   ├── main.js        # Application initialization
│   │   ├── network/       # WebSocket communication
│   │   ├── utils/         # Utility functions (physics, assets, etc.)
│   │   └── images/        # Game assets and sprites
│   ├── index.html         # Main HTML file
│   └── package.json       # Client dependencies
├── server/                 # Backend application
│   ├── worlds/            # Game world implementations
│   ├── objs/              # Game object classes
│   ├── core/              # Core game systems
│   ├── index.js           # Server entry point
│   └── package.json       # Server dependencies
└── README.md              # This file

Key Components

• Game World (server/worlds/slither-io.js): Main game logic including snake management, food spawning, and collision detection
• Snake Manager (server/objs/snake.js): Handles snake creation, movement, and physics
• Client Game (client/src/game.js): Frontend rendering and game state management
• WebSocket Handler (client/src/network/socket.js): Real-time communication with server

Building for Production

Client:

cd client
npm run build

Server: The server runs directly with Node.js - no build step required.

🔧 Configuration

Environment Variables

Create a .env file in the server directory:

PORT=3000
USE_SSL=FALSE

Game Settings

Key game parameters can be adjusted in server/worlds/slither-io.js:

• food_limit: Maximum number of food pellets
• snake_min: Minimum number of AI snakes
• World dimensions and physics parameters

🐛 Troubleshooting

Common Issues:

1. Port conflicts: Ensure ports 3000 and 5500 are available
2. WebSocket connection issues: Check that both client and server are running
3. Performance issues: Monitor browser console for rendering performance warnings

Debug Mode:

• Enable debug logging by uncommenting console.log statements in the server code
• Use browser developer tools to monitor WebSocket connections and game performance

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by the original Slither.io game
• Built with PIXI.js for high-performance 2D graphics
• Uses Node.js and WebSockets for real-time multiplayer functionality

---

Have fun playing and developing! 🐍✨