Browser Games Made in 10 Lines of Code

A complete, playable browser game in ten lines of JavaScript sounds like a trick. It mostly isn’t. Snake, Pong, Breakout, Tetris, and Conway’s Game of Life all have working ten-line implementations that you can paste into a Canvas-equipped HTML file and run. The catch is that “ten lines” is a generous interpretation — minified, comma-chained, packed with shortcuts — but the result is a real game. Browser games in 10 lines of code are a microcosm of code-golfing culture: extreme constraint, surprising results, and a community that takes the format seriously.

The ground rules of ten-line games

“Ten lines” isn’t strictly enforced. The code-golfing community accepts long compound statements on a single line as long as they’re syntactically a single statement. JavaScript’s grammar allows enormous compound expressions — comma operators, chained method calls, ternary cascades — that can fit a full game loop into a single semicolon-terminated line.

The typical structure of a ten-line browser game:

• Line 1: Set up Canvas reference, dimensions, initial state.
• Lines 2–4: Define game state (player position, enemies, score) as global variables.
• Line 5: Attach keyboard event listener.
• Lines 6–9: The main loop — clear, update, render — usually wrapped in setInterval.
• Line 10: Start the loop.

Some games squeeze more in. Snake in particular has been demonstrated in fewer than ten lines once the canvas setup is folded into the loop.

Ten-line Snake

Snake is the most common ten-line target because the game logic is simple. You need a snake (array of coordinates), a food position, an input direction, a collision check, and a render step. All of those fit in one comma-chained expression if you’re willing to abuse the language.

A typical ten-line Snake renders into a 20-by-20 grid drawn via fillRect calls, takes WASD or arrow input, and ends when the snake hits itself or the wall. The score is the snake length. It’s not pretty, but it plays exactly like Snake plays.

For more on the genre’s history, our Snake history piece traces the lineage from Blockade to the Nokia 6110 to slither.io.

Ten-line Pong

Pong needs two paddles, a ball with x/y velocity, a collision check, and a render step. Single-player versions (one paddle controlled by the player, one by a trivial AI tracking the ball) fit comfortably in ten lines.

Two-player Pong with keyboard input for both paddles is harder but still feasible. The trick is reusing the keyboard handler for both players’ keys, which most implementations do by checking key codes inside the update loop rather than via separate event listeners.

Ten-line Tetris

Tetris is the hardest of the common ten-line targets. The game has seven distinct piece shapes, four rotation states per piece, a 10-by-20 grid, line-clear logic, and an increasing fall speed. Fitting all of that in ten lines requires aggressive shortcuts.

Working ten-line Tetris implementations exist. They typically encode the seven piece shapes as bitwise patterns in a single string and use modulus arithmetic to handle rotation. The line-clear logic is folded into the render step. The result is technically Tetris — it follows the rules, it scores, it ends when the stack reaches the top — but it’s a single dense block of code that few people would write deliberately.

Ten-line Conway’s Game of Life

Conway’s Game of Life isn’t a game in the player-input sense, but it’s a frequent ten-line target because the rules are so compact: a cell survives if it has 2 or 3 living neighbors, dies otherwise; a dead cell with exactly 3 living neighbors becomes alive. Encoding that as a Canvas-rendered grid that updates each frame fits in roughly five lines if you’re aggressive.

Ten-line Life implementations are common as JavaScript fluency demonstrations. Many introductory Canvas tutorials use Life as the first nontrivial example precisely because it’s so concise.

Ten-line Breakout

Breakout needs a ball, a paddle, a grid of bricks, and collision detection between the ball and each brick. The brick grid is the bulk of the data; encoding it as a 2D array (or a single string read with substring) fits the rest of the game loop comfortably.

The classic ten-line Breakout uses paddle movement controlled by mouse position (cheaper than keyboard handling because it’s one event listener with the X coordinate), a ball that resets when it falls past the paddle, and a win condition triggered when all bricks are cleared.

The code-golfing culture

Browser games in 10 lines exist within a broader code-golfing community. Stack Exchange’s Code Golf site has thousands of challenges; the Twitter “tweet-cart” trend of the late 2010s pushed similar constraints; the Js13kGames contest pushes the same instincts up to a 13-kilobyte ceiling. Across all of these, the same impulse drives entries: maximum game inside minimum source.

The community has its own folklore. Famous golfed solutions get traded and analyzed. Bytes saved by clever tricks (using the comma operator instead of semicolons, abusing implicit globals, encoding lookup tables as strings) become well-known idioms. Some idioms are general-purpose; others are specific to particular Canvas APIs or to specific math tricks that compress nicely.

Why this is harder than it looks

Writing a normal-sized game is one challenge. Writing a ten-line game requires a different skill: thinking about what the language offers as built-in shortcuts. JavaScript’s loose type coercion, its expression-everywhere syntax, its terse Math API, its short property names on Canvas contexts — all of these become tools rather than quirks when you’re working at code-golf scale.

Reading ten-line games teaches surprisingly practical lessons about the language. Many JavaScript developers learn things from code-golf entries that they couldn’t have picked up from normal codebases, because the constraints push the language into corners that no production code would ever visit.

The bigger context: tiny code as art

Ten-line games are a specific instance of the broader “tiny code” movement that includes the demoscene, fantasy console contests (PICO-8 jams), and academic interest in minimal programming. The shared belief is that constraint is generative — that limits, far from suppressing creativity, channel it.

The Wikipedia article on code golf covers the practice’s origins in the Perl community and its spread to JavaScript and beyond. Browser games in 10 lines sit in that lineage.

Should you write a ten-line game?

If you want a fun JavaScript exercise — yes. You’ll learn idioms that don’t show up in normal practice. If you want to ship a real game, no — production games need maintainable code, not packed expressions. The two pursuits sit on opposite ends of the software-engineering spectrum, and they’re each enjoyable on their own terms.

For a simple browser game built with normal code rather than code-golf code, the Chrome Dino game on the homepage is roughly a thousand lines of readable JavaScript — much larger than ten, but still small enough to read end-to-end. For more on minimal games where the code stays simple, see our no-graphics games roundup.

Frequently asked questions

Can you really make a browser game in 10 lines of code?

Yes, with caveats. The “lines” are abused — long expressions, comma chaining, minimal whitespace. Working Snake, Pong, Breakout, and even Tetris implementations have been demonstrated in ten lines of JavaScript with Canvas rendering.

What’s the smallest playable browser game?

Sub-256-byte games exist in serious code-golf circles. A 230-byte Snake clone has been demonstrated, and even smaller games (around 100 bytes) work for trivial single-mechanic concepts.

Is writing ten-line games useful skill development?

It teaches JavaScript idioms that don’t appear in normal code. The trade-off is that ten-line code is unmaintainable, so the practice is recreational rather than professional. Many developers find it sharpens their language fluency in useful ways.

What’s the JS1k contest?

JS1k was an annual JavaScript code-golfing contest founded by Peter van der Zee in 2010 that accepted entries up to 1024 bytes. It ran until 2019 and produced hundreds of playable games and visual demos. The archive is still browsable online.

Why use Canvas instead of DOM for tiny games?

Canvas’s API is shorter — fewer characters per operation than equivalent DOM manipulation. For code-golf purposes, every byte matters, and Canvas’s terse drawing methods (fillRect, fillText) compress better than DOM equivalents.

The takeaway

Browser games in 10 lines of code aren’t a stunt — they’re a creative tradition with a defined community, established idioms, and a growing archive of inventive entries. Reading them is a quick way to see what JavaScript can do when you treat every character as a budget item. The genre is small, occasionally elegant, and worth a few hours of any curious developer’s attention.