A battle is decided by its rules, not by its animation.
Numerical Battle Lab simulates the entire match first, then brings its events to life. Change the playback speed, and the presentation changes. The result does not.
🎮 How to Play
No account, deck-building process, or character editor is required. Every contender comes from a fixed card collection.
- Choose your contenders. Search or select a card for the blue side and another for the red side.
- Set their levels. Adjust each card from Lv. 1 to Lv. 100 and compare the resulting attributes and Battle Power (BP).
- Start the duel. Watch the simulated match at Slow, Fast, or Instant speed. Explore the round-by-round log and post-battle summary afterward.
Play now →
✨ Inside the Arena
🎨 Twelve Visual Editions
Use the header Visual Theme selector to switch editions, even during playback. It supports keyboard arrows and touch.
Open Browse Twelve Themes beneath the header to compare compact material previews and descriptions. This optional catalogue starts collapsed; selecting a preview applies the same theme as the native selector and marks the current choice.
| Edition | Visual character |
|---|
| Collector | Beveled metal, enamel, and twelve distinct V3 rank silhouettes, with clear certification marks and long SSS labels. |
| LUMEN | A circular optical dial with fine measurement marks and a porcelain finish. |
| FOLIO | A square print frame, central diamond, and warm paper materials. |
| PULSE | A rounded oscilloscope cartridge, waveform, and dark signal surfaces. |
| NOCTURNE | Deep-blue survey plates, silver constellation crests, a coordinate instrument, and brief star-trace feedback. |
| SUMI | Cool-white paper, broken ink contours, open margins, a stamped controller, and short ink-cut feedback. |
| ARCADE | Bright molded panels, original stepped pixel medals, tactile buttons, and discrete score-display feedback. |
| VERDANT | Chalk and terracotta specimen boards, branching leaf crests, organic section shapes, and brief unfolding feedback. |
| BRUTAL | Board-marked concrete, heavy black type, hard offset shadows, signal-orange controls, and chamfered block crests with barcode rank marks. |
| LACQUER | Black-red lacquer, gold-line borders, Songti names, and round lacquer-box crests with gilded rings and cloud strokes. |
| BLUEPRINT | White drafting grid, cobalt line work, monospaced figures, and machined-part crests with bolt circles and dimension lines. |
| AURORA | Frosted panels over a polar night, lavender action light, and hexagonal ice-crystal crests whose branches grow with rank. |
LUMEN, FOLIO, and PULSE retain their restored V1 overall forms, original progression marks, and matching card/result medals, together with larger rarity marks and the current layout and interaction improvements. Each edition keeps its own materials and blue/red team colors.
- Your choice is remembered locally. The first visit defaults to Collector. If browser storage is blocked, switching still works for the current session.
- Your duel stays intact. Switching preserves cards, levels, Match Seed, HP, playback speed, log following, and statistics. Combat rules and replay behavior are unchanged.
- Only the active crest is mounted. Cards and results share a bounded string cache, with separate paint namespaces. The catalogue uses small CSS previews, not hidden card trees. The four new editions use local CSS and original procedural SVG, with no extra image or font downloads.
- Keyboard playback remains usable. Start, new-match, and replay entries restore lost focus after playback; a focus choice made during the battle takes priority. Invalid input and playback errors return to a visible control.
💎 The Numbers Behind the Battle
The outcome comes from level, rarity, the card's fixed attributes, and seeded combat randomness—not from a hidden score that decides who should win.
| System | What it means |
|---|
| Level | Nonlinear growth from 1 to 100, scaling the four core attributes. |
| Rarity | Twelve explicit multipliers, applied alongside level growth. |
| Combat attributes | HP, Attack, Defense, Speed, Accuracy, Evasion, Critical Rate, Critical Damage, Penetration, Lifesteal, Regeneration, and Volatility. |
| Match Seed | A reproducible random sequence for the same cards and levels. |
| Battle Power (BP) | A read-only evaluation of final attributes—not damage, not a win probability, and not a rule for selecting the winner. |
Rarity, at a Glance
| Rarity | Multiplier | Rarity | Multiplier |
|---|
| C | 1.00× | S | 2.90× |
| C+ | 1.15× | SS | 3.75× |
| B | 1.35× | SSS | 4.90× |
| B+ | 1.60× | SSS Collector | 6.60× |
| A | 1.90× | XS | 9.10× |
| A+ | 2.30× | XS Collector | 13.20× |
For perspective: the level × rarity factor of a Lv. 55 XS Collector card is close to that of a Lv. 100 C card. Their actual matchup still depends on card attributes and combat events.
⚙️ What Happens in a Turn?
Regeneration → Hit / Dodge → Critical Check → Defense & Penetration
→ Damage → Lifesteal → Next Action
Speed influences who acts first. The engine uses a seeded pseudorandom generator throughout the battle; matches are simulated before their event logs are replayed. If neither contender is defeated by the 120-round limit, the remaining HP proportions determine the result, with a possible draw.
The four scaled core attributes use a level curve and an explicit rarity multiplier:
g(L) = exp(0.02143 × L + 0.0002253 × L²)
scale = g(level) × rarityMultiplier
Each core attribute also has its own base value and fixed card-specific shape. The unscaled secondary attributes continue to describe each card's combat style.
A base damage term, before critical hits and random variation, is:
ATK² / (ATK + DEF × max(0.05, 1 − PEN))
BP is separate from this battle calculation. It estimates a card's general offensive and survival capability using fixed reference conditions and the final attributes. It never enters the combat engine as a multiplier or overrides a seeded result.
🚀 Run Locally
This is a static HTML/CSS/JavaScript project with no runtime packages or build step. Clone or download the repository, then either open index.html directly or start its included local server. The server and verification commands require Node.js and npm; CI uses Node.js 22.
npm run serve
Open http://127.0.0.1:8774/. The UI uses Chinese text; this English README documents the project without changing its interface language.
From the repository root:
npm test # Node.js regression tests
npm run verify # Static checks, regression tests, acceptance, and BP audit
The optional real-browser gate is separate: npm run test:browser. It uses Playwright (validated with 1.60.0) and a locally available Chromium browser. Reuse an existing installation with NBL_PLAYWRIGHT_MODULE (absolute package directory) and, if needed, NBL_BROWSER_PATH (browser executable). Alternatively install that pinned development tool in a directory outside this repository and point the module variable there. No browser tooling is loaded by the game or required for the core Node gates.
Set NBL_EVIDENCE_DIR to an external evidence directory; otherwise it creates one in the system temporary directory. The script starts and stops its own local server. NBL_BASE_URL can target a deployed copy. It exercises actual replay, keyboard focus, persistence failures, theme switching, reduced motion, and responsive states; it also writes screenshots and a JSON report. The explicitly labelled DRAW fixture and simulation instrumentation exist only in intercepted test responses. Browser downloads, reports and dependencies stay outside the Pages upload tree.
| Path | Responsibility |
|---|
index.html | Browser entry point |
src/cards.js | Fixed 96-card collection and rarity definitions |
src/power.js | Level scaling, final attributes, and Battle Power |
src/battle.js | Seeded simulation and event generation |
src/app.js | Card selection, presentation, and replay |
styles.css · themes.css | Original Collector materials, twelve scoped editions and accessible controls |
assets/ | Preserved Collector/LUMEN art, FOLIO paper and PULSE polymer backgrounds |
tests/ · scripts/ | Regression tests, acceptance checks, and local tooling |
The GitHub Actions verification workflow runs on pushes and pull requests to main. Its checks protect the numeric model, deterministic output, and the separation between simulation and visual replay.
The project supports keyboard interaction, responsive layouts, and prefers-reduced-motion. Reduced motion changes how events are shown, not how they are calculated.
📚 Design & Source Notes
- Design system — twelve visual editions, shared architecture, material provenance, layout, motion and accessibility rules.
- Product definition — what the game does, and the boundaries it deliberately keeps.
- Agent guidance — project-specific engineering and verification constraints.
Same cards. Same levels. Same seed. Same battle.
The arena is built to make the numbers visible—not to change them behind the scenes.
Website analytics
The public website uses Cloudflare Web Analytics for aggregate page visits and performance. The beacon loads only on seiya058904.github.io; local previews and offline copies do not load it. No game saves, journal entries, map contents, or form values are passed to the analytics integration. Statistics start after deployment and do not recover earlier traffic. See Cloudflare's privacy policy.
