Пиксельный оранжевый герой мчится по радужной дороге в космосе и уворачивается от метеоритов, анимация

Промпт

ПРОМПТ:
Создайте анимацию в виде одного самодостаточного HTML-файла, используя Vanilla JavaScript и Canvas 2D: оранжевый пиксельный персонаж на сверхвысокой скорости мчится по радужной платформе в космосе, эффектно уклоняясь от непрерывно налетающих метеоритов и лучей. Не используйте внешние ассеты, библиотеки и сетевые запросы. Управление не требуется: анимация должна быть бесшовно зациклена в виде демонстрации, где персонаж автоматически продолжает уклоняться.

Рендеринг
- Рисуйте всё на офскрин-канвасе с фиксированным логическим разрешением 160x90, а затем переносите его на полноэкранный канвас отображения. Используйте максимальный целочисленный коэффициент увеличения, помещающийся в окне, и располагайте изображение по центру. Поля заполняйте чёрным цветом. Установите imageSmoothingEnabled = false и укажите в CSS image-rendering: pixelated.
- Все рисунки должны быть привязаны к целочисленным координатам логического канваса. Не используйте субпиксельные позиции, сглаживание, градиенты, shadowBlur и рисование с поворотом.
- Используйте фиксированную палитру примерно из 32 цветов: чёрные, тёмно-синие и фиолетовые оттенки для космического фона; 3 оттенка оранжевого для персонажа (основной цвет около #CD7B5E, светлый блик и тёмная тень) и чёрный для глаз; 7 цветов для радужной платформы (красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый) и тёмные оттенки каждого из них; каменные и лавовые цвета для метеоритов; белый, циановый и пурпурный для лучей. Все пиксели должны быть выполнены только цветами из этой палитры.

Персонаж
- Точно воспроизведите следующий силуэт размером 12x8 пикселей (1 клетка = 1 логический пиксель):
- Туловище — прямоугольник шириной 8×высотой 8 (столбцы 2–9).
- Руки выступают по бокам туловища на 2×2 пикселя (столбцы 0–1 и 10–11, строки 2–3).
- Два чёрных глаза размером 1x1 пиксель: столбцы 3 и 8 строки 1.
- Четыре ноги в строках 6–7, каждая шириной 1 пиксель (столбцы 2, 4, 7 и 9). Пространство между ногами должно быть вырезано цветом фона.
- Не закрашивайте персонажа одним цветом: добавьте блик толщиной 1px по верхнему и левому краям, а по нижнему и правому краям — цвет тени, создавая объём в стиле 16-битной графики.
- Беговое движение — 4-кадровый цикл, в котором 4 ноги поочерёдно поднимаются и опускаются парами. С повышением скорости ускоряйте цикл.
- Параметризуйте позу (вертикальное подпрыгивание, наклон вперёд, squash & stretch, движение рук вверх и вниз). Squash & stretch выражайте только изменением ширины и высоты на 1–2 пикселя с целочисленным шагом. Плавно интерполируйте параметры, но каждый кадр квантуйте их по пиксельной сетке, чтобы даже при цикле 60fps анимация выглядела как пиксельная графика примерно с частотой 12fps.

Радужная платформа
- Персонаж бежит вправо в горизонтальной композиции с прокруткой, находясь примерно в левой трети экрана. Платформа представляет собой радужную полосу из 7 горизонтальных цветных полос (каждая толщиной 1–2px), протянутую через весь экран и плавно изгибающуюся вверх и вниз по синусоиде.
- Добавьте через равные интервалы по вертикали разделительные линии (тёмные вертикальные полосы) и быстро прокручивайте их влево в зависимости от скорости, создавая ощущение стремительного движения.
- Из нижнего края платформы назад осыпаются частицы радужного света, показывая, что платформа парит в космосе.
- Время от времени добавляйте на платформу трамплины (изгибы вверх) и разрывы (пробелы), создавая эффектные моменты для прыжков.

Препятствия
- Метеориты: 3 размера — большой, средний и маленький. Пиксельные камни (контур + 2 уровня затенения + трещины лавового цвета), прилетающие по диагонали из правого верхнего угла экрана. За ними тянется огненный хвост, переходящий от лавового цвета к тёмному. Метеориты, от которых удалось уклониться, не сталкиваются с платформой, а вылетают за пределы экрана или разбиваются на осколки позади персонажа.
- Лучи: перед появлением отображайте предупреждение в виде мигающей линии толщиной 1px (пурпурного цвета) примерно 0.5 секунды, после чего выпускайте горизонтальный или диагональный луч толщиной 3–5px с белым ядром и циановым внешним краем. Во время излучения концы должны мелко дрожать.
- Препятствия должны идти не случайно, а последовательно по заранее заданным «атакам», при этом вся последовательность должна зацикливаться через определённый промежуток времени (например: одиночный метеорит → тройка метеоритов → низкий луч → высокий луч → комбинация луча и метеоритов → большой метеорит + разрыв платформы).

Действия уклонения
- Прыжок: подготовка с squash → прыжок с stretch → сжатие в воздухе → приземление с squash и радужными искрами вместо облака пыли.
- Двойной прыжок: кратковременная остановка в воздухе с последующим повторным ускорением. Вокруг персонажа на 1px расширяется радужное кольцо.
- Скольжение: персонаж сжимается почти вдвое по высоте и скользит в низкой позе, выпуская искры из точки соприкосновения с платформой.
- Уклонение рывком: на мгновение значительно увеличьте скорость и оставьте позади 3–4 остаточных силуэта. Используйте для них 7 цветов радуги по очереди, постепенно переводя их в тёмные цвета палитры.
- Для каждой атаки назначьте наиболее эффектное для неё действие уклонения. Уклонение должно выполняться в последний момент (near miss).

Конечный автомат
- Для каждой атаки последовательно повторяйте переходы RUN (обычный бег) → WARN (предупреждение, персонаж на мгновение перемещает глаза на 1px, словно смотрит вперёд) → DODGE (действие уклонения) → NEAR_MISS (эффектный момент) → возврат в RUN.
- В конце цикла добавьте BOOST (ускорение на полной скорости) → WARP (весь экран на мгновение вспыхивает белым цветом → радужными цветами), после чего анимация должна естественно перейти к начальному RUN.
- Применяйте easing к параметрам позы и камеры между ключевыми кадрами.

Работа камеры
- Обрабатывайте камеру как целочисленное смещение в логических координатах. Не используйте масштабирование и поворот, выражайте движение только перемещением и дрожанием.
- Следование: камера с демпфированием запаздывает за вертикальным движением персонажа, а во время прыжка слегка задерживается перед подъёмом.
- Упреждение: чем выше скорость, тем дальше камера опережает движение на несколько пикселей, прижимая персонажа к левой части экрана и создавая ощущение ускорения.
- Hit stop: в момент near miss полностью останавливайте сцену на 3–4 кадра, затем примерно на 0.3 секунды включайте замедленное движение (пропуская шаги обновления), после чего возвращайтесь к обычной скорости.
- Дрожание: при пролёте большого метеорита или начале излучения луча добавляйте дрожание экрана на 1–2px. Используйте заранее заданный массив шаблонов дрожания, не применяйте случайные числа.
- Во время BOOST слегка опускайте камеру, увеличивая занимаемую платформой площадь и подчёркивая ощущение скорости.

Эффекты, создающие ощущение стремительного движения
- Многоуровневый параллакс: 3 слоя — дальние звёзды (почти неподвижные точки размером 1px), звёзды среднего плана (растягивающиеся в горизонтальные линии длиной 2–6px в зависимости от скорости), передний план со скоростными линиями (яркие горизонтальные линии, быстро пересекающие экран).
- Количество и длина скоростных линий должны быть пропорциональны скорости, а во время BOOST достигать максимума.
- Разместите на фоне 1–2 большие планеты или туманности в пиксельном стиле и прокручивайте их очень медленно, создавая ощущение масштаба.
- Во время near miss обведите контур персонажа белым цветом толщиной 1px и на мгновение подсветите только ту сторону, которая ближе к метеориту или лучу.
- Искры от приземления, скольжения и рывка, хвосты метеоритов, осколки и частицы света, осыпающиеся с платформы, должны обрабатываться одной и той же системой частиц.

Система частиц
- Используйте систему частиц на основе пула без аллокаций: заранее выделяйте частицы и повторно используйте их.
- Для каждого типа частиц задайте таблицу переходов цветов (последовательность индексов палитры); по мере жизни частицы цвет должен ступенчато изменяться, после чего частица исчезает (например: искры — белый → жёлтый → оранжевый → тёмный, остаточные силуэты — радужные цвета → тёмный).
- При рисовании привязывайте позиции частиц к сетке.
- Обновляйте систему с фиксированным временным шагом 60Hz, а отрисовку выполняйте через rAF. Внутри цикла не должно создаваться никаких объектов (включая массивы, замыкания и конкатенацию строк).

Сцена
- Фон — глубокий космос: постепенный переход от чёрного к тёмно-синему (границы цветов передавайте дизерингом), мерцающие звёзды и далёкие планеты.
- Обеспечьте заметную разницу яркости, чтобы персонаж, препятствия и платформа не сливались с фоном. Силуэт персонажа должен легко читаться с первого взгляда, каким бы насыщенным ни был экран.

Критерии качества
- Пиксели должны оставаться чёткими при любом размере окна, цикл — не прерываться, частота — стабильно держаться на уровне 60fps, силуэт — оставаться читаемым.
- Результат должен выглядеть не как уменьшенная векторная графика, а как экран демоверсии отточенной экшен-игры эпохи 16-битных консолей.
- В каждом уклонении должны ощущаться три составляющие: «быстро», «уклонение в последний момент» и «круто».

Vanilla JavaScript と Canvas 2D を使い、オレンジ色のピクセルキャラクターが宇宙空間のレインボーの床を超高速で駆け抜け、次々と襲いかかる隕石やビームをかっこよく回避し続けるアニメーションを、単一の自己完結型 HTML ファイルとして作成してください。外部アセット、ライブラリ、ネットワークリクエストは一切使用しないこと。操作は不要で、キャラクターが自動で回避し続けるデモとしてシームレスにループさせること。

レンダリング
- すべてを 160x90 の固定論理解像度のオフスクリーンキャンバスに描画し、それをフルスクリーンの表示用キャンバスに転写する。拡大率はウィンドウに収まる最大の整数倍とし、中央に配置する。余白は黒で埋める。imageSmoothingEnabled = false、CSS は image-rendering: pixelated を指定すること。
- すべての描画は論理キャンバス上の整数座標にスナップさせる。サブピクセル位置、アンチエイリアス、グラデーション、shadowBlur、回転描画は使用しない。
- 約32色の固定パレットを使う：宇宙背景用の黒〜深い紺・紫系、キャラクター用のオレンジ系3段階（本体 #CD7B5E 付近、明るいハイライト、暗い影）と目の黒、レインボー床用の7色（赤・橙・黄・緑・水色・青・紫）とそれぞれの暗色、隕石用の岩色・溶岩色、ビーム用の白・シアン・マゼンタ。すべてのピクセルはこのパレットの色から取ること。

キャラクター
- 次の 12x8 ピクセルのシルエットを正確に再現する（1マス＝論理1ピクセル）：
- 胴体は幅8×高さ8の四角形（列2〜9）。
- 腕は胴体の左右に幅2×高さ2で突き出す（列0〜1と列10〜11、行2〜3）。
- 目は黒の1x1ピクセル2つ、行1の列3と列8。
- 脚は行6〜7に4本、各幅1（列2・4・7・9）。脚の間は背景色で抜く。
- 1色塗りではなく、上辺と左辺に1pxのハイライト、下辺と右辺に1pxの影色を入れ、16ビット風の立体感を出す。
- 走りモーションは脚4本を2本ずつ交互に上下させる4フレームサイクル。速度に応じてサイクルを速める。
- ポーズをパラメータ化する（上下バウンド、前傾、スクワッシュ＆ストレッチ、腕の上下）。スクワッシュ＆ストレッチは幅・高さを整数ピクセル単位で1〜2px変えるだけで表現する。パラメータは滑らかに補間しつつ、毎フレームピクセルグリッドに量子化し、60fpsループでも 12fps 前後のドット絵アニメらしく見せること。

レインボーの床
- キャラクターは画面左寄り1/3付近を右方向へ走る横スクロール構成。床は7色の横縞からなる虹の帯（各色1〜2px）で、画面を横切るように延び、ゆるやかにうねる（サイン波で上下にカーブ）。
- 床の縦方向に一定間隔の区切り線（暗色の縦ライン）を入れ、速度に応じて左へ高速スクロールさせて疾走感を出す。
- 床の下辺からは虹色の光の粒が後方へこぼれ落ち、床が宇宙に浮いていることを示す。
- ときどき床にジャンプ台（上向きのカーブ）や途切れ（ギャップ）を出し、ジャンプの見せ場を作る。

障害物
- 隕石：大・中・小の3サイズ。ドット絵の岩（アウトライン＋2段階の陰影＋溶岩色のひび）で、画面右上から斜めに飛来する。後ろに溶岩色→暗色へ変化する炎の尾を引く。避けられた隕石は床に衝突せず画面外へ抜けるか、背後で破片に砕け散る。
- ビーム：出現前に予告として1pxの点滅ライン（マゼンタ）を 0.5 秒ほど表示し、その後に白い芯＋シアンの外縁からなる太さ3〜5pxのビームが水平または斜めに照射される。照射中は端がジリジリと揺れる。
- 障害物はランダムではなく、あらかじめ決めた「攻撃パターン」を順番に流し、全体が一定時間でループするように設計する（例：隕石単発 → 隕石3連 → 低いビーム → 高いビーム → ビームと隕石の複合 → 大隕石＋床のギャップ）。

回避アクション
- ジャンプ：スクワッシュで溜め → ストレッチで跳躍 → 空中で縮こまる → 着地でスクワッシュ＋砂煙ならぬ虹色の火花。
- 二段ジャンプ：空中で一瞬静止してから再加速。キャラクターの周囲に虹色のリングが1pxで広がる。
- スライディング：高さを半分近くまでスクワッシュして低空姿勢で滑り、床との接地面から火花を飛ばす。
- ダッシュ回避：一瞬だけ速度を大きく上げ、後方に残像を3〜4体残す。残像は虹の7色を順に使い、パレットの暗色へと段階的に消えていく。
- 各攻撃パターンには、それに最もかっこよく見える回避アクションを割り当てる。回避はギリギリのタイミング（ニアミス）で行うこと。

ステートマシン
- RUN（通常疾走）→ WARN（予告表示、キャラクターが一瞬前を見るように目を1px動かす）→ DODGE（回避アクション）→ NEAR_MISS（演出）→ RUN に戻る、を攻撃パターンごとに繰り返す。
- ループの最後には BOOST（全力加速）→ WARP（画面全体が白→虹色に一瞬フラッシュ）を入れ、そのまま冒頭の RUN に自然につながるようにする。
- ポーズやカメラのパラメータはキーフレーム間でイージングをかける。

カメラワーク
- カメラは論理座標上の整数オフセットとして扱う。ズームや回転は使わず、位置の移動と揺れだけで表現する。
- 追従：キャラクターの上下移動にダンピング付きで遅れて追従し、ジャンプ時は少し遅れて持ち上がる。
- 先読み：速度が上がるほどカメラを進行方向へ数px先行させ、キャラクターが画面左に押し込まれるようにして加速感を出す。
- ヒットストップ：ニアミスの瞬間に 3〜4 フレームだけ全体を停止し、その後 0.3 秒ほどスローモーション（更新ステップを間引く）にしてから通常速度に戻す。
- シェイク：大隕石の通過やビーム照射開始時に 1〜2px の画面揺れ。揺れは決まったパターン配列から読み出し、乱数は使わない。
- BOOST 中はカメラをわずかに下げ、床の占める面積を増やして速度感を強調する。

疾走感を出すエフェクト
- 多層パララックス：遠い星（ほぼ動かない1pxの点）、中景の星（速度に応じて横に2〜6pxの線に伸びる）、近景のスピードライン（明るい色の横線が画面を高速で横切る）の3層。
- スピードラインの本数と長さは速度に比例させ、BOOST 中は最大にする。
- 背景に大きな惑星や星雲をドット絵で1〜2個配置し、ごくゆっくりスクロールさせてスケール感を出す。
- ニアミス時はキャラクターの輪郭を1pxの白で縁取り、隕石・ビームに近い側だけ一瞬光らせる。
- 着地・スライディング・ダッシュの火花、隕石の尾、破片、床からこぼれる光の粒は、すべて同じパーティクルシステムで扱う。

パーティクルシステム
- プール方式でアロケーションのないパーティクルシステム：事前に確保して再利用する。
- 各パーティクルは種類ごとに色の遷移テーブル（パレットのインデックス列）を持ち、寿命に応じて段階的に色を変えて消滅する（例：火花は白 → 黄 → 橙 → 暗色、残像は虹色 → 暗色）。
- 描画時にはパーティクル位置をグリッドにスナップさせる。
- 60Hz の固定タイムステップで更新し、描画は rAF で行う。ループ内でのオブジェクト生成はゼロにすること（配列・クロージャ・文字列連結の生成も含む）。

シーン
- 背景は深い宇宙：黒から紺への段階的な帯（ディザリングで色の境目を表現）、瞬く星、遠くの惑星。
- キャラクター・障害物・床の色が背景に埋もれないよう、明度差をはっきりつける。どんなに画面が騒がしくても、キャラクターのシルエットが一目で読み取れること。

品質基準
- どのウィンドウサイズでもピクセルがくっきりしていること、ループが途切れないこと、安定した60fps、読みやすいシルエット。
- ベクター図形を縮小したものではなく、洗練された16ビット時代のアクションゲームのデモ画面のように見えること。
- 「速い」「ギリギリで避けた」「かっこいい」の3つが、毎回の回避で伝わること。