🎮 Slither.io clone

Mael KERICHARD - Cody ADAM

• 📁 Architecture
• 😆 Usage
• Communication Client - Server
  • Websocket
  • Data transfer
• Chunking system
• Project milestones
  • MVP
  • Improvement 1
  • Improvement 2
  • Improvement 3
  • Improvement 4
  • Improvement 5

📁 Architecture

The project is divided into 4 packages (mono-repo architecture):

packages/
├── client
├── server
└── shared
└── load-test

😆 Usage

Play now at https://pixselve-school.github.io/SR-projet/ !

You can use the deployed server url sr.mael.app.

If you want to run the server locally, you can use the following command:

# Install the dependencies
npm install

# Run the server, client and shared packages all at once
npm run dev

# Run the e2e tests for 50 players (requires the server to be running)
npm run test

For more information, see the README in each package.

• Client
• Server
• Shared
• Load Test

Communication Client - Server

Websocket

Data transfer

Server -> Client:

type SceneDTO = {
  width: number;
  height: number;
  players: {
    body: {
      x: number;
      y: number;
    }[];
    id: string;
    name: string;
    color: string;
    score: number;
    isSprinting: boolean;
  }[];
};

type OrbDTO = {
  points: number;
  color: string;
  id: string;
  position: {
    x: number;
    y: number;
  };
};

type ScoresDTO = {
  name: string;
  score: number;
}[];

Client -> Server:

type PlayerMoveDTO = {
  angle: number;
  isSprinting: boolean;
};

Chunking system

Project milestones

MVP

• Players are dots
• Players collect dots to gain points
• Move towards mouse
• Client - Serverr architecture (Websocket)
• Client sends inputs each frames
• Server sends game state each frames

Improvement 1

• Player grow in length when collecting dots
• Add a dash while pressing space bar
• Dash consume poing (and length) drop orbs
• Menu to choose a nickname and connect to the server
• Option to change the server url
• Center the camera on the player

Improvement 2

• Collision between players to kill them
• Client side position interpolation
• Death drop dots depending on your current score
• Timemanager (client) to handle the game loop FPS / TPS

Improvement 3

• Add a leaderboard
• Send leaderboard on a less frequent basis
• Send to the client only the relevant informations
• Dynamic player size depending on score

Improvement 4

• Make the game look good
• Animation on sprinting

Improvement 5

• Add chaos testing for e2e tests (also serve as bots)
• Chunk for collision detection performance + smaller payload sent to the client