Jogo da cobrinha moderno com autenticação, ranking global real, multiplayer e visual neon/cyberpunk.
npm installcp .env.example .envEdite o .env com suas credenciais:
MONGODB_URI=mongodb+srv://SEU_USER:SUA_SENHA@cluster0.xxxxx.mongodb.net/snakex?retryWrites=true&w=majority
JWT_SECRET=uma_string_aleatoria_longa_aqui_minimo_32_chars
PORT=3000- Acesse https://cloud.mongodb.com
- Crie um cluster gratuito (M0)
- Em Database Access → crie um usuário com senha
- Em Network Access → adicione
0.0.0.0/0(permite qualquer IP) - Em Connect → escolha "Connect your application" → copie a string e substitua
<password>
npm run devAcesse: http://localhost:3000
| Tecla | Ação |
|---|---|
↑↓←→ ou WASD |
Mover |
SPACE ou 1 |
BOOST |
X ou 2 |
WALL |
C ou 3 |
EXPLODE |
ESC |
Menu |
Mobile: swipe + D-pad virtual
src/
app/
api/
auth/
register/ POST - cria conta
login/ POST - faz login (JWT em cookie HttpOnly)
logout/ POST - remove cookie
me/ GET - retorna usuário logado
leaderboard/ GET - top 20 global do MongoDB
user/sync/ POST - salva score/level/skin após partida
layout.tsx
page.tsx máquina de estados principal
globals.css
components/
game/ GameCanvas, HUD, DeathScreen, TouchControls
multi/ MultiplayerPage, LobbyMenu, WaitingRoom,
MultiGameCanvas, MultiHUD, MultiGameOver
ui/ AuthGate, MenuScreen, LeaderboardScreen, SkinsScreen
lib/
auth.ts JWT sign/verify, cookie helpers
authStore.ts Zustand store do usuário logado
constants.ts Skins, grid, velocidade, XP
db.ts Mongoose connection singleton
engine.ts Lógica do jogo solo
multiRenderer.ts Renderer Canvas multiplayer
renderer.ts Renderer Canvas solo
sound.ts Web Audio API
store.ts (legado - mantido para compatibilidade)
models/
User.ts Schema MongoDB: username, email, hash, score, skins
hooks/
useMultiplayer.ts Socket.io client hook
services/
leaderboard.ts (legado localStorage - substituído pela API)
types/
index.ts Tipos base
multi.ts Tipos multiplayer
- Usuário cria conta (
POST /api/auth/register) ou faz login (POST /api/auth/login) - Servidor retorna JWT em cookie
HttpOnly(não acessível via JS) AuthGatechamaGET /api/auth/meao montar — hidrata o estado global- Ao morrer no jogo,
POST /api/user/syncsalva o score no MongoDB - Ranking lê diretamente do MongoDB via
GET /api/leaderboard
- Socket.io no mesmo processo Node.js que o Next.js (
server.js) - Sala pública: entra em qualquer sala aberta, ou cria uma nova
- Sala privada: gera código de 6 letras para compartilhar
- Colisão clássica: quem bate na outra cobra morre
- Máx 8 jogadores por sala
- Habilidades funcionam no multi (BOOST, WALL, EXPLODE)
- Next.js 15 (App Router) + React 19 + TypeScript
- MongoDB Atlas + Mongoose (dados persistentes)
- JWT em cookies HttpOnly (auth segura)
- Socket.io (multiplayer em tempo real)
- TailwindCSS + Canvas API
- Zustand (estado global)
- Web Audio API (sons sem arquivos externos)
- @tabler/icons-react
- Fontes: Orbitron + Share Tech Mono