Play Need for Speed: Underground 2 (2004) in Chrome and Firefox with WebGPU graphics, Web Audio, up to 120 fps widescreen, controller support, free roam and Online races with friends. Fan project, not
Free, open-source, notarized. One-click Steam and Epic, per-game renderer verdicts from an open database, honest about anti-cheat. No account, no telemetry.
A football career simulator in your browser: decide the key moments on a 2D pitch, build a career from a semi-pro trial to the Golden Ball, and leave a legacy. Free, offline-ready, procedural SVG art.
取自仓库 README
README
正在加载完整 README。 以下为已保存的摘录。
A football career, made your own.
Create a teenage footballer, earn a trial at a semi-professional club and take them all the way to the Golden Ball — then retire into the Hall of Fame and carry on as their child. Free in your browser, and playable offline.
Matches play out on a 2D pitch and stop for your decisions. Every choice shows its chance of success and the attributes, traits and fatigue behind it, and every outcome is explained, so the game teaches its own systems.
Create a teenage footballer, earn a trial at a semi-professional club and take them all the way to the Golden Ball — then retire into the Hall of Fame and carry on as their child. Free in your browser, and playable offline.
The game
Matches play out on a 2D pitch and stop for your decisions. Every choice shows its chance of success and the attributes, traits and fatigue behind it, and every outcome is explained, so the game teaches its own systems.
Always know what to do next
The hub puts the next action first. Needs you lists what is waiting, most urgent first: an injury that needs a recovery plan, your match, transfer talks, press questions and sponsor offers before they lapse, then unspent points. Before you continue, the hub says which weeks will be played, where it will stop and which deadlines would pass on the way; afterwards, a short summary reports what actually happened while the world played on. The calendar lays out the whole season week by week, and nothing ever predicts a result or a team selection in advance.
What you can do
Play the moments that matter. 6–15 key moments a match, depending on your role and form: chances in the box, build-up play, crosses, aerial duels, last-ditch defending and, for keepers, saves and distribution, each a situation drawn on the pitch. Half-time talks with the manager, substitutions and captain's calls.
Grow from a trial to a star. XP from every match, attribute points against age-adjusted soft caps, a 49-skill tree that changes the odds and unlocks new choices, weekly training plans and injuries that need managing. Players peak in their late twenties; pace goes first, experience keeps rising.
Earn your place. Managers pick their eleven for their formation (4-3-3, 4-4-2, 4-2-3-1 or 3-5-2), weighing how well each player fits each position, and the hub explains your selection: your slot and familiarity, who is ahead of you, and what raises or lowers your chance of starting.
Get coached. The coach reads the pattern in your recent key decisions, says which attribute governed the misses and turns it into training sessions. Accept a season goal and the manager may set you a six-week challenge towards it: meet it and their trust grows, miss it and it costs a little, and either way it is written into your Chronicle.
Build a career off the pitch. Contracts with role promises and clauses, agents, scouting interest, multi-step transfer negotiations and loans. Press conferences and a social feed, teammate chemistry, dressing-room groups, culture fit, and a rival from your generation tracked against you.
Live the life. Fame levels, sponsors with obligations, cars, homes and investments, a wardrobe of boots, socks and armbands, signature celebrations that play on the pitch, and daily and weekly cosmetic challenges.
Win everything. Domestic cups, a Champions Cup and a Shield with groups and knockouts, call-ups from Under-19 to senior level, tournaments every two years, and a Golden Ball ceremony.
Leave a legacy. Retire into a Hall of Fame ranking, keep your Moments as replayable clips shared by link, and start again in the same world — former teammates may now be managers — or as your player's child.
A living football world
Six real countries — England, France, Spain, Germany, Italy and Portugal — with their real league pyramids: 52 league groups, 959 clubs and 21,098 players, every regional group and promotion or relegation playoff in the first four tiers, and deeper tiers where a semi-professional start needs them. Clubs and competitions are fictional parodies of their real counterparts, in real towns. Every club has its own procedural crest and three kits, every player a face that ages with them, and the whole world simulates every week in a Web Worker: results, transfers, manager sackings, retirements and youth intakes. See national rules and sources.
Made for every player
Accessible: every screen checked with axe against WCAG 2.1 AA (no serious or critical issues) in light and dark themes; full keyboard play (Space, 1–4, arrows, Escape, ?); screen-reader labels; text size from 85% to 130%; reduced motion; a simulation-only mode; colour-blind-safe kit choice.
Fast: a startup bundle of 80 KB gzipped, with everything else loaded on demand. Mobile Lighthouse performance 86–95 and accessibility 100 on every audited page.
Yours: no ads, no account, no personal tracking without your say-so: anonymous play statistics can be switched off in Settings, and following your play over time is opt-in (privacy). Three save slots in your browser, backup export and import, and offline play after the first visit. All art is procedural SVG and every sound is synthesised on your device.
Easy to find your way: the career is grouped into five sections (Overview, Player, Club, Life and History), each opening with page tabs that never move. On phones a five-slot tab bar and a More sheet replace sideways scrolling, and Back closes the sheet.
Guided: a short tour during your first week and your first match.
How it is built
flowchart LR
subgraph Browser
UI["React UI<br/>routes, screens, tutorial"]
Store["Zustand store"]
Pixi["PixiJS pitch<br/>(lazy)"]
Audio["Howler.js + synthesiser<br/>(after first gesture)"]
end
subgraph Workers["Web Workers"]
World["World worker<br/>weekly and season simulation"]
Saves["Persistence worker<br/>validation and IndexedDB writes"]
Synth["Audio worker<br/>renders sounds"]
end
Engine[("Pure TypeScript engine<br/>seeded RNG · no browser APIs")]
DB[("IndexedDB<br/>3 save slots")]
UI <--> Store
UI --> Pixi
UI --> Audio
Audio --> Synth
Store <--> World
Store <--> Saves
World --> Engine
Saves --> DB
UI -. "match engine, career actions" .-> Engine
A pure engine. Everything that decides results lives in src/engine/: plain, deterministic TypeScript with a seedable RNG and no browser globals or imports (enforced by lint). The same code runs in the UI, in Web Workers and in Node tests, so any career or match replays exactly from its seed.
Workers for heavy work. Season simulation and save validation run off the main thread, with progress and cancellation, so the interface never freezes.
Saves you can trust. Versioned save schema (now 16) with migrations from every earlier version, strict validation of every record, revision checks, and one browser tab per save slot.
Code-split by route. Each screen is its own chunk; PixiJS, the save system, audio and animation features load only when needed.
The match engine is calibrated
The match engine simulates 10,000 matches in its test suite and checks realistic averages: 2.74 goals per match, a clear home advantage, and upsets that become rarer as the reputation gap grows.
pie showData title Results over 10,000 simulated matches (%)
"Home win" : 44.3
"Draw" : 25.2
"Away win" : 30.5
Performance
xychart-beta
title "Lighthouse mobile performance (slow 4G, 4x CPU throttling)"
x-axis ["Title", "Gallery", "Settings", "Moment", "Saves", "World", "Edit", "Wizard", "Career", "Match"]
y-axis "Score" 0 --> 100
bar [95, 94, 94, 95, 95, 93, 92, 91, 88, 86]
Measure
Result
Startup JavaScript
80 KB gzipped (was 173 KB)
Largest route, including the shell
187 KB gzipped (budget 300 KB)
Title page, mid-range phone on slow 4G
interactive in 2.8 s
Desktop Lighthouse
performance 100, accessibility 100
Delivery
flowchart LR
Push["Push to main"] --> Build["build (Linux)<br/>typecheck · build · bundle budget"]
Push --> Checks["checks (Linux)<br/>Prettier · ESLint · release notes · one-season soak"]
Push --> Unit["unit tests<br/>(3 Linux machines)"]
Build --> C["Chromium journeys<br/>(2 Windows machines)"]
Build --> F["Firefox journeys<br/>(2 Windows machines)"]
Build --> W["WebKit journeys<br/>(2 Windows machines)"]
Checks --> Deploy["Deploy to<br/>Cloudflare Pages"]
Unit --> Deploy
C --> Deploy
F --> Deploy
W --> Deploy
Every push to main is formatted, linted, unit-tested, type-checked, played for a full simulated season and built, then played through in Chromium, Firefox and WebKit under the production security headers, with an update from one deployed build to the next, before it deploys. Pull requests run the same checks without deploying. Scheduled workflows go further: a nightly five-season soak replayed twice for identical results, a weekly two-generation career, and weekly performance checks on real late-career saves on desktop and throttled phone profiles. Both GitHub Actions and Cloudflare Pages are free for this public repository. See deploying.
Tech stack
Area
Choice
Language and UI
TypeScript (strict), React 18, React Router
State
Zustand slices over a framework-free engine
Rendering
PixiJS for the pitch, procedural SVG for crests, kits and faces
Styling and motion
Tailwind CSS with shared design tokens, Framer Motion
Storage
IndexedDB via Dexie, versioned schema and migrations
Audio
Howler.js playing sounds synthesised in a Web Worker
Testing
Vitest for the engine, Playwright in Chromium, Firefox and WebKit, axe-core
Delivery
Vite, PWA with offline precache and update prompt, GitHub Actions, Cloudflare Pages
Run it locally
Node.js 22.19 or newer (Node 24 recommended):
npm ci
npm run dev # http://127.0.0.1:5173
npm run typecheck
npm run lint
npm test # Vitest: engine, persistence, workers, audio
npm run build # typecheck, production build, per-route bundle budget
npx playwright install chromium firefox webkit
npm run test:e2e # browser journeys under the production headers
npm run audit # Lighthouse quality targets
npm run soak -- --seasons 1 # play a whole career season and check its invariants
Analytics is off unless the build has a PostHog project key: set VITE_POSTHOG_KEY (and optionally VITE_POSTHOG_HOST and VITE_ANALYTICS_ENV) in .env.local, never committed. Automated browsers never send events. npm run analytics:dashboards creates the PostHog dashboards from docs/ANALYTICS.md with a personal API key; run it locally only.
On Windows PowerShell with blocked script shims, use npm.cmd and npx.cmd. Browser tests start a production preview on port 4173; Lighthouse uses 4180. After changing public/share.svg or the icons, run npm run raster to regenerate their PNG copies.
Project layout
src/
engine/ pure, deterministic simulation: world, match, career, assets
workers/ world simulation and persistence workers
persistence/ save schema, validation, migrations, repositories (loaded on demand)
audio/ synthesiser, rendering worker, Howler player
store/ Zustand slices
screens/ one lazy route per screen
ui/ shell, tutorial, tooltip and shared components
i18n/ every string, English first
platform/ web adapter for files, sharing, storage and more
analytics/ consent, the event allow-list and a small idle-loaded PostHog client
tests/ Vitest suites
e2e/ Playwright journeys and the accessibility sweep
docs/ architecture, decisions, balancing, verification, deployment
public/ icons, share card, production headers
Roadmap
1–3 · Foundations, a living world and the match engine
4 · The career player: attributes, XP, training, skills and ageing
5 · Contracts, agents, transfers, loans and negotiations
6 · Media, relationships, the rival, the dressing room, morale and form
7 · Fame, sponsors, lifestyle, wardrobe, celebrations and challenges
8 · National teams, continental cups, awards, retirement, legacy, the Chronicle and Moments
9 · Edit mode, accessibility, the tutorial, audio and polish
10 · Web release: deployment, offline play, performance and share tags
All artwork is original procedural SVG made in this repository; every sound is synthesised in code. Fonts are self-hosted: Inter and Bebas Neue, both under the SIL Open Font License. Audio playback uses Howler.js (MIT). Details in ASSETS.md.
