Web Games

A home for ridiculous browser games with serious leaderboards. Players create one account (unique name + password) that works across every game and every device; scores, unlocked levels and funny rank titles are saved to it in a SQLite database.

Game	Path	Tech
🐄 Cow vs UFO	games/cow-vs-ufo/	Three.js, ES modules, Web Audio
🥊 Office Brawl	games/office-brawl/	Three.js fighting game, AI, Web Audio

Getting started

Requires Node.js 18 or newer.

npm install
npm run dev

Then open http://localhost:5173/. npm run dev runs everything: the pages, the API in api/ (served by a small Vite plugin) and a local SQLite database at data/web-games.db, which is created automatically.

A plain static server (python3 -m http.server) won't work: the game needs Vite to resolve its imports, and the player system needs the API.

The dev server also listens on your local network, so you can open the printed Network URL on a phone on the same Wi-Fi to try the touch controls.

Players, saves and the database

• Accounts are created on the home page before playing: a player name (3–16 letters, numbers or _, starting with a letter, unique regardless of case) and a password (8–72 characters). Passwords are hashed with scrypt (random salt) and never stored or logged in plain text.
• Log in on any device with the same name and password. Each device gets its own session token (only its SHA-256 hash is stored); logging out ends only that device's session. Five wrong passwords lock the account for five minutes, and errors never reveal whether the name or the password was wrong.
• Each finished run is stored in scores. The per-game progress row keeps best score, highest unlocked level (the game offers Continue), games played, wins and total snacks. The leaderboard is built from progress.
• Rank titles (src/shared/titles.js) go from Confused Calf to Supreme Bovine Overlord, are earned live in-game as your score climbs, and appear on the home page and leaderboard.

Endpoint	Description
POST /api/users { username, password }	Create a player (409 if the name is taken)
POST /api/session { username, password }	Log in on this device
DELETE /api/session (Bearer token)	Log out this device
POST /api/password (Bearer token)	Set or change the password
GET /api/username-check?username=	Live availability check
GET /api/me (Bearer token)	The player and their saved progress
POST /api/scores (Bearer token)	Save a finished run, update progress
GET /api/leaderboard?game=cow-vs-ufo	Top 10 players for a game (office-brawl too)

The database is SQLite via libSQL:

• Locally: a SQLite file at data/web-games.db (git-ignored).
• In production: Turso (hosted SQLite). Set TURSO_DATABASE_URL and TURSO_AUTH_TOKEN. Tables are created on first request.
• On Vercel without Turso: a temporary SQLite file in /tmp. The site works, but players and scores reset whenever Vercel recycles the function.

Deploying to Vercel

The repo is ready for Vercel (vercel.json): Vite builds the pages into dist/, and each file in api/ becomes a serverless function.

To make saves permanent:

1. Create a free database at https://turso.tech and copy its URL (libsql://…) and an auth token.
2. In Vercel, go to Project → Settings → Environment Variables and add TURSO_DATABASE_URL and TURSO_AUTH_TOKEN for Production.
3. Redeploy.

Project structure

web-games/
├── index.html              # Home page: game list, player signup, leaderboard
├── api/                    # Vercel serverless functions (users, scores, leaderboard)
├── server/                 # Shared API code: SQLite (libSQL) client + schema, HTTP helpers
├── src/
│   ├── home/               # Home page script + styles
│   └── shared/             # Session/API client and rank titles, used by home and games
├── public/thumbnails/      # Game card images
├── vite.config.js          # Multi-page build + dev API middleware
├── vercel.json
└── games/
    └── cow-vs-ufo/
        ├── index.html      # Game page: canvas + all menu/HUD markup
        └── src/
            ├── main.js             # Entry point (requires a player session)
            ├── styles.css          # Menus, HUD, touch controls
            ├── game/               # Game (orchestrator), GameLoop, GameState, Levels
            ├── player/             # Cow model, Player, PlayerController (input), PlayerPhysics
            ├── enemies/UFO.js      # UFO model, tractor beam and attack state machine
            ├── world/              # Terrain, Environment, Props, World, Obstacles, Collectibles, Critters
            ├── systems/            # Collision, FunnyEvents, Score, Audio, Settings
            ├── camera/             # Third-person follow/orbit camera
            ├── ui/                 # UIManager, MainMenu, HUD, PauseMenu, GameOverScreen, TouchControls
            └── utils/              # Effects (particles + floating text), materials, math

To add another game: create games/<name>/index.html, add it to build.rollupOptions.input in vite.config.js and to GAMES in server/http.js, then add a card to the home page.

---

🐄 Cow vs UFO

You are a cow. A UFO wants you. Eat enough snacks to clear each level before the aliens beam you up.

How to play

Action	Keyboard / mouse	Touch
Move	W A S D / arrow keys	Cow-nose joystick (gets happier the harder you push)
Jump	Space	BOING! button (YEET! / HOP! / WHEE!…)
Moo (scares chickens)	M or F	MOO button (says something new every time)
Rotate camera	Drag the mouse, or Q / E	Drag on the screen
Pause	Esc or P	⏸ button

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗