▲ 531 points

Show HN: I made a Doom-like game fit inside a QR code

github.com

by kuberwastaken·1y ago·136 comments·view on hn ↗

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

136 comments

TIL DecompressionStream, thanks. I managed to shave some more bytes by trimming the HTML bits, raised a PR in case you're interested.

YOU'RE A LEGEND! I just managed to ADD (somewhat of) TOUCHSCREEN SUPPORT, better movement, enemy spawning and damage mechanisms in the space that freed up because of this! Genuinely, thank you, made my month :)

Really cool project! TIL about 'data:' URLs—while I was familiar with the 'data:' URI scheme and had used it before, I didn’t realize it could be used as a full URL. Funny enough, I had been thinking about building something similar that fits entirely within a QR code, but I held off because I mistakenly thought it would require an HTTP(s) link. I was heavily inspired by this work: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

Thank you for your kind words! I was also inspired by this video back in lockdown, I believe, super cool but I went the opposite route for browser based because of more compatibility.

I have them credited in the repo as well :P

Pardon my dumb query, as I'm a tech novice, but aren't QR just encodings of data? And the max amount of data a QR can encode is like 3kb, which would roughly correspond to 3000 or so plaintext characters. So the achievement here is that this Doom-like game can be run from an executable roughly of that size?

QR codes have various encoding modes: numeric, alphanumeric, 8 bit and kanji. The most common is alphanumeric encoding and the densest is 8 bit encoding which just stores binary data.

The QR code standards seem to be a little ambiguous on the meaning and purpose of the 8 bit encoding. I got the impression they added it to support alternative character encodings. Still, it's a mode that "represents an 8-bit byte value directly".

> The default interpretation for QR Code is ECI 000020 representing the JIS8 and Shift JIS character sets.

> 8.3.4 8-bit Byte Mode

> The 8-bit byte mode handles the 8-bit Latin/Kana character set in accordance with JIS X 0201 (character values 00HEX to FFHEX).

> In this mode data is encoded at a density of 8 bits/character.

> 8.4.4 8-bit Byte Mode

> In this mode, one 8 bit codeword directly represents the JIS8 character value of the input data character as shown in Table 6, i.e. a density of 8 bits/character.

> In ECIs other than the default ECI, it represents an 8-bit byte value directly.

In any case, it is possible to use QR codes to store arbitrary binary data. The qrencode tool can do this natively. Decoder support is more tricky, they tend to assume all QR codes contain text. I had to send patches to zbar to help it decode QR codes with binary data in them because it was passing the data through iconv and mangling the output. I also had to add options to the zbar tools to make them decode exactly one QR code

I just wanted to print out 4096 bit RSA secret keys as QR codes. People started QR encoding video games pretty soon after. It's awesome.

https://youtu.be/ExwqNreocpg

https://news.ycombinator.com/item?id=24287347

I scanned on an iPhone using native QR code scanner and it says "no usable data found".

data: URI URLs aren't supported in it, it has nothing to do with the size / length of the QR code

For example, this self-contained webpage: <html><body>Hi!</body></html>

encoded is: data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4=

If you paste that into a browser, it will render "Hi!". Very short and easy.

But if you encode is as a QR code, it won't work in this situation.

Hey thanks for checking it out! You'd need something like https://qrscanner.org/ because most phones suck at scanning larger QR codes.

Also, it won't work on your phone, can't put in that compatibility with size restraints, sadly.

I'm kinda relieved that it doesn't work on an iPhone. I often scan codes posted around to save the time typing URLs and running arbitrary code by just scanning a QR code freaks me out.

You should update the css for the canvas to be `image-rendering: pixelated` so things look crisp rather than blurry!

I tried that but this just looks more fun and retro haha

Next project: LLM as a QR code

Update - Somewhat made this lol (not a LLM but a cool chatbot nonetheless) https://github.com/Kuberwastaken/MiniLMs/tree/main/SYNEVA

Honestly, I might try a version of it, thanks

Your game trailer links to a short called "Fly me to the moon - 19 September 2024". I think this is a mistake?

Should be fixed, sorry haha

Love these minimal game projects. Reminds me of .kkrieger

https://en.wikipedia.org/wiki/.kkrieger

Keep making cool things, kuberwastaken

A friend and I were talking about a somewhat related idea.

We were wondering if we could encode the STL for a 3d print entirely into a QR code and then put that on the actual printed object - so that any piece you made could be replicated by just scanning the object and printing again.

When looking into it I thought it just was too much data, even looked into multi-colored QR codes. But I didn’t realize you could just make a bigger QR code…

In the last Def Con 32 the badge can run full Doom on Pico 2 [1].

[1] Running Doom on the Raspberry Pi Pico 2: A Def Con 32 Badge Hack:

https://shop.sb-components.co.uk/blogs/posts/running-doom-on...

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!

This is very cool. On a similar bent I built https://urlfile.app because I wanted to see if I could share files via a URL (and I also wanted to genrate QR codes via Edge so I could load the files onto my phome). It works for small files fairly well...

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

Pretty cool, though like others I had some slight technical issues. On Firefox mobile I got a black screen (that was yesterday, maybe it's been updated since then). Firefox desktop today it worked once I figured out that:

a) the keyboard doesn't work until after I click to fire, and this state resets itself every time I press f5 to restart the game (presumably a browser focus issue)

b) both up/down and w/s work for back and forward, but a and d don't work for left and right, you need to use the left/right arrows.

The combination of the two had me scratching my head for a little while!

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 ^^

Tested it on an offline Android. I'm amazed that it works, although I could never figure out the controls so I always end up dead within a few seconds!

You might want to explain those controls in the readme :)

How can there not be even one screenshot of the game in the readme?

This stuff is starting to feel closer to Snow Crash than I'm comfortable with, when I saw that QR code I wondered if my brain was being altered :-D Amazing work.

This is super cool. Recently, I tried making an offline, P2P chat program that fits inside of a QR code. In case network was down, the code could be scanned by mobile, allowing users to join a chat room. However this doesn’t seem possible at the moment, as 1. browsers don’t allow offline direct communication for safety reasons 2. couldn’t fit all needed data/prereq modules within the QR.

Very cool! Minor nitpick though: DOOM didn’t use raycasting. This is really a Wolfenstein 3D-like, since Wolf3D did use ray casting.

Very cool! You‘ve definitely motivated me to continue my own experimentation in the realm of „what cool stuff can I put in a QR code“: https://strich.io/blog/posts/embedding-webassembly-in-qrcode...

Update: Managed to add kind of some mobile touch support (literally insane) because of a PR by @sangeeth96 on the repo

After several tries, i managed to play it, sort of, on Brave on my Samsung S9.

Very impressive compression trick, as a proof of concept, it is worthy of praise, congrats.

I imagine this approach could be used for much more practical uses.

Firefox mobile on Android gives "Cannot complete request; Additional information about this problem or error is currently unavailable" :(

I really like this idea. You're a legend!

I think your trailer video link is bad.

What you mean doom like ?

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.

crazy stuff!!

Wow!

If that QR code itself appeared as a texture on a wall inside the game, I would shit my pants.

cute

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.

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.

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?