Slyther.io

Inspiration We were inspired by the classic browser game slither.io — a simple yet addictive multiplayer snake game that took the internet by storm. We wanted to recreate that experience with a modern visual upgrade: richer snake rendering, glowing food orbs, dynamic kill feeds, and a polished UI — all running entirely in the browser with no backend required.

What it does Slyther.io is a browser-based snake survival game where you control a snake, eat glowing food orbs to grow longer, and eliminate other players by making them crash into your body. The game features:

A massive circular world (radius 6000) with a seamless hexagonal grid background 60+ AI bots with smart behaviors — wandering, chasing prey, evading predators, and coiling around food 3 Boss snakes with high mass and aggressive AI Speed boost mechanic that drains your length over time Glowing pulsing food orbs and rare special glow orbs worth bonus points Real-time leaderboard, kill feed, minimap, and survival timer A custom skin builder where you pick colors to design your own snake Persistent stats: high score, total kills, games played, longest survival 🎵 Procedural Music Engine — a Web Audio synthesizer that reacts to your gameplay in real time with dynamic BPM, bass patterns, percussion, reverb, and a breathing filter effect 🎹 Piano Sound Effects — eating, killing, and boosting each trigger unique piano chord tones with reverb tails 🎛️ Beat Energy Visualizer — an animated ring around the minimap that pulses and glows with the music energy level

How we built it The entire game is built with vanilla JavaScript and the HTML5 Canvas API — no frameworks, no game engines. Key systems include:

A spatial hash grid for efficient collision detection between snake heads and thousands of body segments A segment chain system with spacing constraints to make snake bodies flow smoothly HSL-based dynamic coloring per segment to create gradient shading along the snake body Camera system with smooth zoom scaling based on snake mass A bot AI state machine with states: wander, chase, evade, and coil LocalStorage persistence for saving player stats and skin preferences across sessions Particle system for boost trail effects and death explosions GameSynthesizer — a fully custom Web Audio synthesizer with oscillators, a breathe lowpass filter that sweeps automatically, a feedback reverb chain, kick and snare percussion scheduling, and piano tone generation using detuned triangle and sine oscillators GameStateAnalyzer — tracks kill streaks, orbs eaten, nearby threats, and player mass over time to drive music intensity dynamically Dramatic event triggers — boss nearby detection cuts the music to a low-BPM tension drone; a kill spree flips it instantly to high-energy frenzy percussion

Challenges we ran into

Performance with thousands of entities — rendering 8000+ food orbs and 60+ snakes at 60fps required culling off-screen objects, spatial hashing for collisions, and reducing draw calls Smooth snake movement — making segments follow each other naturally with consistent spacing at variable speeds took careful tuning of the chain constraint system Bot AI balance — bots needed to feel alive and threatening without being unfairly dominant; tuning aggression ranges, reaction timers, and boost thresholds was tricky Kill feed overlapping — the kill feed entries and HUD stats required careful vertical spacing to avoid clashing at the bottom of the screen Boost glow effect — achieving a skin-colored aura that radiates outward without drowning the snake's body shape required multiple iterations Preventing audio feedback loops — the reverb delay chain required careful feedback gain capping below 1.0 and a lowpass filter on the delay output to prevent runaway resonance and audio blowup Syncing music energy to gameplay — mapping game events like kills, boosts, and nearby threats to audio parameters smoothly without jarring transitions took careful gain ramping and energy decay tuning

Accomplishments that we're proud of

A fully playable slither.io clone running in a single HTML file with zero dependencies Smooth 60fps gameplay even with 8000 food orbs, 60 bots, and thousands of snake segments on screen A custom skin builder with a live snake preview canvas The spatial hash collision system reducing O(n²) checks to near O(1) per frame Boss snakes that feel genuinely intimidating with massive size and high-speed chase behavior A fully procedural music engine built from scratch using Web Audio API — no audio files, no libraries, every sound generated in real time The breathe filter effect — a sinusoidal lowpass sweep that speeds up automatically when game energy is high, making the audio feel alive and reactive Dramatic music cuts on boss encounters and kill sprees that make big moments feel cinematic

What we learned

How to build a performant real-time game loop entirely on Canvas without any game engine abstractions Spatial hashing as a practical solution to broad-phase collision detection How small details — eye positioning, segment shading, glow radius — have a huge impact on how polished a game feels The importance of deltaTime normalization for consistent gameplay across different frame rates How bot state machines with randomized timers can simulate surprisingly believable behavior Web Audio API synthesis from scratch — building oscillator chains, reverb feedback loops, dynamic gain envelopes, and beat schedulers without any audio library How to map real-time game state to audio parameters smoothly — energy decay curves, gain ramping, and filter sweeps that feel musical rather than mechanical

What's next for Slyther.io

Real multiplayer — replacing bot snakes with WebSocket-connected real players using a Node.js server Power-up orbs — speed boosts, shields, and magnet effects that attract nearby food More skin options — animated skins, gradient patterns, and emoji faces Mobile joystick controls — a proper on-screen joystick for touch devices instead of tap-to-steer Ranked leaderboard — a global persistent leaderboard with player accounts Expanded music system — more instrument layers, dynamic chord progressions, and region-based themes that change as you move across the map Seasonal events — themed maps and special boss snakes for holidays

Built With

• canvas
• css3
• html5
• javascript
• medo
• vanilla