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

 (github.com/Kuberwastaken)
1 पॉइंट द्वारा GN⁺ 2025-04-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • The Backdooms एक HTML गेम है जो सीधे QR code से चल सकता है, और इसे DOOM 1993 तथा The Backrooms से प्रेरित होकर बनाया गया है
  • यह प्रोजेक्ट QR code स्टोरेज और compression की सीमाओं को परखने तथा QR code के भीतर lightweight web application होस्ट करने का एक नया तरीका दिखाने के लिए डिज़ाइन किया गया है
  • इस गेम को QR code स्कैन करके बिना इंटरनेट कनेक्शन के खेला जा सकता है, और यह बेहद compressed रूप में उपलब्ध है
  • DecompressionStream API का उपयोग करके ब्राउज़र के भीतर गेम को dynamic तरीके से चलाया जा सकता है
  • यह आधुनिक मोबाइल ब्राउज़रों के साथ compatible है, और Python तथा QR code लाइब्रेरी का उपयोग करके QR code बनाया जा सकता है

प्रोजेक्ट अवलोकन

  • The Backdooms एक HTML गेम है जो सीधे QR code से चल सकता है, और इसे DOOM 1993 तथा The Backrooms से प्रेरित होकर बनाया गया है
  • इसे QR code स्टोरेज और compression की सीमाओं को परखने तथा QR code के भीतर lightweight web application होस्ट करने का एक नया तरीका दिखाने के लिए डिज़ाइन किया गया है

फीचर्स

  • पूरी तरह offline: QR code स्कैन करने के बाद इंटरनेट कनेक्शन के बिना गेम खेला जा सकता है
  • अत्यधिक compression: Zlib compression, Gzip decompression stream, और base64 encoding का उपयोग करके अंतिम परिणाम को बेहद compressed बनाया गया है
  • Self-extracting web page: DecompressionStream API का उपयोग करके ब्राउज़र के भीतर गेम को dynamic तरीके से चलाया जाता है
  • मोबाइल compatible: DecompressionStream API को सपोर्ट करने वाले आधुनिक मोबाइल ब्राउज़रों में काम करता है (Edge, Yandex, Opera)

इंस्टॉलेशन और dependencies

  • तकनीकी रूप से केवल एक आधुनिक web browser की आवश्यकता है, लेकिन लगभग 2.5kb गेम के लिए QR code बनाने हेतु Python 3.7+, qrcode लाइब्रेरी, और pillow की आवश्यकता होती है

उपयोग का तरीका

1️⃣ गेम को QR code में बदलें

  • स्क्रिप्ट को इस कमांड से चलाएँ: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ QR code स्कैन करें

  • स्मार्टफोन या QR scanner का उपयोग करके गेम को सीधे web browser में खोल सकते हैं

3️⃣ तुरंत खेलें 🎮

  • बिना download या installation के The Backdooms का आनंद लिया जा सकता है

तकनीकी विश्लेषण

Compression workflow

  • इनपुट HTML पढ़ना: फ़ाइल या input source से दिए गए HTML content को पढ़ा जाता है
  • Zlib compression + GZip decompression: HTML को Zlib से compress किया जाता है और GZip के DecompressionStream का उपयोग करके सर्वोत्तम compression हासिल किया जाता है
  • Base64 encoding: compressed data को Base64 में encode किया जाता है ताकि वह text-based बना रहे और HTML फ़ाइल में सुरक्षित रूप से शामिल किया जा सके
  • HTML wrapper में शामिल करना: JavaScript-आधारित self-extracting HTML wrapper बनाया जाता है। यह wrapper ब्राउज़र में खुलने पर content को अपने-आप decompress करने वाले DecompressionStream API function को शामिल करता है
  • Data URI में बदलना: पूरे HTML को data:text/html;base64,... फ़ॉर्मेट में बदला जाता है ताकि physical file के बिना उसे आसानी से सेव और share किया जा सके

QR code generation logic

  • सिस्टम पहले qr.make(fit=True) का उपयोग करके content की लंबाई के अनुसार QR आकार को dynamically समायोजित करता है, ताकि संभव हो तो सबसे छोटा QR version बनाया जा सके
  • यदि आवश्यक version 40 से अधिक हो जाता है (QR code standard की सीमा), तो fit=False के साथ version 40 को force किया जाता है
  • अधिकतम data capacity की अनुमति देने वाले सबसे निम्न error correction level L का उपयोग करके यथासंभव अधिक data फिट करने की कोशिश की जाती है
  • यदि data फिर भी QR v40 level L में फिट नहीं होता, तो process विफल हो जाती है और यह error message लौटाया जाता है कि data QR code में encode करने के लिए बहुत बड़ा है

परिणाम

  • सफल होने पर QR code बनाया और दिखाया जाता है
  • विफल होने पर process यह error message दिखाकर समाप्त हो जाती है कि data QR code में encode करने के लिए बहुत बड़ा है

लाइसेंस

  • यह प्रोजेक्ट MIT लाइसेंस के तहत जारी किया गया है, और इसे स्वतंत्र रूप से उपयोग, संशोधित और साझा किया जा सकता है

क्रेडिट

  • DOOM बनाने वाली id Software
  • 5 साल पहले यह आइडिया सुझाने वाले matttkc
  • Undertale का शानदार संगीत बनाने वाले Toby Fox; इस गेम के GitHub-hosted version में Bonetrousle का 8-bit version उपयोग किया गया है
  • Kuber Mehta द्वारा विकसित

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

1 टिप्पणियां

 
GN⁺ 2025-04-19
Hacker News टिप्पणी

  • मैं कभी-कभी रैंडम प्रोजेक्ट्स शुरू कर देता हूँ, और यह भी वैसा ही एक मामला था। यह इस साल की शुरुआत में एक हफ्ते के दौरान बनाया गया प्रोजेक्ट था, लेकिन मैंने इसे शेयर नहीं किया था, और अब इसे शेयर करने का फैसला किया

    • Doom और The Backrooms से प्रेरित होकर मैंने The Backdooms नाम का एक गेम बनाया। यह गेम न्यूनतम HTML के साथ 2.4kb से कम में बनाया गया
    • मैंने Zlib header के साथ GZip इस्तेमाल करने का एक कम-लोकप्रिय तरीका अपनाया, और इसके लिए compress करने हेतु खुद स्क्रिप्ट लिखी। इस प्रक्रिया को Decompressionstream API का उपयोग करके ब्राउज़र में काम करने वाले 40 आकार के QR code में बदला गया
    • यह विवरण बहुत सरल किया गया है, और DOOM में इस्तेमाल हुई कई तकनीकों का उपयोग करते हुए, साथ ही infinite seed-based map generation के साथ इसे 2.4kb में बनाना बहुत कठिन था
    • अगर आप और पढ़ना चाहते हैं, तो नीचे दिए गए लिंक देख सकते हैं
      • repository link (MIT license): [GitHub लिंक]
      • The Backdooms का hosted (थोड़ा बेहतर किया गया) version: [GitHub Pages लिंक]
      • game trailer: [YouTube लिंक]
      • LinkedIn post: [LinkedIn लिंक]
    • (नोट: इस गेम को खेलने के लिए आपको [QR स्कैनर लिंक] जैसे बड़े QR code को scan करना होगा और text data को browser में डालना होगा)
    • development process और development को विस्तार से दर्ज करने वाला ब्लॉग
      • [ब्लॉग लिंक 1]
      • [ब्लॉग लिंक 2]

  • अगला प्रोजेक्ट: LLM को QR code में बनाना

    • संबंधित लिंक: [Reddit लिंक]

  • यह वाकई शानदार प्रोजेक्ट है। मुझे 'data:' URL के बारे में पता चला। मैं 'data:' URI scheme को जानता था, लेकिन यह नहीं जानता था कि इसे पूरे URL की तरह इस्तेमाल किया जा सकता है। मैंने भी सोचा था कि क्या पूरे गेम को QR code में डाला जा सकता है, लेकिन मैंने गलतफहमी में मान लिया था कि HTTP(s) link ज़रूरी होगा, इसलिए उसे टाल दिया था। इससे मुझे बहुत प्रेरणा मिली: क्या पूरे गेम को QR code में डाला जा सकता है? [YouTube लिंक]

  • कृपया repository में कुछ screenshots जोड़ें। मैं इसे फोन पर देख रहा हूँ, लेकिन किसी कारण से मुझे सिर्फ 3 बटन और काली स्क्रीन ही दिखाई दी

    • संपादन: अगर GIF जोड़ दें तो YouTube पर निर्भर रहना नहीं पड़ेगा

  • मैंने iPhone के default QR code scanner से scan किया, लेकिन उसमें "उपयोग करने योग्य data नहीं है" दिखाया

  • canvas के CSS को image-rendering: pixelated से अपडेट करना चाहिए ताकि image धुंधली न दिखे और crisp दिखाई दे

  • kuberwastaken, कृपया ऐसी शानदार चीज़ें बनाते रहें

  • कमाल का प्रोजेक्ट है। मैं इंतज़ार कर रहा हूँ कि "self-contained QR code" canitrundoom में जोड़ा जाए (हालाँकि तकनीकी रूप से इसे मंज़ूरी मिल पाएगी या नहीं, पता नहीं)

    • लेकिन अब लगता है कि उस गेम की वजह से QR code scan करने से पहले मैं दो बार सोचूँगा ^^

  • इस प्रोजेक्ट को देखकर लगता है कि हम Snow Crash के और करीब पहुँच रहे हैं। मैं सोच रहा था कि कहीं QR code को देखकर मेरा दिमाग बदल तो नहीं रहा :-D अद्भुत काम है

  • बहुत बढ़िया। बस एक छोटी-सी बात: DOOM ने raycasting का उपयोग नहीं किया था। यह प्रोजेक्ट Wolfenstein 3D के ज़्यादा समान है, और Wolf3D ने raycasting का उपयोग किया था