施法的像素风巫师

创建一个单一的自包含 HTML 文件，用以渲染一个正在施放法术的动画像素艺术巫师，使用原生 JavaScript 和 Canvas 2D。不要外部资源、库或网络请求。

渲染
- 把一切绘制到固定逻辑分辨率为 128x96 的离屏画布上，然后位块传输到全屏显示画布，按能放入窗口的最大整数倍缩放，居中，并设置 imageSmoothingEnabled = false 以及 CSS image-rendering: pixelated。
- 所有绘制都吸附到逻辑画布上的整数坐标。不要子像素位置、抗锯齿、渐变或 shadowBlur。
- ~24 种十六进制颜色的固定调色板：夜空用深蓝/深紫，长袍用温暖色调，3-4 种明亮的魔法色。每一个像素都来自这一调色板。

角色
- 用填充矩形和像素连续段程序化地构建巫师，~24x32 逻辑像素：带一处弯折的尖帽、长胡须、带更深轮廓的双色调长袍、尖端有宝石的法杖。
- 将姿势参数化（法杖角度、手臂抬起、头部倾斜、长袍摆动）。先平滑地动画这些参数，再在每一帧量化到像素网格，使动作呈现 8-12 fps 的像素动画感，尽管循环以 60fps 运行。

动画
- 循环的状态机：IDLE（2 帧上下轻晃、胡须摆动）-> CHARGE（法杖抬起、宝石闪烁、火花向内螺旋）-> CAST（明亮的爆发、投射物横穿场景飞出、1-2 像素的屏幕震动）-> RECOVER（回落归位）。在关键帧之间缓动姿势参数。
- 池化的、无分配的粒子系统：预先分配并复用。火花在 CHARGE 期间环绕宝石，在 CAST 时向外炸开，每个粒子在消亡前将其调色板索引从白色步进到魔法色再步进到暗色。绘制时把粒子位置吸附到网格。
- 以固定的 60hz 时间步更新，并用 rAF 渲染。循环内部的对象分配为零。

场景
- 极简背景：暗色天空、几颗闪烁的 1px 星星、月亮、一条石质地面线。角色剪影必须清晰可读。
- 宝石投在巫师身上的细微 1px 轮廓光，在 CHARGE 和 CAST 期间变亮。

质量标准
- 在任何窗口尺寸下像素都清晰、循环无缝、60fps 稳定、剪影可读。看起来应当像精致的 16-bit 精灵动画，而不是被缩小的矢量形状。