提示词
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つが、毎回の回避で伝わること。
中文译文
使用 Vanilla JavaScript 和 Canvas 2D，制作一个动画：一个橙色像素角色在宇宙空间的彩虹地面上超高速飞奔，不断帅气地躲避接连袭来的陨石和光束，并将其做成单一的自包含 HTML 文件。完全不要使用外部素材、库或网络请求。无需任何操作，作为角色自动持续躲避的演示无缝循环。
渲染
- 将所有内容绘制到 160x90 固定逻辑分辨率的离屏画布上，再转绘到全屏的显示画布。缩放倍率取窗口能容纳的最大整数倍，并居中放置。留白用黑色填充。设置 imageSmoothingEnabled = false，CSS 指定 image-rendering: pixelated。
- 所有绘制都吸附到逻辑画布上的整数坐标。不使用亚像素位置、抗锯齿、渐变、shadowBlur、旋转绘制。
- 使用约 32 色的固定调色板：宇宙背景用的黑色至深藏青、紫色系，角色用的三阶橙色系（主体接近 #CD7B5E、明亮高光、暗部阴影）和眼睛的黑色，彩虹地面用的 7 色（红、橙、黄、绿、水色、蓝、紫）及各自的暗色，陨石用的岩石色、熔岩色，光束用的白色、青色、洋红色。所有像素都要取自这个调色板中的颜色。
角色
- 准确还原下面这个 12x8 像素的剪影（1 格 = 逻辑 1 像素）：
- 躯干是宽 8 × 高 8 的矩形（第 2～9 列）。
- 手臂在躯干左右两侧伸出，宽 2 × 高 2（第 0～1 列和第 10～11 列，第 2～3 行）。
- 眼睛是两个黑色 1x1 像素，位于第 1 行第 3 列和第 8 列。
- 腿在第 6～7 行共 4 条，各宽 1（第 2、4、7、9 列）。腿与腿之间用背景色镂空。
- 不是单色平涂，而是在上边和左边加 1px 高光、下边和右边加 1px 阴影色，营造出 16 位风格的立体感。
- 奔跑动作是 4 条腿两两交替上下的 4 帧循环。根据速度加快循环。
- 将姿势参数化（上下弹跳、前倾、挤压与拉伸、手臂上下）。挤压与拉伸只通过以整数像素为单位改变宽度和高度 1～2px 来表现。参数平滑插值的同时，每帧量化到像素网格，让它在 60fps 循环下看起来仍像 12fps 左右的像素动画。
彩虹地面
- 横版卷轴构图，角色在靠近画面左侧约 1/3 处向右奔跑。地面是由 7 色横条纹组成的彩虹带（每色 1～2px），横贯画面延伸，缓缓起伏（用正弦波上下弯曲）。
- 在地面纵向按固定间隔加入分隔线（暗色竖线），并随速度向左高速滚动，营造疾驰感。
- 彩虹色的光粒从地面下边缘向后方洒落，表明地面是漂浮在宇宙中的。
- 偶尔在地面上出现跳跃台（向上弯曲）或断口（缺口），制造跳跃的看点。
障碍物
- 陨石：大、中、小 3 种尺寸。像素画的岩石（轮廓 + 两级阴影 + 熔岩色裂纹），从画面右上方向斜向飞来。身后拖着一道由熔岩色过渡到暗色的火焰尾迹。被躲开的陨石不会撞到地面，而是飞出画面，或在身后碎裂成碎片。
- 光束：出现前先显示约 0.5 秒的 1px 闪烁线（洋红色）作为预警，随后由白色核心 + 青色外缘构成、粗细 3～5px 的光束水平或斜向照射。照射过程中边缘会滋滋地抖动。
- 障碍物不是随机的，而是按顺序依次播放预先设定的「攻击模式」，并设计成整体在一定时间内循环（例如：单发陨石 → 三连陨石 → 低位光束 → 高位光束 → 光束与陨石的组合 → 大陨石＋地面缺口）。
闪避动作
- 跳跃：挤压蓄力 → 拉伸起跳 → 空中缩起 → 落地时挤压＋不是沙尘而是彩虹色的火花。
- 二段跳：在空中短暂停顿一下再重新加速。角色周围有一圈 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 位时代动作游戏的演示画面，而不是把矢量图形缩小。
- 每次闪避都要传达出「快」「千钧一发地躲开」「帅气」这三点。
