惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
Google DeepMind News
Google DeepMind News
Microsoft Security Blog
Microsoft Security Blog
Martin Fowler
Martin Fowler
MyScale Blog
MyScale Blog
The GitHub Blog
The GitHub Blog
I
InfoQ
A
About on SuperTechFans
GbyAI
GbyAI
宝玉的分享
宝玉的分享
爱范儿
爱范儿
博客园 - 【当耐特】
博客园 - 司徒正美
博客园 - 聂微东
P
Proofpoint News Feed
WordPress大学
WordPress大学
云风的 BLOG
云风的 BLOG
Last Week in AI
Last Week in AI
阮一峰的网络日志
阮一峰的网络日志
B
Blog RSS Feed
Jina AI
Jina AI
aimingoo的专栏
aimingoo的专栏
J
Java Code Geeks
博客园 - 叶小钗

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I built a one-button game in vanilla JS Canvas — single f...
EmaadS · 2026-05-29 · via DEV Community
Cover image for I built a one-button game in vanilla JS Canvas — single file, no engine, plays in your browser

EmaadS

▶️ Play it first (10 seconds): https://emaadshamsi.github.io/paper-hands/

It's called PAPER HANDS. One button. The line goes up while you hold — your
multiplier climbs, and so do the odds it all rugs. Let go to bank it. Hold too
long and you lose the whole run. Pure greed, distilled.

No engine, no build step, no dependencies — one index.html, ~250 lines of Canvas.
Here's how it works.

The whole game is one loop: greed vs. risk

The mechanic is a single tension: every moment you don't sell, you earn more — and
get closer to losing everything.

if (held) {
  const rate = 1.1 + mult * 0.16;   // climbs faster the higher it goes
  mult += rate * dt;
  // near-safe early, risk ramps steeply as you get greedy:
  const pct = (0.0028 + Math.pow(Math.max(mult - 1, 0), 1.6) * 0.0015) * (dt * 60);
  if (t > 0.6 && Math.random() < pct) gameOver();   // 0.6s grace so you never insta-rug
}

That Math.pow(mult-1, 1.6) curve is the entire feel of the game. My first version
used a flat crash chance and players rugged in the first second
— brutal, not fun.
Swapping to a curve that's almost-safe at low multipliers and punishing only when you
get greedy (plus a 0.6s grace per pump) turned it from frustrating into "one more run."
Balance is a one-line change you only find by playing.

Juice with zero assets

No sprites, no audio files. Everything is procedural:

  • Sound = WebAudio oscillators — a rising blip while you pump, a noise burst + a detuned saw on the rug.
  • Feel = screen shake (ctx.translate(rand, rand) scaled by a decaying shake), particle bursts on bank/crash, a glowing price marker, CRT scanlines via a CSS repeating-linear-gradient overlay.
function tone(freq, dur, type='square', vol=.16){
  const o=ac().createOscillator(), g=ac().createGain();
  o.type=type; o.frequency.value=freq; g.gain.value=vol;
  o.connect(g); g.connect(ac().destination);
  const t=ac().currentTime;
  g.gain.exponentialRampToValueAtTime(.0001, t+dur);
  o.start(t); o.stop(t+dur);
}

A little juice on a trivial mechanic does more for "fun" than a complex mechanic with
none.

The viral hook is one URL param

On game over you can copy a brag link — ?s=<score> — and whoever opens it sees
"a friend banked $4,200 — beat them" on the menu. No backend, no accounts:

const beatTarget = +(new URLSearchParams(location.search).get('s') || 0);

Why single-file?

It deploys anywhere static — I dropped it on GitHub Pages and it was live in a minute.
Whole thing (HTML + CSS + JS) is one file you can read top to bottom.

Play: https://emaadshamsi.github.io/paper-hands/
Code: https://github.com/emaadshamsi/paper-hands

Curious what scores people get — drop yours in the comments. 📈