60 lines
3.1 KiB
Markdown
60 lines
3.1 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Running the game
|
|
|
|
Open `index.html` directly in a browser — no build step, no server required.
|
|
|
|
```bash
|
|
open index.html
|
|
```
|
|
|
|
There are no tests, no linter, and no package manager.
|
|
|
|
## Architecture
|
|
|
|
Pure vanilla JS/HTML/CSS game. No frameworks, no modules — all files are loaded as classic `<script>` tags and share a single global scope. **Load order matters**:
|
|
|
|
```
|
|
constants.js → atom.js → render.js → game.js
|
|
```
|
|
|
|
### File responsibilities
|
|
|
|
| File | Role |
|
|
|---|---|
|
|
| `constants.js` | Single source of truth for every tunable value (speeds, counts, radii, timing). Edit here first when tweaking gameplay feel. |
|
|
| `atom.js` | `IncomingAtom` class — construction, per-frame movement, docking logic, self-draw. Reads globals from `game.js` (`canvas`, `CX`, `CY`, `anchorPoints`, `docks`, `gameOver`) and calls `burst()`, `updateCystinstein()`, `triggerGameOver()` from `render.js`/`game.js`. |
|
|
| `render.js` | All canvas drawing: background, central molecule, anchor points, particles, click effects, and the Cystinstein side-panel. Also owns `burst()` (particle spawner) and `updateCystinstein()`. Reads `ctx`, `cysCtx`, `CX`, `CY`, `anchorPoints`, `particles`, `clickEffects`, `docks` from `game.js`. |
|
|
| `game.js` | Game state, `requestAnimationFrame` loop, input handling, leaderboard (localStorage), screen transitions (intro → game → game-over → intro). Declares all shared mutable globals consumed by the other files. |
|
|
| `index.html` | CSS + HTML structure only. Houses the intro screen, attract screen, game-over overlay, leaderboard table, and the kidney-shaped Cystinstein side panel (inline SVG border). |
|
|
|
|
### Global state (declared in `game.js`, used everywhere)
|
|
|
|
`canvas`, `ctx`, `cysCanvas`, `cysCtx`, `CX`, `CY`, `score`, `docks`, `gameOver`, `gameStarted`, `incomingAtoms`, `anchorPoints`, `particles`, `clickEffects`, `stars`.
|
|
|
|
### Screen flow
|
|
|
|
```
|
|
Boot → Intro ──(30 s idle)──→ Attract (highscore)
|
|
←─(any key/click)─
|
|
│
|
|
└─(START clicked)──→ Game loop
|
|
│
|
|
(6 docks)──→ Game-over overlay
|
|
│
|
|
(Play Again)──→ Intro
|
|
```
|
|
|
|
### Leaderboard persistence
|
|
|
|
Stored in `localStorage` under key `sysdigger_leaderboard` as a JSON array of `{name, score}` objects, capped at 10 entries, sorted descending by score.
|
|
|
|
### Key design constraints
|
|
|
|
- Anchor points activate (turn red) only when the incoming atom **enters the visible viewport**, not at spawn time — see `IncomingAtom.update()` in `atom.js`.
|
|
- Difficulty ramps automatically: `spawnInterval` decreases by `SPAWN_DIFFICULTY_STEP` each spawn, floored at `SPAWN_INTERVAL_MIN`.
|
|
- The custom cursor is a data-URL SVG pill embedded directly in CSS on the `canvas` selector.
|
|
- The Cystinstein side panel uses an inline SVG with a bezier kidney path for its border; the interior atom-cluster is drawn on a separate `<canvas id="cystinstein-canvas">` by `updateCystinstein()` in `render.js`.
|