
Show HN: I made a Doom-like game fit inside a QR code by kuberwastaken
Yes, this is literally the entire game. You can scan it to play.
The Backdooms is a compressed, self-extracting and infinitely generating HTML game inspired by DOOM 1993 and The Backrooms that can be launched and played in a web browser directly from a QR code.
This project was a week-long study I performed (now slightly longer) designed to push the limits of QR code storage and compression, to demonstrate an innovative method of hosting lightweight web applications entirely within a QR code.
Play a slightly less compressed version of this game here
Yes, it’s 8bit Undertale Music There
✅ Fully Offline: No internet connection is required to play the game after scanning the QR code. The URL basically has the ENTIRE code to the game
✅ Extreme Compression: Utilizes a combination of Zlib compression with Gzip Decompression stream along with base64 encoding to make the final result extremely compressed.
✅ Self-Extracting Webpage: Uses the DecompressionStream
API to dynamically decompress and execute the game within the browser.
✅ Mobile Compatible: Works on modern mobile browsers that support the Decompressionstream APIs (Edge, Yandex, Opera). NEW
Well, technically speaking, just a modern web browser.
But if we do get into the nitty gritty of generating a QR code of a ≈ 2.5kb game:
- Python 3.7+
qrcode
library (for generating QR codes)pillow
(for QR code image handling)
Run the script with the following command:
Example:
python3 QRGEN.py EVEN-SMALLER-SLAMMER-BACKROOMS.html qrcode.png
Use a smartphone or QR scanner to open the game directly in a web browser.
Enjoy The Backdooms without needing to download or install anything!
B[Compress with Zlib]n B –>|wbits=15| C[Base64 Encode]n C –> D[Embed in HTML Wrapper]n n subgraph browser[Browser Processing]n D –> E[DecompressionStream ‘gzip’]n E –> F{Format Mismatch}n endn n F –> G[Convert to Data URI]n G –> H{Fits QR Code?}n H –>|Yes| I[Generate QR]n H –>|No| J[Reduce HTML Size]n J –> An”}” data-plain=”flowchart TD
A[Read Input HTML] –> B[Compress with Zlib]
B –>|wbits=15| C[Base64 Encode]
C –> D[Embed in HTML Wrapper]
A[Read Input HTML] –> B[Compress with Zlib]
B –>|wbits=15| C[Base64 Encode]
C –> D[Embed in HTML Wrapper]
subgraph browser[Browser Processing]
D –> E[DecompressionStream ‘gzip’]
E –> F{Format Mismatch}
end
F –> G[Convert to Data URI]
G –> H{Fits QR Code?}
H –>|Yes| I[Generate QR]
H –>|No| J[Reduce HTML Size]
J –> A
” dir=”auto”>
flowchart TD
A[Read Input HTML] --> B[Compress with Zlib]
B -->|wbits=15| C[Base64 Encode]
C --> D[Embed in HTML Wrapper]
subgraph browser[Browser Processing]
D --> E[DecompressionStream 'gzip']
E --> F{Format Mismatch}
end
F --> G[Convert to Data URI]
G --> H{Fits QR Code?}
H -->|Yes| I[Generate QR]
H -->|No| J[Reduce HTML Size]
J --> A
Loading
Read Input HTML: The process starts by reading the given HTML content from a file or input source.
Zlib Compression + GZip decompression: The HTML is compressed using Zlib and uses Decompressionstream from GZip for best compression
Base64 Encoding: The compressed data is encoded in Base64, ensuring that it remains text-based and can be embedded in an HTML file safely.
Embedding in HTML Wrapper: A JavaScript-based self-extracting HTML wrapper is created. This wrapper includes a Dec
15 Comments
kuberwastaken
I sometimes pick up random projects just because I can, this was one of those times. I made it as a week long project a while back this year but never shared here, so thought to go for it haha.
I created a game inspired by Doom and the backrooms called The Backdooms under 2.4kb in minified html. (for reference, this entire post would be around 1.8kB haha)
I had to use a not popular way of using GZip with Zlib headers (had to write my own script for compressing it, also in the repo) to eventually convert it a size 40 QR code that works right in your browser using Decompressionstream API.
This is of course a very oversimplified description of it, using a lot of the same technologies that DOOM had but combining it with infinite seed based map generation in 2.4kb (QR codes can only store 3kb, which includes changing formats) was pretty hard.
Here are some links about it if you want to nerd out and read more:
Repository Link (MIT License): https://github.com/Kuberwastaken/backdooms
A Hosted (slightly improved) version of The Backdooms: https://kuberwastaken.github.io/backdooms/
Game Trailer: https://www.youtube.com/shorts/QWPr10cAuGc
My Linkedin post about it: https://www.linkedin.com/feed/update/urn:li:activity:7295667…
(PS: You'd need something like https://qrscanner.org/ or something that can scan bigger QR codes and put the text data onto your browser to play it)
My Blogs documenting the process and development in detail:
https://kuberwastaken.github.io/blog/Projects/How-I-Managed-…
https://kuberwastaken.github.io/blog/Projects/How-I-Managed-…
jasonjmcghee
You should update the css for the canvas to be `image-rendering: pixelated` so things look crisp rather than blurry!
the_arun
My iPhone camera says – "No Usable Data found" when I scan the QR code.
On a different context, loading a game in QR code also made me to think, can anyone inject a malware script using QR codes?
giarc
I scanned on an iPhone using native QR code scanner and it says "no usable data found".
deadbabe
How can there not be even one screenshot of the game in the readme?
jerjerjer
Year 3567: automatic interstellar probe finds remnants a technical alien civilization.
Year 3678, Show HN: I compiled DOOM for an alien CPU architecture.
Vernor Vinge kind of touches this topic a bit in his Zones of Thought series.
Lerc
I don't want to take away from the achievement because it really is awesome, and should be celebrated.
…but…
It seems like a fundamental design issue to make a QR code game that isn't designed for the platform where QR codes are most used.
EGreg
Reminds me of my submission to Allegro SizeHack 25 years ago, in 2000:
https://www.oocities.org/trentgamblin/sizehack/entries.html#…
I made a PacMan-like game in under 10KB… it was called HackMan :)
But I am most proud of the storyline that came with it!
rezmason
Keep making cool things, kuberwastaken
selfselfgo
[dead]
bhavik_dand
crazy stuff!!
kuberwastaken
Update: Managed to add kind of some mobile touch support (literally insane) because of a PR by @sangeeth96 on the repo
smusamashah
Please add a few screenshots to the repo. I am on phone and for whatever reason all I could see was 3 buttons and black screen.
Edit: Add a gif instead, you won't have to rely on YouTube with that.
metalman
I am now waiting for news that someone has bio hacked a cockroach or a fruitfly to play doom, if not autonomously then for the full cold shivers, they are now robotisising insects, which could then be accesed through an interface to play doom
on a toothbrush booted from a qr code.
Sci-fi is lagging
Bengalilol
Great crazy thing!
I am waiting for the addition of "self contained QR code" to canitrundoom (although I don't know if it can be technically approved).
Yet… that game will now make me think twice before scanning any QR ^^