Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@gameforge

Game juice pass

@gameforge/game-juice-pass

Make a working game feel good: an ordered juice pass that adds screen shake, hit stop, particles, squash and stretch, easing, score popups, flashes, and tiny Web Audio sounds to the moments that matter, each behind a config value and a reduced-motion setting. Ships dependency-free canvas snippets.

SkillOtherv1.0.0 (latest)
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1// Juice snippets for canvas games. Plain JavaScript, no dependencies.
  2. 2// Copy only the pieces a game needs, and wire each one to a CONFIG value so it can be tuned.
  3. 3// Every timer here is in seconds and every update takes dt, matching a requestAnimationFrame loop.
  4. 4
  5. 5// 1. Screen shake (trauma model): add trauma on impact, shake = trauma squared, decays over time.
  6. 6const shake = { trauma: 0, max: 14, decay: 1.6 };
  7. 7function addTrauma(amount) { shake.trauma = Math.min(1, shake.trauma + amount); }
  8. 8function updateShake(dt) { shake.trauma = Math.max(0, shake.trauma - shake.decay * dt); }
  9. 9function applyShake(ctx) {
  10. 10 const s = shake.trauma * shake.trauma * shake.max;
  11. 11 if (s > 0) ctx.translate((Math.random() * 2 - 1) * s, (Math.random() * 2 - 1) * s);
  12. 12}
  13. 13
  14. 14// 2. Hit stop: freeze the simulation for a few frames on a big hit. Drawing keeps running.
  15. 15let hitStop = 0;
  16. 16function addHitStop(seconds) { hitStop = Math.max(hitStop, seconds); }
  17. 17function simDt(dt) {
  18. 18 if (hitStop > 0) { hitStop -= dt; return 0; }
  19. 19 return dt;
  20. 20}
  21. 21
  22. 22// 3. Particles: small, short-lived, pooled in one array.
  23. 23const particles = [];
  24. 24function burst(x, y, { count = 16, speed = 220, life = 0.5, color = "#ffd166", gravity = 500 } = {}) {
  25. 25 for (let i = 0; i < count; i++) {
  26. 26 const a = Math.random() * Math.PI * 2, v = speed * (0.4 + Math.random() * 0.6);
  27. 27 particles.push({ x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life, max: life, color, gravity });
  28. 28 }
  29. 29}
  30. 30function updateParticles(dt) {
  31. 31 for (const p of particles) { p.x += p.vx * dt; p.y += p.vy * dt; p.vy += p.gravity * dt; p.life -= dt; }
  32. 32 for (let i = particles.length - 1; i >= 0; i--) if (particles[i].life <= 0) particles.splice(i, 1);
  33. 33}
  34. 34function drawParticles(ctx) {
  35. 35 for (const p of particles) {
  36. 36 ctx.globalAlpha = Math.max(0, p.life / p.max);
  37. 37 ctx.fillStyle = p.color;
  38. 38 ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
  39. 39 }
  40. 40 ctx.globalAlpha = 1;
  41. 41}
  42. 42
  43. 43// 4. Easing and tweens: animate any numeric property.
  44. 44const ease = {
  45. 45 outCubic: (t) => 1 - Math.pow(1 - t, 3),
  46. 46 outBack: (t) => 1 + 2.7 * Math.pow(t - 1, 3) + 1.7 * Math.pow(t - 1, 2),
  47. 47 outElastic: (t) => (t === 0 || t === 1 ? t : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI) / 3) + 1),
  48. 48};
  49. 49const tweens = [];
  50. 50function tween(obj, key, to, duration, fn = ease.outCubic) {
  51. 51 tweens.push({ obj, key, from: obj[key], to, t: 0, duration, fn });
  52. 52}
  53. 53function updateTweens(dt) {
  54. 54 for (const tw of tweens) {
  55. 55 tw.t = Math.min(1, tw.t + dt / tw.duration);
  56. 56 tw.obj[tw.key] = tw.from + (tw.to - tw.from) * tw.fn(tw.t);
  57. 57 }
  58. 58 for (let i = tweens.length - 1; i >= 0; i--) if (tweens[i].t >= 1) tweens.splice(i, 1);
  59. 59}
  60. 60
  61. 61// 5. Squash and stretch: keep area roughly constant. Call on land (squash) and jump (stretch).
  62. 62function squash(entity, amount = 0.3) {
  63. 63 entity.sx = 1 + amount; entity.sy = 1 - amount;
  64. 64 tween(entity, "sx", 1, 0.18, ease.outBack);
  65. 65 tween(entity, "sy", 1, 0.18, ease.outBack);
  66. 66}
  67. 67function drawScaled(ctx, entity, drawFn) {
  68. 68 ctx.save();
  69. 69 ctx.translate(entity.x, entity.y + entity.h / 2); // scale from the feet
  70. 70 ctx.scale(entity.sx ?? 1, entity.sy ?? 1);
  71. 71 ctx.translate(-entity.x, -(entity.y + entity.h / 2));
  72. 72 drawFn();
  73. 73 ctx.restore();
  74. 74}
  75. 75
  76. 76// 6. Floating score text.
  77. 77const popups = [];
  78. 78function popup(x, y, text, color = "#ffffff") { popups.push({ x, y, text, color, life: 0.7 }); }
  79. 79function updatePopups(dt) {
  80. 80 for (const p of popups) { p.y -= 60 * dt; p.life -= dt; }
  81. 81 for (let i = popups.length - 1; i >= 0; i--) if (popups[i].life <= 0) popups.splice(i, 1);
  82. 82}
  83. 83function drawPopups(ctx) {
  84. 84 ctx.textAlign = "center";
  85. 85 ctx.font = "bold 20px system-ui, sans-serif";
  86. 86 for (const p of popups) {
  87. 87 ctx.globalAlpha = Math.min(1, p.life * 2);
  88. 88 ctx.fillStyle = p.color;
  89. 89 ctx.fillText(p.text, p.x, p.y);
  90. 90 }
  91. 91 ctx.globalAlpha = 1;
  92. 92}
  93. 93
  94. 94// 7. Screen flash: a quick full-screen tint on damage or pickup.
  95. 95let flash = { alpha: 0, color: "#ffffff" };
  96. 96function addFlash(color = "#ffffff", alpha = 0.35) { flash = { alpha, color }; }
  97. 97function drawFlash(ctx, w, h, dt) {
  98. 98 if (flash.alpha <= 0) return;
  99. 99 ctx.globalAlpha = flash.alpha;
  100. 100 ctx.fillStyle = flash.color;
  101. 101 ctx.fillRect(0, 0, w, h);
  102. 102 ctx.globalAlpha = 1;
  103. 103 flash.alpha = Math.max(0, flash.alpha - 2.5 * dt);
  104. 104}
  105. 105
  106. 106// 8. Sound with no audio files: tiny Web Audio blips. Browsers start audio only after a user gesture,
  107. 107// so create the context lazily inside the first input handler.
  108. 108let audio = null;
  109. 109let muted = false;
  110. 110function blip({ freq = 660, to = 880, duration = 0.08, type = "square", volume = 0.08 } = {}) {
  111. 111 if (muted) return;
  112. 112 audio ??= new (window.AudioContext || window.webkitAudioContext)();
  113. 113 const t = audio.currentTime;
  114. 114 const osc = audio.createOscillator(), gain = audio.createGain();
  115. 115 osc.type = type;
  116. 116 osc.frequency.setValueAtTime(freq, t);
  117. 117 osc.frequency.exponentialRampToValueAtTime(to, t + duration);
  118. 118 gain.gain.setValueAtTime(volume, t);
  119. 119 gain.gain.exponentialRampToValueAtTime(0.0001, t + duration);
  120. 120 osc.connect(gain).connect(audio.destination);
  121. 121 osc.start(t);
  122. 122 osc.stop(t + duration);
  123. 123}
  124. 124const sfx = {
  125. 125 pickup: () => blip({ freq: 660, to: 1320, duration: 0.09 }),
  126. 126 jump: () => blip({ freq: 300, to: 600, duration: 0.12, type: "triangle" }),
  127. 127 hit: () => blip({ freq: 180, to: 60, duration: 0.2, type: "sawtooth", volume: 0.12 }),
  128. 128};
  129. 129
  130. 130// 9. Respect players who ask for less motion.
  131. 131const reducedMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
  132. 132if (reducedMotion) { shake.max = 3; }
Sign in to comment on a line