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

推荐订阅源

Y
Y Combinator Blog
Jina AI
Jina AI
雷峰网
雷峰网
有赞技术团队
有赞技术团队
WordPress大学
WordPress大学
美团技术团队
V
V2EX
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
博客园 - Franky
博客园 - 三生石上(FineUI控件)
月光博客
月光博客
博客园 - 叶小钗
大猫的无限游戏
大猫的无限游戏
爱范儿
爱范儿
Hugging Face - Blog
Hugging Face - Blog
宝玉的分享
宝玉的分享
Last Week in AI
Last Week in AI
Apple Machine Learning Research
Apple Machine Learning Research
量子位
IT之家
IT之家
人人都是产品经理
人人都是产品经理
博客园_首页
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com

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. 📈