FREE & OPEN SOURCE
HTML5 Games
Free Breakout Game with Roguelite Power-Ups — Single HTML File (Hyperion Breakout Pro)
Hyperion Breakout Pro: Arkanoid with roguelite drops in one HTML file — wide paddle, multi-ball, auto-firing laser paddle and piercing plasma capsules. Zero dependencies, mobile-ready.
What it is
Hyperion Breakout Pro is classic Breakout with a roguelite drip-feed: every broken brick has a 24% chance to drop a capsule, and catching one changes how the round plays. W widens the paddle (stacking up to nearly double), M splits the ball into three, L turns the paddle into an auto-firing twin laser battery for seven seconds, and F converts every ball into piercing plasma that plows through bricks without bouncing.
Paddle English is real: the reflection angle depends on where the ball lands on the paddle, so aimed shots and corner digs work like they should. Clearing a sector escalates the next one — more rows, and armored two-hit bricks along the top. Lives, sectors and score sit in a neon HUD; sounds are synthesized; the whole game is mouse- and touch-controlled from one file.
Paddle English is real: the reflection angle depends on where the ball lands on the paddle, so aimed shots and corner digs work like they should. Clearing a sector escalates the next one — more rows, and armored two-hit bricks along the top. Lives, sectors and score sit in a neon HUD; sounds are synthesized; the whole game is mouse- and touch-controlled from one file.
Hyperion Breakout Pro vs the usual way
Breakout clones are everywhere; ones you can read, own and reskin in an afternoon are rarer. 375 lines, MIT.
| Feature | Hyperion Breakout Pro (single file) | Typical engine-based equivalent |
|---|---|---|
| Files to deploy | 1 HTML file | Framework bundle + assets + build output |
| External dependencies | 0 | Game engine (Phaser/Unity/…) + toolchain |
| Art & audio assets | None — Canvas drawing + synthesized sound | Sprite sheets, audio files |
| Mobile touch support | ✓ built in | Varies |
| Embed with an iframe | ✓ anywhere | Usually |
| Readable, remixable source | ✓ ~375 lines, MIT | Minified bundles |
Server requirements & dependencies
- Any modern browser — desktop or mobile. Nothing else.
- No build step, no server, no game engine, no external libraries.
- No image or audio assets: every sound is synthesized live with the Web Audio API.
- Embeds anywhere with a plain <iframe>.
How to install
1. Download and unzip — you get index.html and a README.
2. Double-click index.html, or upload it to any static host (shared hosting, GitHub Pages, Netlify, an S3 bucket… anything that serves a file).
3. To embed it in an existing site: <iframe src="/games/index.html" width="860" height="620"></iframe>. That's the whole deployment story.
2. Double-click index.html, or upload it to any static host (shared hosting, GitHub Pages, Netlify, an S3 bucket… anything that serves a file).
3. To embed it in an existing site: <iframe src="/games/index.html" width="860" height="620"></iframe>. That's the whole deployment story.
The prompt — build it yourself
Paste this into Gemini and you'll get this product. This is the actual spec that produced the code above.
Community build: one of six HTML5 games generated by the site's owner with Google Gemini 3.1 Pro — each a true zero-shot: one prompt, one file, ~10 seconds of generation, no external libraries, images or audio (all sound is Web Audio synthesis). The exact prompt, verbatim (in Turkish, as written):
Klasik Breakout/Arkanoid mekaniğini roguelite güçlendirmelerle birleştiren tek dosyalık 'Hyperion Breakout Pro' oyununu saf HTML5 Canvas ve JS ile yaz. Kırılan tuğlalardan %24 ihtimalle 4 farklı güçlendirme kapsülü (Geniş Raket, Çoklu Top, Otomatik Ateşleyen Lazer Raketi ve Tuğlaları Delip Geçen Plazma Topu) düşsün. Sektör temizlendikçe zorlaşan aşamalı yapı ve sentezlenmiş ses efektleri içersin.
Verified before publishing: every file read line-by-line, UI strings localized to English for this showcase, and each game deployed and played on the live demo. All four capsule types trigger their advertised effects, and paddle-position-based reflection is implemented correctly.
Klasik Breakout/Arkanoid mekaniğini roguelite güçlendirmelerle birleştiren tek dosyalık 'Hyperion Breakout Pro' oyununu saf HTML5 Canvas ve JS ile yaz. Kırılan tuğlalardan %24 ihtimalle 4 farklı güçlendirme kapsülü (Geniş Raket, Çoklu Top, Otomatik Ateşleyen Lazer Raketi ve Tuğlaları Delip Geçen Plazma Topu) düşsün. Sektör temizlendikçe zorlaşan aşamalı yapı ve sentezlenmiş ses efektleri içersin.
Verified before publishing: every file read line-by-line, UI strings localized to English for this showcase, and each game deployed and played on the live demo. All four capsule types trigger their advertised effects, and paddle-position-based reflection is implemented correctly.
Reviews
Used Free Breakout Game with Roguelite Power-Ups — Single HTML File (Hyperion Breakout Pro)? A star rating takes two seconds and helps others.
More builds
License: MIT — free for personal and commercial use, no warranty. Software is provided as is; review the code before running it in production (it's short enough to actually read).