🎮 Serpent Clash — Multiplayer Snake Game

Serpent Clash is a fast-paced, multiplayer snake game where players compete to outmaneuver and outgrow their rivals in a dynamic online arena. Control your serpent with precision, dodge enemies, and strategically cut them off as you slither your way to the top of the leaderboard.

The game is built using Vue.js on the frontend and Golang on the backend, utilizing modern WebSocket communication and an authoritative server model to maintain a fair and synchronized game state. With server reconciliation and interpolation, players experience smooth gameplay and accurate movement.

🎥 Demo - https://youtu.be/hHJq1ubGmuw

🔑 Key Features

• ⚔️ Multiplayer with low-latency WebSocket communication
• 🛡️ Authoritative Server Model to ensure fairness and consistency
• 🔄 Server Reconciliation for accurate game state even under lag
• ✨ Player Movement Interpolation for smooth rendering of remote players
• 🐍 Dynamic Snake Rendering using multiple coordinates and mouse input
• 🌐 Efficient Collision Detection powered by Quad Tree structures
• 🧩 Entity Component System (ECS) Architecture for efficient resource management and maintainability

🚀 Future Enhancements

• 🍎 Food Generation & Snake Growth
  Introduce dynamic elements where snakes grow by consuming food, adding a new layer of strategy and progression.
• 🏆 Leaderboard & UI Enhancements
  Improve the overall player experience with a more interactive UI and detailed leaderboard statistics to showcase top players.

🧱 Backend ECS Architecture

🧍‍♂️ Entities

• Player
• Food

🧩 Components

• Expiry
• Input
• Network
• PlayerInfo
• Position
• Snake

⚙️ Systems

• Collision
• Food despawn
• Food spawn
• Movement
• Network
• Player spawn
• Quad tree

🔗 Entity-Component Relationships

• Player -> Input, Network, PlayerInfo, Snake
• Food -> Expiry, Position

✅ TODO Tracker

• Serve Vue files from backend
• POC: WebSocket server
• Connect/disconnect player
• Show statistics on client-side
• POC: Render snake based on multiple coordinates (client-side)
• POC: Player movement based on mouse coordinates (client-side)
• Design authoritative server based on ticker
• Server-side player movement
• Adopt class-based design for client-side
• Add support for ping calculation
• Add client-side prediction for smoother movement (client-side) (removed)
• Add server reconciliation for handling lag (client-side)
• Add interpolation for smoother movement (client-side)
• Make world finite with a larger dimension
• Add camera logic
• Add collision detection
• Create debug menu (e.g., teleport feature)
• Adjust player speed on mousedown / mouseup
• Improve snake spawn logic (consider world radius)
• Refactor into driver classes for better readability
• Detect collisions with world boundaries
• Re-architect backend using ECS
• Optimize collision detection using Quad Tree
• Improve collision detection logic (beyond head-to-head only)
• Create spawn system for snake with world-awareness
• Migrate from HTML 2D canvas to Pixi.js renderer engine
• Create dashboard & API for server metrics
• Implement food spawning functionality with world-awareness
• Randomized food generation
• Food consumption and snake growth logic
• Compensate speed boosts by reducing snake length
• Implement leaderboard
• Chat system using SSE and channels
• Client UI design improvements

⚡ Optimizations

• Switch to binary data formats instead of JSON for faster network communication
• Switch to gorilla websocket
• Explore Pixi.js to improve performance

📚 Resources

• https://www.gabrielgambetta.com/client-server-game-architecture.html

🔌 Dependencies

- Websocket - https://github.com/lesismal/nbio

• Websocket - https://github.com/gorilla/websocket