Slither Clash

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild "Slither Clash" as a single-page, mobile-first 3D snake.io-style arena game. Use Three.js for a perspective top-down camera and a dark circular arena: nearly black/navy background with subtle exponential fog, a large dark blue-gray circular floor, a fine blue grid, and a glowing cyan circular boundary. The camera should follow the local snake, positioned high and behind it at an oblique angle, looking down at the snake and arena floor; keep the floor/grid visually centered around the player as the player moves.

Populate the arena with roughly 170 floating glowing pellets. Pellets are small faceted spheres in varied pastel neon colors (cyan, pale blue, lavender, pink, purple, yellow, mint), with emissive glow, slight vertical bobbing, and slow rotation. Keep the pellet count replenished as pellets are eaten. Snakes are chains of glowing spherical segments: a larger emissive head sphere and smaller body spheres behind it, with a color-coded skin. Include the local player and six named bots (Viper, Orbit, Mamba, Drift, Razor, Comet) in solo play; bots use distinct bright colors, wander toward nearby pellets and away from other snakes, and sometimes boost. New player snakes start at length 12; bots start around length 10–15. The visible screenshot should read as a sparse neon field with several snakes and many floating pellets.

Core gameplay: each snake continuously moves forward and gradually turns toward a target heading. The player steers with a virtual thumb joystick on touch devices; dragging sets the heading. On desktop, mouse position controls steering relative to the screen, and holding the left mouse button or Space activates boost. Add a large circular BOOST button on touch screens. The normal player speed is about 23 world units/sec and boost is about 36; bots have slightly slower randomized speeds. Eating a pellet when the head overlaps it grows the snake and adds score (pellet energy contributes at least one segment, with score roughly 10 per growth unit). Boosting is faster but drains one body segment about every 0.16 seconds and drops small colored pellets behind; do not allow the snake to shrink below length 8. Snakes are constrained by the circular arena boundary and turn back inward at the edge.

Collision rules are central: a snake head colliding with any snake body kills that snake, including collision with its own body/tail. Ignore the first few segments of an opponent and the near-tail portion for self-collision as in a typical snake game. Give newly spawned/revived snakes about 1.8 seconds of invulnerability. On death, hide the head, remove the body, and burst the former body into colored glowing pellets. If the local player dies, show a centered dark translucent modal/panel saying "You were cut off", the score, and an instruction to respawn; include a Respawn button and hint that R also respawns on desktop. A local kill of another snake awards bonus score. Respawning places the snake at a clear random location, resets it to length 12 and score 0, and grants brief invulnerability.

Create a responsive glassmorphism HUD over the canvas with safe-area padding. At the top, show four translucent rounded stat cards in a 2-column arrangement: SCORE, LENGTH, RANK (for example 1 / 7), and STATUS. Status should display Alive, Boosting, Dead, Hosting, Online, or similar based on state. Use large bold white values and muted blue-gray uppercase labels. Include a translucent Leaderboard panel listing up to eight snakes sorted by effective length/score, with each name colored to match its snake. Include a translucent Room panel with a Room heading, connection state, player name input, skin-color select (Blue, Rose, Green, Gold, Purple, Teal), Create Room button, room-code input and Join button, and when hosting a Friend Code with Copy and Share actions. Both room and leaderboard panels need side arrow tabs that collapse them to clear screen space, especially on small phones. On phones position the leaderboard and room panel above the bottom controls and make the panels narrower; use rounded dark panels, light blue borders, and subtle blur/shadow.

Show an initial centered instruction panel titled "Slither Clash" with text explaining to eat pellets, avoid every body, drag the left stick and hold boost on phones, plus the multiplayer room-code hint and a Respawn button. Hide it during active play, but show the death/connection messages when appropriate. Touch controls should be visible only for coarse-pointer/touch devices: a translucent circular joystick base with a blue knob at lower left and a large pink/red circular BOOST button at lower right. Support safe-area insets and prevent page scrolling.

Implement multiplayer behavior consistent with the UI: use PeerJS browser peer-to-peer connections. A player can create a room and receive/share a peer ID as the friend code; other players enter it to join. The host runs the authoritative simulation, including bots, pellets, movement, collection and collisions, and broadcasts snapshots roughly every 80 ms. Clients send heading/active/boost input roughly every 50 ms and render the host snapshots. Support small rooms of approximately 2–4 human phones plus bots. Let players choose and persist their name and skin color. If a client disconnects, show a connection message and fall back to a solo bot game; the room remains hosted on the host. Add lightweight Tone.js synth sounds for pellet collection and impacts, initialized after user interaction. Keep the implementation as one HTML page with CSS and JavaScript modules loaded from CDN, with no build step. Expose window.getGameState() and window.setGameState() for live/debug state inspection and adjustment.