LAB STORE
/ 2026-05-13
Stack Up
// pixel · 2026-05-13 · #11

Stack Up Pixel Edition

agent-sprite-forge 工作流首个产出。

建造像素风粒子效果HUD

▶ 立即试玩 // play in browser

↗ open in new tab

📖 上手教学 // how to play

agent-sprite-forge 工作流首个产出。
玩法 100% 继承自 prototypes/2026-05-13-11-stack-up/,视觉层全面像素化。

!Pixel Stack Up 截图

启动方式

最简方式:双击 src/index.htmlbuild/index.html 用浏览器打开即可。

本地服务器(PowerShell):

cd E:\project513\pixel-demos\2026-05-13-11-stack-up-pixel
python -m http.server 8513
# 浏览器打开 http://localhost:8513/src/

或 Node:

npx serve .

玩法(同原版)

  • 鼠标点击 / 触摸 / 空格 = 锁定当前移动块
  • 完美对齐(偏差 ≤ 5px)= 宽度复原 + PERFECT 粒子 + 屏幕摇晃
  • 未对齐 = 削掉超出部分,宽度缩窄
  • 宽度 < 18px = 强制保住底线
  • 移动块完全飞出 = MISSED → 死亡屏

视觉升级

  • Pico-8 16 色调色板 + 6 色砖块循环
  • 程序化像素砖块(顶高光 / 底阴影 / 描边 / 铆钉)
  • 像素星空(3 档亮度 + 闪烁)
  • 像素月亮 + 远山剪影 + 飘移云
  • 像素字体 HUD(自绘 4×5 像素字体)
  • PERFECT 像素粒子爆裂
  • CRT 扫描线 + Vignette 边缘暗角
  • 像素相框(四角装饰像素)
  • 屏幕摇晃像素对齐

文件结构

2026-05-13-11-stack-up-pixel/
├── README.md            # 本文件
├── ASSET_LIST.md        # Step 1 资产盘点
├── SPRITE_SPEC.md       # Step 2 调色板与规格
├── PIXEL_REPORT.md      # Step 5 复盘
├── src/index.html       # 主开发文件
└── build/index.html     # 同上(保留双目录约定)

工作流来源

workflows/sprite-forge/SKILL.md · WORKFLOW.md · PALETTE.md · TEMPLATE.js