A pixel runner built entirely in one HTML file
A detailed Canvas 2D brief for a looping 160×90 action scene, with crisp pixels, scripted dodges, and a deterministic particle system.
This prompt asks a coding assistant to make a self-contained pixel-art animation: an orange runner races across a rainbow path in space while dodging meteors and beams. It is a visual specification, not a request for a playable game. The demo should start itself, run without controls, and loop cleanly.
The brief is unusually precise about what makes pixel art feel intentional: a fixed 160×90 logical canvas, integer scaling, a limited palette, grid-snapped drawing, and a 12×8 character silhouette. It also defines a repeatable attack sequence and a small state machine, so each near miss reads as a designed event rather than random noise.
Lock the pixel grid first
Draw into a 160×90 off-screen canvas, then present it at the largest whole-number scale that fits the window. Center it against black. Disable smoothing, avoid subpixel coordinates, and use a fixed palette. This keeps the silhouette readable at any display size.
Make every dodge a small story
Run a scripted sequence of meteor, beam, and gap encounters. Each encounter follows RUN → WARN → DODGE → NEAR_MISS → RUN; the finale moves through BOOST and WARP before looping. Assign jumps, slides, double jumps, and dash afterimages to the attacks that show them best.
Keep motion fast but repeatable
Use a 60 Hz fixed update step with requestAnimationFrame for display. Quantize pose parameters to pixels and use a short run cycle so motion retains a sprite-like rhythm. Preallocate particle slots and use scripted camera shake instead of random values. Verify the actual frame rate on the target device rather than promising a constant 60 fps.
Copy the production brief
The following English prompt condenses the supplied Japanese specification while preserving its key constraints. Inspect the character silhouette, looping boundary, obstacle timing, and performance in the finished HTML.
Create a single self-contained HTML file using only vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests. Make an automatic, seamless-loop pixel-art animation: an orange 12×8 pixel runner races rightward across a floating rainbow road in deep space and narrowly dodges scripted meteors and beams. No controls or UI. RENDERING: Draw every scene element on a fixed 160×90 off-screen canvas. Copy it to a full-screen display canvas at the largest integer scale that fits, centered with black letterboxing. Disable image smoothing and set CSS image-rendering: pixelated. Snap drawing and camera offsets to integer logical pixels. No gradients, shadowBlur, antialiasing, rotated sprites, or subpixel positions. Use a fixed palette of about 32 colors: dark navy/purple space, three orange body tones near #CD7B5E plus black eyes, seven rainbow road hues and darker variants, rock/lava meteor tones, and white/cyan/magenta beam tones. CHARACTER: Reproduce a 12×8 silhouette: body columns 2–9, rows 0–7; 2×2 arms at columns 0–1 and 10–11 on rows 2–3; black eyes at (3,1) and (8,1); four one-pixel legs at columns 2, 4, 7, 9 on rows 6–7, with background-colored gaps. Add one-pixel highlights on top/left and shadows on bottom/right. Animate four alternating-leg run frames, with speed-dependent cycling. Parameterize bounce, lean, arm height, and one- or two-pixel squash/stretch. Ease pose values but quantize every frame so the result feels like roughly 12 fps sprite animation even in a 60 fps loop. WORLD: Keep the runner near the left third. Build the road from seven 1–2px horizontal rainbow stripes with gentle sine-wave bends, fast scrolling dark seams, falling colored light particles, occasional curved jump ramps and gaps. Use three parallax layers: distant point stars, midground streaks, and nearby speed lines, plus one or two slowly moving pixel planets or nebulae. Keep strong luminance contrast around the runner. ATTACKS: Script a deterministic sequence: one meteor, three meteors, low beam, high beam, beam-plus-meteor, then a large meteor with a road gap. Meteors come diagonally from the upper right in three sizes, with pixel-rock outlines, two shade levels, lava cracks, and fading fire tails; they exit or break into fragments behind the runner. Beams show a blinking 1px magenta warning for about 0.5s, then fire a 3–5px white core with cyan edges, horizontally or diagonally, with jittering tips. Pair each attack with the most dramatic near-miss dodge: charged jump and landing sparks, double jump with a one-pixel expanding rainbow ring, low sliding sparks, or dash with three to four rainbow afterimages. TIMING AND CAMERA: Use RUN → WARN → DODGE → NEAR_MISS → RUN for every attack, then BOOST → WARP → the opening RUN without a visible seam. In WARN, shift the eyes one pixel toward danger. Ease between keyframes. Move the camera only through integer x/y offsets: delayed vertical tracking, a few pixels of forward lead at speed, a slight drop during BOOST, scripted 1–2px shake, and a 3–4-frame hit stop followed by about 0.3s of stepped slow motion on near misses. No zoom or rotation. End with a brief white-to-rainbow warp flash. EFFECTS AND PERFORMANCE: Use one preallocated particle pool for sparks, meteor tails, fragments, road light, and dash echoes; update colors by palette-index tables over lifetime and snap positions to the grid. Update at fixed 60 Hz, render with requestAnimationFrame, and avoid allocations in the hot loop, including new arrays, closures, and string concatenation. Verify crisp integer scaling, a clean loop, readable silhouette, and stable performance. The result should feel like a polished 16-bit action-game demo: fast, close calls, and visually striking.