Skip to content(if available)orjump to list(if available)

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

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

sangeeth96

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

kuberwastaken

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 :)

sangeeth96

Damn, that’s awesome! Glad that was a help :D

collingreen

Open source victory right here

r1chardnl

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

kuberwastaken

Should be fixed, sorry haha

dylan604

Never gonna give you up lives on in new ways

alex_suzuki

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

x3n0ph3n3

I think your trailer video link is bad.

kuberwastaken

Fixed it! My bad haha

redbell

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)

kuberwastaken

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

cosignal

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?

matheusmoreira

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

redeyedtreefrog

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!

kuberwastaken

Heyo! Thanks for checking it out! "On Firefox mobile I got a black screen" - Yup I broke it while trying to add mobile controls earlier, but it works well now!

"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" yes- this is actually something for starting the game music and some other processes

giarc

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

pudquick

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.

myfonj

You don't even need the base64 encoding for dataURIs: just throw the text payload after mime-type and a comma:

    data:text/html,<!doctype html><title>Hi!</title><p>Hello.
This is also a valid self-contained HTML document. You have to add `;charset=utf-8`, if you need to go beyond ASCII, and for some browsers watch for URI-encoding of some syntactically significant characters (like `#` and `%`, `?`).

Base64 is indeed good to be "safe" and/or somewhat 'conceal' the payload, but it also makes it larger by 1/3 (every three bytes of input become four characters of the base64 output). So taking the risk some devices would not like raw "ASCII dataURI", the QR of the backrooms QR could shave off 738 bytes.

BTW, this is my "HTML sandbox" for testing stuff in a browsers that I summon daily through keyword bookmark to test simple stuff:

    data:text/html;charset=utf-8;verbatim,<!doctype html><html style="color-scheme:dark light"><title>HTML sandbox 2.0.6</title><meta name=viewport content=width=device-width,initial-scale=1><body style=margin:0;display:flex;height:100vh onload="OT=(DC=document).title,H=(L=location).hash.slice(1)||'',RX=/(^data:.+?(;verbatim)?,)?([^]*)/,A.value=H.match(RX)[2]?H:decodeURIComponent(H)||A.value;T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=()=>{if(W!=(V=A.value))W=V,M=V.match(RX),I.src=M[2]?V:(M[1]||D)+encodeURIComponent(M[3]),DC.title=NT=((TM=V.match(/<title\b[^]*?\x3E([^]*?)<\/title\b/m))&&(NT=TM[1])&&(NT=NT.trim())&&(DC.title=NT+' @ '+OT))||OT};F()"><textarea autocapitalize=off style=resize:horizontal;width:50vw autofocus id=A onkeyup=clearTimeout(T);T=setTimeout(F,400) onblur=try{history.pushState({},NT,'\u0023'+(S=I.src.replace(E,'')))}catch(e){L.hash=S}><!doctype html><html lang="en" style="color-scheme: dark light;">%0A<meta name="viewport" content="width=device-width, initial-scale=1">%0A<title>%0A%0A</title>%0A<style>%0A%0A</style>%0A<body>%0A%s%0A<script>%0A%0A</script>%0A</textarea><iframe style=border:0;flex-grow:1;width:0 id=I>

reaperducer

I think I'm going to find this useful.

Duck browser doesn't allow it to be saved as a bookmark, but Safari is fine with it.

kuberwastaken

I think it's broken for safari but works on chromium based browsers on mobile too. The QR code basically holds the URI URL itself.

pudquick

I'm saying the primary gateway most iOS users are using for loading a QR code - the camera app - will not present a transition to load your URL in this situation

Whether the resulting HTML game is playable in Safari is a different discussion.

The QR code, as generated, is effectively "not clickable" for most iOS users, unless they are using something other than the most common way to read QR codes on their phone like a 3rd party QR code reading app or similar.

kuberwastaken

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.

ascorbic

fwiw, it works fine with the Pixel's built-in QR code scanner. It recognises it as text, not a URL, but it can copy to clipboard and then pasting in the browser works. Obviously I then die immediately because none of the controls work, but you can't have everything.

kuberwastaken

Hey just wanted to update, crazy timing but I Managed to add kind of some mobile touch support here because of a recent PR to FURTHER optimize it (crazy), so you can actually play it now if you figure out the controls lol

iainmerrick

You mean the game doesn't work on mobile at all?

What kind of device do you use to scan the QR code, then?

kuberwastaken

Hey just wanted to update, I Managed to add kind of some mobile touch support here, so if you get an alternate chromium based browser, you can put in the URI to play on mobile too!

kuberwastaken

Nope it doesn't, you can use any QR code scanner that takes image input! I would've loved to include smartphone controls but that would take a LOT of extra bandwidth.

lelandbatey

You do not need to scan a QR code via a physical camera in your hand directly; any general purpose computer can run a QR code parsing program which accepts arbitrary images as input. It's so easy to do that there exist web pages which implement said QR code scanning in JS. Thus, the parent poster has recommended that you save the QR code .png file to your disk and then use such a piece of software, such as the website they linked, to extract the data encoded in that QR code.

That is how you can use nearly any general-purpose computer to scan a QR code.

Jerry2

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.

berkes

How is this different from opening any website through a QR code, that will then run "arbitrary code"?

kuberwastaken

Ironically, I actually wrote a blog about how casually we do this and how dangerous it's become lol https://kuberwastaken.github.io/blog/Technology/QR-Codes-and...

Valodim

The content is good, but fyi the last third or so had a distinct ai padding vibe

null

[deleted]

recursive

Wait until you hear about javascript on web sites.

Blikkentrekker

It runs inside a web browser though. This is no different from visiting an arbitrary link and running whatever arbitrary code in the Javascript sandbox of that link and one already knows a q.r. code an take one to an arbitrary link.

Blikkentrekker

That said, I wouldn't mind an upgrade to the standard of say say if the link be printed above the code in human readable form in some way, the reader would refuse to open it, or at least be configurable to refuse to open it if they not match.

dylan604

This QR code does. But what about a QR using similar designed by someone less honorable? With QR codes, you have no idea what will happen until you scan it. At that point, it could be too late

below43

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

kuberwastaken

That's really cool

thund

Next project: LLM as a QR code

Or, related: https://www.reddit.com/r/OpenAI/comments/138kbhs/someone_sho...

kuberwastaken

Honestly, I might try a version of it, thanks

jasonjmcghee

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

kuberwastaken

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

sebastiennight

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 :)

kuberwastaken

Yes, it takes a while to get used to but it somewhat works lol

I'll try to familiarize myself with it more and add it eventually!

eastoeast

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.

teleforce

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

kuberwastaken

Yup, Raspberry Pi could always run it haha, good compute on it.

opan

The Pico is a microcontroller, like an arduino, in case you didn't know. Doesn't run a full GNU/Linux. Not to be confused with the Nano.

rezmason

Keep making cool things, kuberwastaken

kuberwastaken

Will try my best! Thank you :)