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.