Inital commit

2026-07-22 00:34:09 -05:00
commit 0b24de2767
24 changed files with 2691 additions and 0 deletions
@@ -0,0 +1,76 @@
+# slither.ts 🐍
+
+A full **slither.io clone** written in TypeScript — authoritative Node.js + WebSocket
+server, Canvas 2D client, zero asset files (every texture is generated at runtime,
+every sound is synthesized with the Web Audio API).
+
+## Run it
+
+```bash
+npm install
+npm run build
+npm start
+```
+
+Then open **http://localhost:8080** in your browser. Open more tabs (or other
+machines on your LAN) for more human players — the arena is automatically
+filled to 12 snakes with AI bots.
+
+For development: `npm run dev` builds and starts the server.
+
+## Features
+
+- **Smooth movement** — 30 Hz authoritative simulation, 15 Hz snapshots,
+  client-side dead reckoning (the client runs the same movement model every
+  frame) with decaying snapshot-correction offsets, plus dt-based exponential
+  camera smoothing
+- **Grow by eating glowing pellets** scattered across the arena
+- **Boost** with `SPACE` (or hold left mouse / second touch finger) — moves
+  ~2× faster while burning your length and shedding pellets from your tail
+- **Eliminations** — make others crash into your body; you cannot collide with
+  yourself
+- **Death explosions** — dead snakes burst into glowing pellets along their
+  whole body for everyone else to harvest
+- **Live leaderboard** (top 10, updates in real time) + score / rank / kills HUD
+- **Instant respawning** — click or hit `Enter`, no countdown
+- **Large circular arena** with a glowing red border that kills on contact
+- **Minimap** showing the entire map, all players and your position
+- **Slither.io-style background** — dark grey gradient, repeating hexagon grid,
+  faint glowing hexagon outlines, soft ambient light + vignette
+- **AI bots** with pellet-seeking, obstacle avoidance and hunting behaviour
+- **Main menu** with nickname entry, **settings** (volume, quality, minimap),
+  and **fullscreen** support — all persisted to localStorage
+- **Sound effects** (eat, boost whoosh, death explosion, UI clicks) and
+  **particle effects** (eat sparkles, boost bubbles, death bursts)
+
+## Controls
+
+| Input            | Action                          |
+| ---------------- | ------------------------------- |
+| Mouse / touch    | Steer (snake follows cursor)    |
+| `SPACE` / click  | Boost (drains length)           |
+| `Enter`          | Instant respawn when dead       |
+
+## Project layout
+
+```
+shared/      constants + protocol shared by client & server
+server/      world simulation (movement, collisions, bots) + HTTP/WS server
+client/src/  renderer, background, minimap, particles, audio, UI, input
+public/      index.html, style.css and the compiled client JS
+scripts/     smoke.mjs — end-to-end WebSocket smoke test
+```
+
+## How it works
+
+The server simulates everything at 30 ticks/s and broadcasts compact JSON
+snapshots at 15 Hz (snake bodies as flat integer arrays; pellets as incremental
+add/remove deltas after a one-time full list). The client does **not** render
+the snapshots directly — it runs the same movement model locally every frame
+(dead reckoning): your own snake is steered straight from your input angle
+with the server's turn-rate limit (zero perceived input latency), remote
+snakes use headings estimated from snapshot deltas. Each snapshot captures
+the prediction error as per-point correction offsets that decay smoothly over
+the following frames, so server authority is kept without any visible steps.
+Collision and eating use a uniform-grid spatial hash, so the sim stays fast
+with a full arena of long snakes.