Web Development

Inbox Defense is a 90-second office arcade. Emails fall toward your inbox. Swipe to shred the stiff or passive-aggressive ones ("Kindly revert at the earliest.") and let the polite ones land. Three mistakes and the boss goes 😌 → 😒 → 😡 → 🤯. Free, no sign-up. Korean UI: ?lang=ko.

I almost called this "a game in one HTML file." That would have been wrong. It's static HTML, CSS, and ES modules — index.html, style.css, game.js, engine.js, logic.js, data.js, sfx.js — plus icons. No bundler, no engine, no backend, no tracker. CSP sets connect-src 'none'. Scores live in localStorage.

Canvas for the world, DOM for the chrome

Falling mail, the slash trail, torn halves, particles, and the inbox tray are Canvas 2D (#cv, { alpha: false }). Start and result screens, the HUD, the language chip, and the end-screen buttons are DOM. Mail is pre-rendered to offscreen canvases and drawImage'd each frame.

Pointer events: a swipe over 14px can chain through several cards; a tap shreds the card under the point. Keyboard: Space, S, ↓, or ← slashes the lowest card.

One requestAnimationFrame loop, two clocks

frame caps the timestep at 50ms, then decides whether the world should move:

function frame(nowMs) {
  raf = requestAnimationFrame(frame);
  const dt = Math.min(0.05, (nowMs - last) / 1000 || 0); last = nowMs;
  if (paused) return;
  realT += dt;
  if (hitstop > 0) { hitstop -= dt; updateFx(dt * 0.25); render(); return; }
  const scale = slowUntil > realT ? 0.45 : 1;
  if (!dying) update(dt * scale, dt);
  updateFx(dt);
  render();
}

realT keeps running so effects decay during hit-stop. Game time st.t only advances in update, scaled to 0.45× for five seconds after ☕ coffee (slowUntil = realT + 5). The loop pauses when document.hidden is true. A shift is 90 seconds (DAY_SECONDS), mapped from 9:00 AM to 6:00 PM. Survive and you get lives * 100.

Difficulty is two linear functions, not levels

Fall speed and spawn gap are functions of game time t, tuned for a 700px-tall field, then scaled to the canvas height:

export function fallSpeed(t) { return 105 + 2.5 * t; }
export function spawnGap(t) { return Math.max(0.48, 1.2 - 0.0095 * t); }

At t=0, mail falls at 105 px/s, with a new card about every 1.2s (jittered by 0.8 + rand() * 0.4). At t=90, speed is 330 px/s and the gap floors at 0.48s. Power-ups (☕, then 🏝️, alternating) start after ~14s, then every 13–21s. Out of Office shreds stiff mail on the board and lets fine ones land.

logic.js has no DOM; run node test_logic.mjs. A slash is 10 points, a landing is 5, times min(5, 1 + Math.floor(streak / 5)); a chain multiplies the slash. 76 phrases, 38 stiff and 38 fine; stiff lines include a "send instead" for the miss list.

The boss is just the life counter

Three lives. The face is an array indexed by how many you have left:

const MOODS = ["🤯", "😡", "😒", "😌"];
// lives 3 → 😌, 2 → 😒, 1 → 😡, 0 → 🤯

A mistake — shred a fine email, or let a stiff one land — costs a life and resets the streak. Ten correct calls while hurt restore a life (HEAL_EVERY = 10). At zero lives the engine explodes and the DOM adds a boom class.

A daily shift seeds a mulberry32 RNG with the local date (YYYYMMDD) and shuffles the deck, so everyone that day sees the same order. Practice uses a random 32-bit seed. No server is required.

Share cards, language, and UTM without a backend

The result screen draws a 1080×1080 card — rank, score, shredded count, best streak, a hit/miss grid — then offers a PNG download, a blob for navigator.share({ files }), and share text for X and Reddit.

Language is a three-step pick: ?lang=ko or ?lang=en, then a localStorage key sof-lang, then navigator.language. The chip toggles English and Korean with history.replaceState and re-renders the card.

End-screen links get UTM tags. The page cannot phone home, so the traffic source is read from the query string and the referrer:

function trafficSource() {
  const q = new URLSearchParams(location.search);
  const hinted = (q.get("src") || q.get("from") || "").toLowerCase();
  if (hinted.includes("itch")) return "itch";
  if (hinted.includes("gamejolt") || hinted === "gj") return "gamejolt";
  const hay = `${location.hostname} ${document.referrer}`;
  if (/itch\.(io|zone)|itch\.fun/i.test(hay)) return "itch";
  if (/gamejolt\.(com|net|io)/i.test(hay)) return "gamejolt";
  return "web";
}

That becomes utm_content (itch, gamejolt, or web), with utm_source=inbox_defense, utm_medium=game, and utm_campaign=endscreen.

Promo videos from real canvas input

A Playwright script opens the live site in headless Chromium, starts a practice shift, and reads card positions from window.__sof. It issues real mouse swipes through card centers, plays well enough to show a chain, then makes mistakes so the boss escalates on camera. Chromium records a WebM; a second script overlays hook text and ffmpeg-exports the mp4s and GIFs. The videos are silent: headless Chrome does not capture tab audio, and the sounds are a WebAudio synth with no audio files.

What I'd keep

Keep logic out of the renderer if you want tests. Use time-scale for slow-mo and hit-stop. Seed the RNG with the local date for daily scores without accounts. Drive real input for canvas promo footage.

If a "stiff / fine" call looks wrong, tell me.

Built with AI help, then edited.