Bounce — the full game

Build a complete, playable game called **Bounce** that runs from `index.html`. It is a
horizontal puzzle-platformer about carrying momentum with a rolling red ball, and it has
**four levels**, played in sequence as a single run. You may split CSS and JavaScript into
`style.css` and `game.js`, but there must be no build step.

The player must be able to start from the title screen, clear all four levels in one run and
see a Game Complete screen with the final score. Running out of lives at any point produces
Game Over and then a fresh title screen. Implement the four levels and the systems named
below, and nothing else: no water, size changes, pumps, moving enemies, moving platforms,
power-ups, level select, passwords or a fifth level.

## Controls and the central rule

There are three inputs:

- roll left: Left Arrow, A or numpad 4
- roll right: Right Arrow, D or numpad 6
- bounce: Up Arrow, W, Space or numpad 2

Prevent those keys from scrolling the page while the game has focus. Holding a direction
accelerates the ball. Releasing it does not stop immediately; friction removes its speed over
roughly half a second. Direction changes still work in the air, but at reduced strength.

There is **no jump button and no instant jump impulse**. Bounce is applied only when the ball
lands. Every bounce is the same height: if bounce is held at the moment of landing, the ball is
launched to its full bounce height — about 3 tiles — whether it was standing still or rolling
flat out. Landing without bounce held makes it settle quickly instead.

**Momentum is horizontal only.** A run-up buys distance, never height. Holding bounce through
a series of landings keeps the ball bouncing at that same full height while its horizontal
speed carries it along; going faster makes each hop longer, not taller. Do not implement
variable jump height, a charge-up, or a chain that builds height over consecutive landings.
Apart from the bounce pad described below, every wall the player can clear, they can clear
from standing.

## Fixed-step ball physics

One tile is 8 logical pixels. The ball is a circle exactly 1 tile in diameter and has one state
only. Use an accumulator with a fixed simulation timestep; rendering may use
`requestAnimationFrame`, but physics must be identical at different refresh rates.

These values, in tiles and seconds, are a starting point — tune them until it feels right:

| Parameter | Value |
|---|---:|
| gravity | 22 t/s² |
| terminal fall speed | 14 t/s |
| ground acceleration | 18 t/s² |
| maximum roll speed | 6 t/s |
| ground friction when no direction is held | 12 t/s² |
| air control | 0.4 × ground acceleration |
| landing restitution when bounce is not held | 0.35 |
| bounce height | 3.0 tiles |
| bounce pad launch height | 6.0 tiles |

Derive every launch velocity from its target height and gravity rather than hard-coding a
speed. The ball should settle quickly when bounce is not held.

Resolve circle-versus-solid-tile collisions one axis at a time, horizontal first and vertical
second, without corner snagging, sinking, tunnelling or leaving the world. There are no slopes.
Spikes may fill their tile visually, but their lethal hitbox must be a smaller region inside it,
so a clean bounce over a floor spike is never frame-perfect.

Add only two ball effects: a small squash/stretch based on impacts and speed, and a roughly
0.4-second expanding-fragment burst on death. Effects must not alter collision geometry.

## Objects

Every level is built from these:

- **Solid block**: normal collision surface.
- **Spike**: the only hazard. Contact bursts the ball and costs one life.
- **Hoop**: an open ring, collected on overlap. Each level holds exactly 6 and every one is
  required. Each awards 100 points and stays collected after death.
- **Checkpoint**: collected on overlap. It awards 200 points once, becomes visibly active
  and clears the previous active checkpoint. Respawn at the latest active checkpoint; if none
  was reached in this level, respawn at the level spawn. Each level holds exactly 2.
- **Crystal ball**: one optional pickup per level, off the critical path. It awards 1,000
  points and one life up to the maximum of 5, then stays collected after death.
- **Exit door**: two tiles tall. It is closed, visibly closed and impassable while any hoop in
  the current level remains. When that level's counter reaches 0 it visibly opens; touching the
  open door clears the level.

Two more surfaces enter the game one at a time, and each must be visibly distinct from a plain
solid block:

- **Bounce pad**: a solid surface that launches the ball to 6 tiles — twice the normal bounce
  height — on every landing, whether or not bounce is held. It is the only thing in the game
  that goes higher than a normal bounce. **First appears in level 2.**
- **Crumbling block**: solid and visibly cracked. Roughly half a second after the ball first
  lands on it, it collapses with a visible tell and stops being solid; about three seconds
  later it comes back. Collapsing must never make a level unwinnable or strand the ball.
  **First appears in level 3.**

Level 1 contains neither. Level 2 introduces bounce pads, with at least one on the critical
path. Level 3 introduces crumbling blocks, with at least one crossing on the critical path.
Level 4 uses both and is the hardest level in the game.

## Lives, deaths and the run

Start a run with 3 lives, to a maximum of 5. **Lives carry from level to level** — a crystal
collected in level 2 still helps in level 4.

On death, play the complete burst before decrementing and respawning. Reset position and
velocity, but preserve the current level's collected pickups and checkpoint state. Starting a
new level resets hoops, checkpoints and the crystal for that level, and never resets lives or
score. At 0 lives, show Game Over briefly, then return to the title screen with a completely
fresh run; nothing from the failed run is preserved.

## Score

The score is an 8-digit, zero-padded running total that accumulates across the whole run, not
per level. Award 100 per hoop, 200 per checkpoint, 1,000 per crystal ball, 500 for each level
cleared, and 1,000 for each remaining life once — when level 4 is cleared. The Game Complete
screen must show the final score.

## Screen and camera

The camera viewport is 16×16 tiles — 128×128 logical pixels — scaled up crisply to suit a
desktop browser. Every level is exactly as tall as the viewport and several screens wide, so
the camera scrolls horizontally only. Follow smoothly while keeping the ball near the
horizontal centre, clamp to the level bounds and never reveal outside the map. The camera must
not visibly jitter.

Keep a single HUD bar fixed below the 128×128 world viewport so it never hides a map row. It
contains only: one small ball icon per remaining life, the current level number, the number of
hoops remaining in this level and the 8-digit score, with the score aligned to the right. Do
not add objective text, a minimap, tutorial popups or a pause menu.

## The levels are yours to design

Define all four levels as data — an array of tile maps in the source, parsed at load — rather
than as scattered hard-coded objects, and verify each level's object counts in your parsed
maps. Design them yourself, subject to these constraints:

- Every level must be **genuinely completable** by a competent player on a keyboard, and every
  jump it asks for must be one a single full-height bounce actually makes, unless a bounce pad
  is the intended route. Play each one through in your head move by move before you call it
  done.
- **Leave room.** Space hazards generously — several clear tiles between spikes and after every
  landing — so a player arriving at speed has time to react and stop. Nothing frame-perfect,
  no leaps of faith, no blind drops onto a hazard, no obstacle that has to be taken at exactly
  one speed.
- **Pace the whole game, not just each level.** Level 1 opens on flat ground with no hazard on
  the first screen, so rolling and bouncing can be learned safely, and stays the gentlest of
  the four. Each later level opens with a safe stretch, introduces its new surface somewhere
  forgiving before it matters, and ends harder than it began. The last stretch before level 4's
  exit is the hardest thing in the game.
- Every gap in a floor is floored with spikes rather than bottomless.
- In each level the six hoops sit on the critical path, the crystal ball takes a deliberate
  detour — a high ledge or a side alcove — and is never required, and the two checkpoints bank
  progress in front of that level's two hardest stretches.
- Every area is escapable, and a respawn never places the ball inside a solid or a hazard.
- The four levels should read as four different places, not one corridor rearranged.

## Screen flow and presentation

The title screen contains only the game name, "Press Space to Start" and a one-line control
hint. Space starts a fresh run at level 1. Clearing a level shows a brief Level Complete card
— the level just cleared and the running score — which continues to the next level on Space.
The flow is:

```text
Title -> Level 1 -> Level 2 -> Level 3 -> Level 4 -> Game Complete -> Title
             └───────────┴──────────┴──────────┴────> Game Over -> Title
```

Make the world flat, geometric, high-contrast and readable at the small logical resolution.
Use solid fills, no textures or gradients, and at most a one-logical-pixel outline. Give each
level its own palette so it is visibly a new place; the player ball must be red, circular and
immediately distinguishable from every other object in all four. Choose the rest of the visual
design yourself. Sound is out of scope.

## Build order

Four maps plus a whole game is a lot to write, so build it in an order that is playable at
every step: the physics, the objects, the HUD and the screen flow first, then level 1 end to
end, then levels 2, 3 and 4 with their new surfaces. Keep the map data compact and write long
files in chunks. All four levels are required — do not stop at a demo of the first one.

## Completion checklist

Before finishing, read the implementation back and check all of these:

- rolling has inertia and reduced air control;
- every ordinary bounce reaches the same height, from standing and at full speed alike, and
  only a bounce pad goes higher;
- speed changes how far a bounce travels and never how high;
- each of the four levels has exactly 6 hoops, 2 checkpoints and 1 crystal ball, and its exit
  stays shut until its own hoop counter reaches 0;
- hoops, checkpoints and the crystal reset when a new level starts, and lives and score do not;
- bounce pads launch to 6 tiles; crumbling blocks collapse, come back, and never strand the
  ball or make a level unwinnable;
- spikes burst the ball, consume lives and respawn at the correct checkpoint in the correct
  level;
- the optional crystal grants a life and 1,000 points and is off the critical path in all four;
- running out of lives in any level reaches Game Over and a fresh title state;
- clearing level 4 shows Game Complete with the exact final score, life bonus included;
- the camera traverses each level without jitter or out-of-bounds space;
- the simulation behaves the same at different frame rates;
- all four levels can be finished without a frame-perfect input anywhere.

It must be genuinely playable and completable with keyboard controls.