夜空背景下施法的像素動畫巫師

提示詞

建立一個單一、自包含的 HTML 檔案，使用原生 JavaScript 和 Canvas 2D 顯示施放法術的動畫像素藝術巫師。不使用外部資源、函式庫或網路請求。

RENDERING
- 將所有內容繪製到固定邏輯解析度為 128x96 的離屏 canvas，然後以符合視窗大小的最大整數倍縮放，繪製到置中的全螢幕顯示 canvas；使用 imageSmoothingEnabled = false 和 CSS image-rendering: pixelated。
- 所有繪圖都必須貼齊邏輯 canvas 上的整數座標。不得使用子像素位置、反鋸齒、漸層或 shadowBlur。
- 使用約 24 種 hex 顏色組成的固定調色盤：以深藍色/紫色呈現夜空、以溫暖色調呈現長袍，以及 3-4 種明亮的魔法色。每個像素都必須來自此調色盤。

CHARACTER
- 以填滿的矩形和像素線段，程序化建立一名約 24x32 個邏輯像素大小的巫師：帶有彎折的尖帽、長鬍鬚、具有較深色輪廓的雙色長袍，以及頂端鑲有寶石的法杖。
- 將姿勢參數化（法杖角度、手臂抬起幅度、頭部傾斜、長袍擺動）。平滑地製作參數動畫，然後在每個影格將其量化到像素網格，使動作即使在 60fps 執行迴圈時，看起來仍具有 8-12 fps 像素動畫的感覺。

ANIMATION
- 循環狀態機：IDLE（2 影格的上下晃動、鬍鬚擺動） -> CHARGE（法杖升起、寶石閃爍、火花向內螺旋） -> CAST（明亮爆發、投射物飛越整個場景、1-2 像素的畫面震動） -> RECOVER（恢復平穩）。在關鍵影格之間平滑地緩動姿勢參數。
- 使用預先配置且不進行配置的粒子系統：預先配置並重複使用粒子。CHARGE 期間火花繞著寶石運行，CAST 時向外爆散；每個粒子在消失前，將其調色盤索引從白色切換為魔法色，再切換為深色。繪製時將粒子位置貼齊網格。
- 使用固定的 60hz 時間步長，並以 rAF 進行渲染。迴圈內不得配置物件。

SCENE
- 簡約背景：黑暗的天空、幾顆閃爍的 1px 星星、月亮、石頭地面的線條。角色剪影必須清楚易辨。
- 使用來自寶石、位於巫師身上的細微 1px 輪廓光，在 CHARGE 和 CAST 期間增強亮度。

QUALITY BAR
- 在任何視窗大小下都保持清晰像素、無縫循環、穩定的 60fps，以及易於辨識的剪影。整體應該看起來像精緻的 16-bit 風格精靈動畫，而不是縮小的向量圖形。

Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests.

RENDERING
- Draw everything to an offscreen canvas at a fixed logical resolution of 128x96, then blit to a fullscreen display canvas scaled by the largest integer factor that fits the window, centered, with imageSmoothingEnabled = false and CSS image-rendering: pixelated.
- All drawing snaps to integer coordinates on the logical canvas. No sub-pixel positions, anti-aliasing, gradients, or shadowBlur.
- Fixed palette of ~24 hex colors: deep blues/purples for night sky, warm robe tones, 3-4 bright magic colors. Every pixel comes from this palette.

CHARACTER
- Build the wizard procedurally from filled rects and pixel runs, ~24x32 logical pixels: pointed hat with a bend, long beard, two-shade robe with darker outline, staff with a gem at the tip.
- Parameterize the pose (staff angle, arm raise, head tilt, robe sway). Animate parameters smoothly, then quantize to the pixel grid each frame so motion reads at an 8-12 fps pixel animation feel even though the loop runs at 60fps.

ANIMATION
- Looping state machine: IDLE (2-frame bob, beard sway) -> CHARGE (staff raises, gem flickers, sparks spiral inward) -> CAST (bright burst, projectile fires across the scene, 1-2 pixel screen shake) -> RECOVER (settle back). Ease pose parameters between keyframes.
- Pooled allocation-free particle system: preallocate and reuse. Sparks orbit the gem during CHARGE, explode outward on CAST, each particle stepping its palette index from white to magic color to dark before despawn. Snap particle positions to the grid when drawing.
- Fixed 60hz timestep update with rAF rendering. Zero object allocation inside the loop.

SCENE
- Minimal background: dark sky, a few twinkling 1px stars, moon, stone floor line. Character silhouette must read clearly.
- Subtle 1px rim light on the wizard from the gem, brightening during CHARGE and CAST.

QUALITY BAR
- Crisp pixels at any window size, seamless loop, stable 60fps, readable silhouette. Should look like a polished 16-bit sprite animation, not vector shapes scaled down.