这是一个单文件 HTML 解决方案，包含 CSS、HTML 和 JavaScript。
这个实现完全使用 Canvas API 绘制，不依赖任何外部图片。它通过**网格对齐（Grid Snapping）**和**矩形填充**来模拟复古的 8-bit 像素风格，而不是简单的模糊圆圈。
### 功能特点：
1. **真正的像素化渲染**：所有图形都对齐到虚拟的像素网格上。
2. **多层波纹**：包含核心闪光、扩散火球、边缘烟雾三层结构。
3. **物理粒子**：爆炸产生的碎片受重力和空气阻力影响，颜色随生命周期冷却（白->黄->红->灰）。
4. **屏幕震动**：爆炸时会触发屏幕震动效果，增加打击感。
5. **交互性**：点击屏幕任意位置触发爆炸，拖动滑块调节威力。
### 代码实现
你可以将以下代码保存为 `.html` 文件并在浏览器中直接打开。
```html
8-Bit Pixel Art Explosion
```
### 如何使用：
1. 将上述代码保存为 `explosion.html`。
2. 双击打开文件。
3. **点击屏幕**：在鼠标点击的位置生成爆炸。
4. **调整滑块**：改变爆炸的大小和粒子数量。
### 技术细节解析：
1. **`drawPixel` 函数**：
这是核心。它接收任意浮点坐标 `(x, y)`，但通过 `Math.floor(x / size) * size` 将其强制“对齐”到我们设定的 `PIXEL_SIZE` (6px) 网格上。这保证了无论物体如何移动，它始终看起来像是在低分辨率网格上跳动。
2. **颜色变化 (Palette Cycling)**：
粒子类 `Particle` 中没有使用平滑的 RGB 过渡，而是根据生命周期（`life`）在预定义的调色板数组中切换颜色。这是 8-bit 游戏处理火焰和爆炸的经典手法。
3. **像素圆算法**：
`drawPixelCircle` 不使用 Canvas 的 `arc()`。它在一个正方形区域内遍历网格点，计算 `x² + y² <= r²`。
* **Dithering (抖动)**：通过 `probability` 参数，随机跳过一些像素的绘制，这模拟了复古游戏中用来表现半透明烟雾或破碎边缘的“噪点”效果。
4. **性能优化**：
虽然我们在 JS 中手动计算像素点，但因为步长是 `PIXEL_SIZE` (6px)，循环次数大大减少，即使在手机浏览器上也能保持流畅的 60FPS。