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.

无缝循环的 16 位像素动画：巫师蓄力、施法，用 Canvas 2D 以 128x96 程序化绘制。 英文标题：Pixel art wizard casting a spell 中文提示词译文： 创建一个单文件、自包含的 HTML，用原生 JavaScript 和 Canvas 2D 渲染一个正在施法的像素风巫师动画。不使用任何外部素材、库或网络请求。 渲染 - 所有内容先画到一个固定逻辑分辨率 128x96 的离屏画布上，再贴到全屏显示画布上，按能放进窗口的最大整数倍缩放并居中，设置 imageSmoothingEnabled = false 和 CSS image-rendering: pixelated。 - 所有绘制都对齐到逻辑画布的整数坐标。不要亚像素位置、抗锯齿、渐变或 shadowBlur。 - 固定调色板，约 24 个十六进制颜色：夜空用深蓝和深紫，长袍用暖色调，另有 3-4 种明亮的魔法色。每个像素都来自这个调色板。 角色 - 用填充矩形和像素段程序化地拼出巫师，约 24x32 逻辑像素：带一道弯折的尖帽、长胡子、带深色描边的双色长袍、顶端镶宝石的法杖。 - 把姿势参数化（法杖角度、抬臂、头部倾斜、长袍摆动）。参数平滑地做动画，然后每帧量化到像素网格，这样即使循环以 60fps 运行，动作看起来也像 8-12 fps 的像素动画。 动画 - 循环状态机：IDLE（两帧上下浮动、胡子摆动）-> CHARGE（举起法杖、宝石闪烁、火花向内螺旋汇聚）-> CAST（亮光爆发、一枚法术弹飞过场景、1-2 像素的屏幕震动）-> RECOVER（回到原位）。关键帧之间的姿势参数做缓动。 - 对象池式、零分配的粒子系统：预先分配并重复使用。CHARGE 时火花绕宝石旋转，CAST 时向外炸开，每个粒子在消失前让调色板索引从白色逐级变到魔法色再到暗色。绘制时粒子位置对齐网格。 - 固定 60hz 时间步长更新，用 rAF 渲染。循环内零对象分配。 场景 - 极简背景：深色夜空、几颗闪烁的 1px 星星、月亮、一条石头地面线。角色剪影必须清晰可辨。 - 宝石在巫师身上投下一道细微的 1px 轮廓光，在 CHARGE 和 CAST 时变亮。 质量标准 - 任何窗口尺寸下像素都清晰、循环无缝、稳定 60fps、剪影易读。要看起来像精致的 16 位精灵动画，而不是缩小的矢量图形。 使用工具：canvas 需要输入：none 原始发布：https://x.com/majidmanzarpour/status/2102476258948927543 来源许可/权利说明：CC BY 4.0（仓库采用 CC BY 4.0；社区 Prompt 与视频权利归原作者并受原帖条款约束，保留完整归属）