Serpent Clash

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

TODO:

• 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
• Detect collision with world boundary
• Improve collision detection logic, right now always considered as a head to head collision
• Compensate snake speed by decreasing snake length
• Generate food on random coordinates
• Food consumption logic and snake growth logic
• Create chat system using SSE and channels
• Leaderboard
• Client UI design
• Add prometheus to capture different metrics

Optimizations

• 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

Resources

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

Dependencies

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