提示詞
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 位時代動作遊戲的演示畫面，而不是把矢量圖形縮小。
- 每次閃避都要傳達出「快」「千鈞一髮地躲開」「帥氣」這三點。
