Neon Tetris — A Playable, Phone-Friendly Tetris in One HTML File
Background
Tetris is a small game with a surprisingly deep rulebook. I wanted to build one that plays like the modern “guideline” versions rather than a bare-bones clone: the rotation system, the piece randomizer, the lock delay, the scoring rules. Just as important, I wanted it to be something I could open on my phone and play immediately: no app store, no install, no account.
What I built
A complete game in one self-contained HTML file, with no libraries and no external assets:
- Guideline mechanics — a 10×20 playfield with a hidden buffer above it, the Super Rotation System with wall and floor kicks, and a 7-bag randomizer so you never wait long for the piece you need.
- Hold and next queue — one hold slot, once per piece, and a five-piece preview.
- Scoring that rewards skill — line clears scale with level, plus T-spins, combos, and back-to-back bonuses, with on-screen callouts when you land one.
- Gravity and lock delay — gravity speeds up with each level, and pieces get a short lock delay with a capped number of resets, so you can slide a piece into place without stalling forever.
- Responsive controls — keyboard with tuned auto-repeat (DAS/ARR) on desktop, and an on-screen touch pad on phones, with the layout switching for portrait and landscape.
- Polish — a ghost piece showing where the piece will land, screen shake and glow effects, synthesized sound, and a best score saved in the browser.
- Settings — volume and mute, ghost piece on or off, effects level, screen shake, and a reduced-motion option.
Outcome
- Play it here — on desktop with the keyboard or on a phone with the touch pad.
- One file, no build step, no network requests for the game itself.
- The touch layout adapts to portrait and landscape, and respects the device’s safe-area insets.
- Analytics are consent-gated like the rest of the site: nothing is collected unless you accept the banner.
Stack rationale
Plain HTML, CSS and JavaScript in a single file. The game has no need for a framework or a bundler. One file is easy to host, easy to cache, and easy to open from anywhere.
Canvas for rendering. The board, hold and next-queue panels are drawn on canvases. That keeps redraws cheap and makes effects like the lock-delay indicator and the level-up glow simple.
A separate game core. The rules (rotation, kicks, the bag, scoring, gravity) live in their own module with no DOM access, and the rendering, input, and audio layers sit on top. That separation keeps the rules testable and stops UI code from leaking into the game logic.
Web Audio instead of audio files. Sound effects are synthesized on the fly, so there are no assets to download and the file stays self-contained. The audio context is created lazily, on the first user gesture, as mobile browsers require.
localStorage with a fallback. The best score and settings persist between sessions. If storage is blocked (private mode, for example), the game falls back to memory and keeps working.
Built with Claude Code. I described the rules and the feel I wanted, and iterated with it until the controls felt right.
Personal project. Tetris is a trademark of its respective owner; this is an independent, non-commercial fan implementation built for fun and learning.