Bounce — Level 1

Build a complete, playable prototype called **Bounce — Level 1** that runs from `index.html`.
It is a horizontal puzzle-platformer about carrying momentum with a rolling red ball. 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 the game, collect all six hoops, reach the exit and see a
Level Complete screen. Three deaths must produce Game Over and then return to a fresh title
screen. Implement only this one level and the systems named below: no water, size changes,
pumps, moving enemies, power-ups, bounce pads or special surfaces, level select or extra levels.

## 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.
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 |

Derive the launch velocity from the bounce 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 and persistent level state

- **Solid block**: normal collision surface.
- **Spike**: the only hazard. Contact bursts the ball and costs one life.
- **Hoop**: an open ring, collected on overlap. There are 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, respawn at the level spawn. There are exactly 2.
- **Crystal ball**: one optional pickup, 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
  remains. When the counter reaches 0 it visibly opens; touching the open door completes the
  level.

Start with 3 lives. On death, play the complete burst before decrementing and respawning. Reset
position and velocity, but preserve collected pickups and checkpoint state. 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.

The score is an 8-digit, zero-padded running total. Award 100 per hoop, 200 per checkpoint,
1,000 for the crystal ball, 500 for clearing the level and 1,000 for each life remaining when
the level ends. The Level 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. The 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 number of hoops remaining 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 level is yours to design

Define the level as data — a tile map in the source, parsed at load — rather than as scattered
hard-coded objects, and verify the object counts in your parsed map.

Design it yourself, subject to these constraints:

- It 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. Play it 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 it.** Open ground first, so rolling and bouncing can be learned safely; then a wall or
  two; then a gap; then a hazard sequence. Difficulty should rise steadily, and the last stretch
  before the exit should be the hardest thing in the level.
- The one gap in the floor is floored with spikes rather than bottomless.
- 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.
- The two checkpoints bank progress in front of the two hardest stretches.
- Every area is escapable, and a respawn never places the ball inside a solid or a hazard.

## 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. The flow is:

```text
Title -> Level 1 -> Level Complete
                  -> 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. The player
ball must be red, circular and immediately distinguishable from every other object; choose the
rest of the visual design yourself. Sound is out of scope.

## Completion checklist

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

- rolling has inertia and reduced air control;
- every bounce reaches the same height, from standing and at full speed alike;
- speed changes how far a bounce travels and never how high;
- all 6 hoops can be collected and open the previously solid exit;
- spikes burst the ball, consume lives and respawn at the correct checkpoint;
- both checkpoints work and the second overrides the first;
- the optional crystal grants a life and 1,000 points and is off the critical path;
- three deaths reach Game Over and a fresh title state;
- level completion calculates and displays the exact final score;
- the camera traverses the whole level without jitter or out-of-bounds space;
- the simulation behaves the same at different frame rates;
- the level can be finished without a frame-perfect input anywhere.

It must be genuinely playable and completable with keyboard controls.