跳过主要内容
全部教程

让打击有分量：用 AI agent 给网页游戏加打击感

震屏、命中停顿、闪白、伤害数字，以及怎么让 coding agent 接进去又不把游戏弄得发卡。

"打击感"（juice）就是让一个动作爽起来的反馈：镜头一震、敌人闪白、画面停几帧、数字飞出来。agent 一般不会主动加；加了也容易加过头。用 skill 可以同时解决这两个问题：代码是调好的，规则也写清楚了。

四层反馈

  1. 创伤值震屏：每次命中加创伤值（0–1），震幅取创伤值的平方，每帧衰减。小伤几乎不动，大招能叠起来。
  2. 命中停顿：重击时冻结逻辑 70–160 毫秒，超过 200 毫秒就像卡顿。
  3. 闪白和挤压：目标纯白绘制一两帧，沿受击方向短暂压扁。
  4. 火花和数字：命中点出火花，伤害数字弹出上飘。

经验：轻击要多、要快、要便宜；命中停顿和闪屏只留给重击和击杀。

用 hit-juice skill

先安装（见安装教程），再对 agent 说：

用 hit-juice skill，接到我们的伤害函数：普攻 light，蓄力 heavy，暴击 crit，最后一击 kill。

skill 会让 agent 先找主循环和伤害函数，再加入大致这样的代码：

const juice = createJuice();
function loop(raw) {
  const dt = juice.step(raw); // 命中停顿期间 dt 为 0
  update(dt);
  juice.applyCamera(ctx, W, H);
  drawWorld();
  juice.drawFx(ctx);
  ctx.restore();
  juice.drawOverlay(ctx, W, H);
}
// 伤害函数里
juice.hit(x, y, 'heavy', { entity: enemy, dirX: 1, damage: 42 });

自检

  • 连打 10 次：无 console 报错，游戏不会有卡住的感觉。
  • 系统里打开"减少动态效果"：镜头不应再震。
  • 用手机尺寸（390×844）试：低端设备会自动减少粒子。

可以在 hit-juice 页面直接试在线演示。

hit-juice