INKBOUND: ink-painting pixel runner

Using Vanilla JavaScript, Canvas 2D and the Web Audio API, create **INKBOUND**: one self-contained HTML file in which a sumi-e ink painting comes alive as a 16-bit pixel-art runner.

A tiny ink-drop spirit races along a black brush stroke that a painter's hand paints in real time. A rival painter attacks in indigo, and the spirit survives by **jumping, sinking into the ink, absorbing small ink and stepping back**.

- No external assets, libraries, fonts, audio files or network requests. All art, text and sound are generated in code.
- The page boots into a self-playing attract demo that loops seamlessly. Any control input starts a playable run.

## 1. Rendering
- Draw everything into a `Uint8Array` of palette indices at a fixed **160x90**. Convert it to RGBA once per frame.
- Copy that frame to a full-window canvas at the **largest integer scale** that fits, centred, with black margins. Use `imageSmoothingEnabled = false` and CSS `image-rendering: pixelated`. Account for `devicePixelRatio`.
- Integer pixels only. No anti-aliasing, gradients, `shadowBlur` or rotation. Slanted lines are pixel stair-steps, and gradients are Bayer-dithered bands.
- Simulate at a fixed **60 Hz** with an accumulator, and render with `requestAnimationFrame`.
- Zero allocation in the loop: typed arrays, fixed pools and pre-built text arrays.

## 2. Palette and colour roles (29 colours; roles never borrow each other's colours)
| Role | Colours | Used only for |
|---|---|---|
| Ink | `#121110 #272523 #46423d #6d675e` | the hero, the road, the painter's ink, afterimages |
| Paper white | `#fbf8f0` | eyes, sleeve, text on seals |
| Paper / dusk sky | `#ece4d6 #e2d3bf #d9bda3 #c9a58e` | sky bands, paper |
| Mountain washes | `#bdb19a #a39a90 #857d76` | mountains, pines, speed streaks, sketch lines |
| Sun | `#f7dcae #f2c48a #e9a870` | a pale sun disc |
| Seal red | `#c8302a #8a1e1b` | the hero's scarf and every UI stamp |
| **Indigo = danger** | `#1c2a78 #3150c8 #9fb6ff` | **every** threat, warning and rival sleeve, with a light `#9fb6ff` rim on top. Nothing else is ever indigo |
| Brush / scroll rod | `#c9a24a` (band), `#efd6a0 #a8844c` (hair) | brushes and the scroll rod |
| Hands (CC0 sprite) | `#572020 #ffce96 #c2675b #ffe4ab #de9176 #f5bb8c` | hands only |

## 3. Scene
- **Sky**: dithered bands from pale paper at the top to peach dusk at the horizon (y = 44), with paper-fibre specks and a pale sun.
- **Mountains**: two parallax ridges of flat washes on 512 px repeating height strips. Each has a one-shade-darker ridge line, small wash-coloured pine silhouettes and a thin dithered mist band.
- **Speed streaks**: wash-coloured streaks whose count and length grow with speed.
- **Road**: an 8–9 px black brush stroke, top at y ≈ 46 with a gentle sine undulation (±3 px).
  - Ragged dry-brush edges and bristle streaks in `#272523`.
  - Ink drips fall from its underside.
  - It turns dry and streaky over the last 16 px before the painter's brush at x = 138, because it is being painted right now.

## 4. The hero (B `#121110`, h `#46423d`, e `#fbf8f0`)
```
RUN body (+2 alternating legs)   JUMP            CURL (apex)     SINK (only the crown shows)
...BB.......                  ....BB......    ....BB......    ...BBBBBB...
....BB......                  .....BB.....    ...BBBB.....    .BhBBeBBeBB.
....BBB.....                  ....BBBB....    ..BhBBBB....    BBBBBBBBBBBB
...BBBBB....                  ...BBBBBB...    .BhBeBBeB...
..BhBBBBB...                  ..BhBBBBBB..    .BBBBBBBB...
.BhBBeBBeB..                  ..hBBeBBeB..    .BBBBBBBB...
.BBBBBBBBB..                  ..BBBBBBBB..    ..BBBBBB....
.BBBBBBBBB..                  ...BBBBBB...    ...B..B.....
..BBBBBBB...                  ...B....B...
                              ..B......B..
```
- **Scarf**: 7–9 px of seal red streaming behind with a 2-frame flutter. It lies flat on the ink while sinking.
- **Pose registers**: bounce, lean, squash and stretch (repeat or drop one or two body rows), widening and a 1 px eye shift.
  - Ease the registers, but quantize them on a ~12 fps clock so the motion reads as hand-animated sprites.
  - Take-off, landing and each action snap to their pose instantly.
- Draw the eyes in a second pass so body pixels never overwrite them.

## 5. Hands and brushes (outside the painting: drawn on top, never collide)
Hands use "Pixel Hand Gesture Cursor Asset" by Lintnaya (CC0). They are drawn at 2x. Legend: `a #572020, b #ffce96, c #c2675b, d #ffe4ab, e #de9176, f #f5bb8c, g = e`.
```
FIST (palm21 rows 6-15)      POINTING FINGER (palm13 rows 2-15)
......aaaaaaa...             ..........a.....
.....abcbcbada..             .........ada....
....acbcbcbcea..             .........aea....
...afcecececda..             .........ada....
...aecdcdcdcea..             .......aacea....
...adecececba...             .....aacbcba....
....adbdbfgea...             ....acbceccba...
....afddbdfa....             ...afceccdbca...
.....afddfa.....             ...aecdcecbbba..
.....aaaaaa.....             ...adececcebba..
                             ....adbfbfeea...
                             ....afddbdfa....
                             .....afddfa.....
                             .....aaaaaa.....
```
- **Brush**: 4 px wide and the **same width from handle to tip**. From the tip:
  - 2 rows 2 px wide, then 2 more soaked rows (ink `#121110`, or indigo `#1c2a78` for the rival, with a light left edge)
  - 4 rows of light hair (`#efd6a0` with a `#a8844c` right edge)
  - 2 rows of gold band
  - 4 rows of black lacquer handle going into the fist
- **Painter**:
  - The fist sits at the bottom right, holding the brush straight up. The brush tip touches the underside of the road at x = 138, and the hand bobs 1 px.
  - A white robe sleeve (with a `#e2d3bf` fold, a `#a39a90` rim and a `#572020` outline) runs off the bottom edge.
  - Over a gap, the painter lifts the brush 6 px and drips.
- **Rival**: the same fist flipped vertically, brush pointing down, with an indigo sleeve (`#3150c8`, `#1c2a78` shade, `#9fb6ff` rim) running off the top edge. The eraser uses the pointing finger, flipped to point down.

## 6. Actions (play-mode controls in brackets)
- **Jump** [W / Space / ↑]:
  - Short wind-up squash (4 ticks in the demo, 2 in play), then launch at vy −3.4 with gravity 0.2.
  - Stretch on the way up, curl at the apex, and land with a squash plus an ink splash.
- **Double jump** [W again in the air]: the spirit bursts into **10 ink dots orbiting its eyes** (one dot red) for 9 ticks, hanging in place, then re-forms and relaunches at vy −3.0.
- **Sink** [S, hold]:
  - The spirit melts into the road. Use the 3-row SINK shape drawn 1 px lower, so only the crown and eyes show above the ink.
  - Ripples spread on the ink surface. It lasts at least 24 ticks, or as long as S is held.
  - Emerge with a splash on release. Sinking over a gap falls. Jumping from a sink is allowed.
- **Absorb** [D]:
  - Opens a rotating ink vortex in front of the spirit for 14 ticks in the demo, 28 in play.
  - Any small or medium arrow or flicked droplet that comes within 1.5 px is sucked in. Its indigo particles turn to ink on the way, the spirit swells and a white **ABSORB** seal with red text stamps.
  - Each absorb extends the window by 5 ticks (max 30). A miss gives a 12-tick cooldown.
  - The giant bolt, strokes and blots cannot be absorbed.
- **Back step** [A]:
  - Bursts backwards (dx starts at −3.6 and decays ×0.8 for 10 ticks, clamped at −20 px), leaving fading afterimages.
  - Holds for 24 ticks in play (18 in the demo), then drifts back at 0.45 px/tick.
- **Early-press assist**: in play, the correct move pressed up to **24 ticks early** is held and fired on that attack's ideal tick, so good players always get last-moment dodges.

## 7. Threats (all indigo)
- **Arrows**: small (9 px), medium (13 px) and a **giant bolt** (24 px, which shakes the screen as it passes). They fly in diagonally from the top right.
  - Each has a stair-stepped shaft, a head, fletching, a light top rim and a dotted trail.
  - An arrow that hits the road thunks in and quivers, then blinks out.
  - In play, a small blinking indigo "!" seal marks where an off-screen arrow will enter.
- **Flicked droplets**: 3x3 indigo drops. They are aimed from the rival's brush tip at the top right toward the spirit's head height, and splash when they hit the road.
- **Rival strokes**: the rival hand drops in at the right edge while a blinking dotted indigo guide shows the lane.
  - It then **sweeps right to left at 20 px/tick**. Its brush lays a 4–5 px indigo stroke with a light top rim, dark streaks and a splatter trail.
  - The stroke stays harmful for its burn time (capped at 19 ticks in play). Then it dries away through dithered holes over 12 ticks while the hand lifts off.
  - Lanes are screen-space lines at a height above the road that follows the ground under the hero. A stroke can have a slope and x-limits.
- **Blot**: the rival hand hangs at the top right while a drop swells on its brush tip.
  - When the target spot scrolls under it, the drop falls in 8 ticks and splats. It spreads into a puddle of radius 9 on the road (2–3 px tall, rim `#9fb6ff`).
  - It holds, then dries from 40 to 70 ticks after landing.
- **Eraser**: the pointing finger hovers while a dotted indigo outline marks a stretch of road.
  - When that spot reaches x ≈ 132, the finger rubs, growing a 60 px **gap** in the road (±3 px per tick) and scattering paper crumbs.
- The hands never hurt. Only ink on the paper does.

## 8. Attack patterns (ticks at 60 Hz; L = 0 in the demo and 32 in play)
| # | Attack | Answer | Demo script (spawn → dodge) | Length |
|---|---|---|---|---|
| 0 | Medium arrow at head height | Absorb | t 20 spawn, arrive t 68+L → absorb t 64 | 110 |
| 1 | Rival flicks 4 droplets (t 20, 23, 26, 29) | Absorb | arrive ~t 64+L → absorb t 59 | 120 |
| 2 | Low stroke just above the road | Jump | t 20 warn (25+L ticks), burn 27 → jump t 46 | 115 |
| 3 | High stroke at head height | Sink | t 20 warn (25+L), burn 29 → sink t 46 for 36 | 120 |
| 4 | Blot on the road | Jump | t 10 start, spirit reaches its centre at t 70+L → jump t 59 | 130 |
| 5 | Eraser gap + medium arrow | Jump, then double jump over the arrow | t 12 start, gap reached t 58+L; arrow t 47 → jump t 52, double t 77 | 170 |
| 6 | X of two diagonal strokes centred on the spirit (arms from 22 to 2 px above the road) | Sink | warn 25+L and 29+L → sink t 44 for 44 | 125 |
| 7 | Giant bolt aimed at mid-body | Back step | t 20 spawn, arrive t 70+L → back step t 60 | 130 |
| 8 | Chapter end | – | t 0 red **END** seal + gong; t 20–49 a wooden scroll rod rolls right → left over blank paper showing **CHAPTER N** in ink with a red number and a dry-brush underline; t 50 reset the world (next chapter); t 50–79 unroll left → right | 80 |

- **Demo**: the patterns play in order 0 → 8 forever, and every dodge happens at the **last possible moment**.
- Seed every random choice from a fixed seed at each chapter reset, and reset every scroll offset, so every demo chapter is pixel-identical (one chapter ≈ 19.0 s).
- The demo starts on the unrolling scroll.

## 9. Close call, hits and judgment
- Each tick, measure the real gap between the spirit's box and each threat:
  - arrows: sample the front 60 % of the shaft and subtract a radius
  - strokes: per column
  - blot: box-to-box
- **Close call**: fires at the closest approach when the minimum gap is **≥ 0 and ≤ 4 px** (≤ 10 in play). A blot is judged only once the spirit has fully passed it.
- On a close call:
  - freeze for 5 ticks
  - for 18 ticks the whole background turns into a **pencil sketch**: region edges in `#857d76` on blank paper, light hatching on the mountains, fading out with Bayer dither
  - a red **CLOSE CALL** seal stamps above the spirit, first drawn larger for an impact frame. On the title screen, stamp it below the spirit so it never covers the title
- **An attack judged as dodged can never hurt afterwards.**
- **Hit (play)**: an arrow must reach 1 px into the spirit's box, and a stroke or blot 2 px. Falling into a gap also costs a life and bounces the spirit back up.
  - A hit costs one ink-drop life, triggers a 7-tick freeze, a shake and red sparks, then 110 ticks of blinking invulnerability.
  - In play, the giant bolt lands 3 px further ahead than in the demo, so a back step always clears it.

## 10. Play mode
- **Start**:
  - Any control rolls the scroll over the demo into "CHAPTER 1 / READY".
  - The HUD shows a red score seal, a combo "x2…x9", "BEST" with the best score, a small red seal tally (close calls + absorbs) and three ink-drop lives.
- **Chapter 1**: the fixed order. A **hint seal** above the spirit names the answer ("D ABSORB", "HOLD S", "W JUMP", "W AGAIN", "A BACK"; button names on touch devices). It appears 44 ticks before the ideal moment, turns red and blinks in the last 10 ticks, and vanishes once the right key is pressed.
- **Chapter 2+**: shuffle the 8 attacks and add one extra random attack per chapter (9, 10, … capped at 16). The same attack never comes twice in a row. Chapters are endless.
- **Pace**: speed starts at 3 px/tick and rises 0.15 per chapter (capped at 4.0). A cleared chapter refills one life (max 3).
- **Score**:
  - distance (speed × 0.05 per tick)
  - +100 × combo per close call or absorb (the combo resets on a hit)
  - +500 × level on each new chapter
- **Best score**: kept in `localStorage` inside try/catch. It is saved the moment it is beaten (every 0.5 s), when the page is hidden or closed, and at game over.
- **Game over**: "THE INK DRIED", the score, and "NEW RECORD!" if the best at the start was beaten. Press to retry; after 15 s idle, return to the demo.

## 11. Input and devices
- **Keyboard**: W/Space/↑ jump, A/← back, S/↓ sink (hold), D/→ absorb, M mute, H hides the title in the demo.
- **Embedded use (http://itch.io iframe)**:
  - On pointerdown, call `window.focus()`, and only `preventDefault()` for touch pointers, or the iframe never gets keyboard focus.
  - Hints are per device: keyboard users always see "W JUMP · A BACK · S SINK · D ABSORB" and "PRESS SPACE TO START". Touch users see "USE THE BUTTONS / OR TAP AND SWIPE" and "TAP TO START". Switch modes on the first key or touch.
- **Touch**: draw pixel-style buttons (ink body, grey rim, turning red while pressed, labels in the same 3x5 pixel font) **in the black margins outside the game image**, so they never cover it.
  - **Portrait / tall screens**: centre the game above a row of four big buttons: BACK, SINK, ABSORB, JUMP.
  - **Landscape**: BACK and SINK on the left, ABSORB and JUMP on the right, and a small mute button.
  - If the margins are too small, drop the integer scale by one.
  - Buttons act on press (sink while held) and support multi-touch.
  - Tap = jump and swipes (down, right, left) still work in the game area.

## 12. Sound (synthesized, starts on the first input; M mutes)
- Pre-render every sound into buffers with deterministic noise.
- **Music**: exactly **19.0 s** (32 beats ≈ 101 BPM), looping in sync with the demo chapter.
  - An A-minor-pentatonic **koto melody** (Karplus-Strong plucks with DC removed), 8 bars of eighth notes.
  - A plucked bass on beats 1 and 3.
  - Taiko hits (a pitch-dropping sine plus a noise thump) and woodblock clicks.
  - A soft 16th-note shaker.
  - A breathing A2/E3/A3 drone with integer cycles per loop.
  - Note tails wrap around the loop end, so it is seamless.
- **Effects** (one per event):
  - Jump: a pluck with an upward chirp. Double jump: rising plucks and a shimmer.
  - Land: a soft thud. Sink: a downward bloop with bubbles. Emerge: a splash.
  - Back step: a whoosh. Absorb: an inhale when it opens, then a gulp and a chime.
  - Arrow: a whoosh as it enters the screen and a thunk when it sticks. Giant bolt: a heavy whoosh and a boom.
  - Droplet: a plip when flicked and a splash when it lands. Stroke: a soft "shh" warning and a sharp swish when it fires.
  - Blot: a plink when the drop falls and a splat when it lands. Eraser: a rub-rub.
  - Close call: a woodblock "tock" and a stamp thud. Chapter end: a gong, then paper rustles for the roll and the unroll.
  - Also: hit, game over and start.
- Mix through a compressor; the music sits below the effects.

## 13. Quality bar and self-check (do this before you finish)
- Crisp pixels at any size, a stable 60 fps (well under 2 ms per frame), and a silhouette you can read in the busiest frame.
- Run the demo headlessly for at least two chapters. Confirm:
  - zero collisions
  - every attack ends in a close call or an absorb
  - no console errors
  - two chapters render pixel-identical frames
- Simulate play with ideal inputs, pressing up to 24 ticks early, for 12 chapters of random order. Confirm no hits, and that doing nothing loses a life on every attack.
- With random timing, confirm no close call is ever awarded while overlapping and no hit ever follows a close call on the same attack.
- Show a screenshot of each attack's dodge.

*Hand sprites: "Pixel Hand Gesture Cursor Asset" by Lintnaya (CC0).*

Prompt by AgentGamesbot (@agentgamesbot), quoted word for word from their post on X. Model as stated by the creator; your result will differ.