Serpent Clash is a fast-paced, real-time multiplayer snake game where players compete to outmaneuver and outgrow their opponents. Players control serpentine avatars, navigating a dynamic battlefield while dodging opponents. The game leverages modern WebSocket communication for smooth, real-time player interaction and incorporates client-side prediction to ensure responsive gameplay even in high-latency situations.
The game is built with a combination of Vue.js for the client-side and Go for the backend, following an authoritative server model to ensure fairness and consistency in gameplay. With real-time movement tracking and competitive elements, Serpent Clash challenges players' reflexes and strategic thinking as they slither to the top of the leaderboard.
Demo - https://youtu.be/hHJq1ubGmuw
Key Features:
- Real-time multiplayer with WebSocket communication
- Smooth player movement with client-side prediction and server-side validation
- Dynamic snake rendering based on multiple coordinates and mouse input
- Comprehensive player stats displayed on the client-side
- Authoritative server design ensuring fair and consistent game state across all clients
- Server Reconciliation to handle server-side lag for better synchronization
- Player Movement Interpolation for smooth display of other players' actions
- Expanding the Game World to create larger, more immersive arenas
- Camera Logic for more intuitive navigation
Future Enhancements:
- Collision Detection for player and object interactions
- Food Generation & Snake Growth mechanics to introduce dynamic game elements
- Leaderboard and UI Enhancements for better player experience
- Serve vue files from backend
- POC - web socket 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 smooth and snappy player movement (client-side) (for now removed this)
- Add server reconciliation to fix any server-side lag (client-side)
- Add interpolation for smooth other player movement (client-side)
- Make world as finite and with bigger dimension than current one
- Add camera logic
- Add collision detection logic
- Create debug menu with features like teleport etc
- Increase and decrease player speed on mousedown and mouseup events respectively
- Improve snake spawn coordinates by considering world radius
- Re-arch classes and create driver classes for better code readability and maintainability
- Compensate snake speed by decreasing snake length
- Detect collision with world boundary
- Generate food on random coordinates
- Food consumption logic and snake growth logic
- Create chat system using SSE and channels
- Leaderboard
- Client UI design
- Use of binary format instead of json
- Stop rendering when tab is switched
- Separate goroutine for calculating/processing game logic (if server struggle at current tick-rate)
- Use of Pixi HTML 5 renderer engine
- Websocket - https://github.com/lesismal/nbio