Show HN: QR कोड में समाया Doom-स्टाइल गेम बनाया

 (github.com/Kuberwastaken)
1 पॉइंट द्वारा GN⁺ 2025-04-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • The Backdooms एक compressed, self-extracting, infinitely generated HTML गेम है, जो DOOM 1993 और The Backrooms से प्रेरित है और QR कोड से सीधे ब्राउज़र में चलता है
  • पूरा गेम कोड URL में समाने के तरीके का उपयोग किया गया है, और स्कैन के बाद इंटरनेट कनेक्शन के बिना खेलने योग्य पूरी तरह offline संरचना को लक्ष्य बनाया गया है
  • compression flow में HTML को Zlib से compress किया जाता है, फिर Base64 में encode करके JavaScript HTML wrapper में रखा जाता है, और ब्राउज़र में DecompressionStream API से decompress करके चलाया जाता है
  • QR generation में qr.make(fit=True) से संभव सबसे छोटा QR version खोजा जाता है, और अगर वह standard limit version 40 तथा error correction level L के भीतर न आए तो यह fail हो जाता है
  • mobile support सिर्फ उन modern mobile browsers तक सीमित है जो DecompressionStream API को support करते हैं; README में Edge, Yandex, Opera उदाहरण के रूप में दिए गए हैं

The Backdooms क्या करता है

  • The Backdooms एक HTML गेम है जो पूरे गेम को QR कोड के अंदर रखकर web browser में चलाता है
  • यह गेम DOOM 1993 और The Backrooms से प्रेरित है, और compressed self-extracting web page के रूप में बना है
  • QR कोड स्कैन करते ही यह सीधे ब्राउज़र में चलता है, और किसी अलग download या installation की ज़रूरत नहीं होती
  • README में बताया गया है कि इसे स्कैन करके खेला जा सकता है
  • GitHub Pages पर इसका थोड़ा कम compressed version भी उपलब्ध है

storage space limits को आगे बढ़ाने वाली compression विधि

  • प्रोजेक्ट का लक्ष्य QR कोड storage capacity और compression limits को आगे बढ़ाना है, और यह दिखाना है कि QR कोड के अंदर lightweight web applications को कैसे host किया जा सकता है
  • compression flow निम्न क्रम में बना है
    • input HTML को पढ़ना
    • HTML को Zlib से compress करना
    • compressed data को Base64 में encode करना
    • इसे JavaScript-आधारित HTML wrapper में insert करना
    • पूरे HTML को data:text/html;base64,... फ़ॉर्मैट के Data URI में बदलना
  • ब्राउज़र में DecompressionStream API का उपयोग करके compressed content को dynamically खोलकर चलाया जाता है
  • README के diagram में browser processing stage पर DecompressionStream 'gzip' और Format Mismatch चरण शामिल हैं

QR कोड generation logic

  • QR कोड generation tool लगभग 2.5kb गेम को QR कोड में बदलने का flow देता है
  • run example इस प्रकार हैं
python3 QRGEN.py <your-game.html> <output-qrcode.png>

python3 QRGEN.py EVEN-SMALLER-SLAMMER-BACKROOMS.html qrcode.png
  • generation process में qr.make(fit=True) के साथ पहले content length के अनुरूप सबसे छोटा QR version आज़माया जाता है
  • अगर आवश्यक version QR कोड standard limit 40 से ऊपर जाता है, तो fit=False के साथ version 40 को force किया जाता है
  • अधिकतम data समाने के लिए error correction level सबसे निचला L इस्तेमाल किया जाता है
  • अगर version 40 और level L पर भी data बहुत बड़ा हो, तो QR encoding fail होकर error लौटाता है

execution और compatibility

  • खेलने के लिए केवल एक modern web browser चाहिए
  • scan के बाद पूरा गेम कोड URL में होने के कारण इसे इंटरनेट कनेक्शन के बिना खेला जा सकता है
  • mobile पर DecompressionStream API को support करने वाला modern browser चाहिए
    • README में Edge, Yandex, Opera उदाहरण के रूप में दिए गए हैं
  • छोटे QR कोड के लिए BigInt-आधारित वैकल्पिक implementation The BigInt Branch में है, लेकिन mobile browser compatibility सीमित है

generation environment और license

  • QR कोड खुद generate करने के लिए निम्न dependencies चाहिए

    • Python 3.7+

      • qrcode लाइब्रेरी
      • QR कोड image processing के लिए pillow
      • dependency install command इस प्रकार है
pip install qrcode[pil]

- development process को [MindDump](https://kuberwastaken.github.io/blog/Projects/How-I-Managed-To-Get-Doom-In-A-QR-Code) में संकलित किया गया है
- प्रोजेक्ट **MIT License** के तहत जारी है, इसलिए इसे स्वतंत्र रूप से उपयोग, संशोधित और साझा किया जा सकता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-19
Hacker News की राय

  • DecompressionStream के बारे में पहली बार पता चला, और HTML हिस्से को थोड़ा निखारकर कुछ बाइट और घटा दिए
    रुचि हो तो देखने के लिए PR भी डाल दिया है

    • इसकी बदौलत मिली जगह से touchscreen support, बेहतर movement, enemy spawning और damage handling तक जोड़ पाया
      सच में बहुत शुक्रिया, यह इस महीने की सबसे अच्छी चीज़ बन गई

  • वाकई शानदार प्रोजेक्ट है
    data: URL के बारे में भी नया पता चला; data: URI scheme को जानता था और इस्तेमाल भी किया था, लेकिन यह नहीं पता था कि इसे पूरे URL की तरह इस्तेमाल किया जा सकता है
    सोचा था QR code में पूरा समाने वाली कोई मिलती-जुलती चीज़ बनाऊँ, लेकिन गलती से लगा कि HTTP(s) link चाहिए होगा, इसलिए टाल दिया था; इस वीडियो से बहुत प्रेरणा मिली: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

    • वह वीडियो भी lockdown के आसपास देखा था और उससे प्रेरणा मिली थी; सच में बहुत बढ़िया था
      हालांकि ज़्यादा व्यापक compatibility के लिए मैंने उल्टी दिशा, यानी browser-based रास्ता चुना, और repository में credit भी दे रखा है

  • मैं tech में beginner हूँ, तो शायद बेवकूफी भरा सवाल हो, लेकिन QR तो बस data encode करता है, है न?
    अगर QR में आ सकने वाला maximum data करीब 3KB है, तो वह plaintext के लगभग 3000 characters के बराबर होगा; क्या यहाँ उपलब्धि यह है कि यह Doom जैसा game इतने आकार के executable code के रूप में चलता है?

    • QR code में numeric, alphanumeric, 8-bit, Kanji वगैरह कई encoding modes होते हैं; सबसे आम alphanumeric encoding है, और सबसे dense 8-bit encoding है, जो binary data को सीधे store करती है
      QR standard में 8-bit encoding का मतलब और उद्देश्य थोड़ा अस्पष्ट लगता है, लेकिन default interpretation JIS8 और Shift JIS character sets है, और दूसरे ECI में यह 8-bit byte values को सीधे दर्शाता है
      किसी भी तरह, QR code में arbitrary binary data store करना संभव है और qrencode tool इसे default तौर पर support करता है
      लेकिन decoders अक्सर मान लेते हैं कि QR में text है, इसलिए support मुश्किल हो जाता है; zbar data को iconv से गुजारकर खराब कर देता था, इस वजह से मैंने binary QR decoding patch भी भेजा था
      असल में मैं बस 4096-bit RSA private key को QR code के रूप में print करना चाहता था, लेकिन बाद में लोग video games भी QR में encode करने लगे, और यह सच में कमाल है
      https://youtu.be/ExwqNreocpg
      https://news.ycombinator.com/item?id=24287347

  • iPhone के default QR code scanner से scan किया तो “कोई usable data नहीं मिला” दिखा

    • यह QR code के size या length की समस्या नहीं है, बल्कि इसलिए है कि iPhone का default scanner data: URI URL support नहीं करता
      उदाहरण के लिए, self-contained webpage Hi! को data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4= के रूप में encode किया जा सकता है, और browser में paste करने पर Hi! render होता है
      लेकिन इसे QR code बना दें, तो उस स्थिति में यह काम नहीं करता
    • confirm करने के लिए धन्यवाद
      ज़्यादातर phones बड़े QR codes ठीक से नहीं पढ़ पाते, इसलिए https://qrscanner.org/ जैसी चीज़ चाहिए
      और phone पर यह काम नहीं करेगा; size limit की वजह से वह compatibility भी शामिल नहीं कर पाया
    • iPhone पर नहीं चलता, यह सुनकर उल्टा थोड़ी राहत मिली
      URL type करने का समय बचाने के लिए मैं जगह-जगह लगे QR codes अक्सर scan करता हूँ; अगर सिर्फ QR code scan करने से arbitrary code execution संभव हो, तो यह काफी डरावना लगेगा

  • Canvas CSS में image-rendering: pixelated डालें तो धुंधला न होकर sharp pixel वाला look दिखेगा

    • कोशिश की थी, लेकिन अभी जैसा दिखता है वही ज़्यादा मज़ेदार और retro feel वाला लगा

  • अगला project QR code वाला LLM हो तो अच्छा होगा
    संबंधित: https://www.reddit.com/r/OpenAI/comments/138kbhs/someone_sho...

    • Update: कुछ हद तक बना लिया है
      LLM नहीं है, लेकिन फिर भी काफी शानदार chatbot है
      https://github.com/Kuberwastaken/MiniLMs/tree/main/SYNEVA
    • सच कहूँ तो शायद मैं इसका मिलता-जुलता version एक बार try कर सकता हूँ

  • Game trailer link “Fly me to the moon - 19 September 2024” नाम के Shorts पर जा रहा है
    लगता है गलती है

    • अब शायद ठीक हो गया होगा

  • ऐसे ultra-small game projects मुझे बहुत पसंद हैं
    .kkrieger याद आता है
    https://en.wikipedia.org/wiki/.kkrieger

    • LinkedIn पर post किया था तो किसी ने बताया था; सच में बहुत शानदार था

  • kuberwastaken, ऐसे ही बढ़िया चीज़ें बनाते रहो

    • पूरी कोशिश करूँगा

  • एक दोस्त के साथ कुछ हद तक related idea पर बात हुई थी
    सोच रहा था कि 3D printing के लिए STL file को पूरा QR code में encode करके असली print पर चिपका दें, तो क्या बनाई हुई चीज़ को सिर्फ scan करके फिर से print किया जा सकेगा?
    पता किया तो data बहुत ज़्यादा लगा, और multi-color QR codes तक खोजे, लेकिन यह नहीं पता था कि बस बड़ा QR code भी बनाया जा सकता है

    • पहले tables के लिए design exploration के तौर पर कुछ ऐसा ही किया था
      Tables में सिर्फ sheet material cutting चाहिए थी, इसलिए 2D file encode की थी, फिर भी proof of concept के लिए custom compression algorithm तक इस्तेमाल करना पड़ा
      https://johnkestner.com/rev/