Show HN: Crean un juego estilo Doom dentro de un código QR

 (github.com/Kuberwastaken)
1 puntos por GN⁺ 2025-04-19 | 1 comentarios | Compartir por WhatsApp
  • The Backdooms es un juego HTML comprimido, autoextraíble y de generación infinita inspirado en DOOM 1993 y The Backrooms, que se ejecuta directamente en el navegador desde un código QR
  • Su enfoque consiste en incluir todo el código del juego dentro de una URL y apunta a una estructura totalmente offline, para poder jugar sin conexión a internet después de escanearlo
  • El flujo de compresión comprime el HTML con Zlib, lo codifica en Base64, lo inserta en un wrapper HTML con JavaScript y luego lo descomprime y ejecuta en el navegador mediante la API DecompressionStream
  • La generación del QR usa qr.make(fit=True) para encontrar la versión de QR más pequeña posible, y falla si no entra dentro del límite estándar de la versión 40 con nivel de corrección de errores L
  • El soporte móvil se limita a navegadores móviles modernos compatibles con la API DecompressionStream; el README menciona Edge, Yandex y Opera como ejemplos

Qué hace The Backdooms

  • The Backdooms es un juego HTML que contiene el juego completo dentro de un código QR y se ejecuta en un navegador web
  • El juego está inspirado en DOOM 1993 y The Backrooms, y está compuesto como una página web comprimida y autoextraíble
  • Al escanear el código QR, se ejecuta directamente en el navegador, sin necesidad de descargas ni instalación aparte
  • El README indica que se puede escanear para jugar
  • GitHub Pages también ofrece una versión un poco menos comprimida

Un método de compresión que lleva al límite el almacenamiento

  • El objetivo del proyecto es llevar al límite la capacidad de almacenamiento de los códigos QR y la compresión, y mostrar cómo alojar una aplicación web ligera dentro de un código QR
  • El flujo de compresión se compone de los siguientes pasos
    • Lee el HTML de entrada
    • Comprime el HTML con Zlib
    • Codifica los datos comprimidos en Base64
    • Los inserta en un wrapper HTML basado en JavaScript
    • Convierte todo el HTML a un Data URI con el formato data:text/html;base64,...
  • En el navegador, usa la API DecompressionStream para descomprimir y ejecutar dinámicamente el contenido comprimido
  • El diagrama del README incluye DecompressionStream 'gzip' y una etapa de Format Mismatch dentro del procesamiento del navegador

Lógica de generación del código QR

  • La herramienta de generación de códigos QR ofrece un flujo para convertir un juego de aproximadamente 2.5 kb en un código QR
  • Ejemplos de ejecución:
python3 QRGEN.py <your-game.html> <output-qrcode.png>

python3 QRGEN.py EVEN-SMALLER-SLAMMER-BACKROOMS.html qrcode.png
  • El proceso de generación primero intenta con qr.make(fit=True) encontrar la versión de QR más pequeña que se ajuste a la longitud del contenido
  • Si la versión necesaria supera el límite estándar de los códigos QR, que es 40, fuerza la versión 40 con fit=False
  • Para incluir la mayor cantidad de datos posible, usa el nivel de corrección de errores más bajo, L
  • Si los datos siguen siendo demasiado grandes incluso con versión 40 y nivel L, la codificación QR falla y devuelve un error

Ejecución y compatibilidad

  • Para jugar solo se necesita un navegador web moderno
  • Después de escanearlo, se puede jugar sin conexión a internet porque el código completo del juego está dentro de la URL
  • En móviles, se necesita un navegador moderno compatible con la API DecompressionStream
    • El README menciona Edge, Yandex y Opera como ejemplos
  • Hay una implementación alternativa basada en BigInt para códigos QR más pequeños en The BigInt Branch, pero la compatibilidad con navegadores móviles es limitada

Entorno de generación y licencia

  • Para generar el código QR directamente, se necesitan las siguientes dependencias

    • Python 3.7+

      • La biblioteca qrcode
      • pillow para procesar imágenes de códigos QR
      • El comando para instalar las dependencias es el siguiente
pip install qrcode[pil]

- El proceso de desarrollo está documentado en [MindDump](https://kuberwastaken.github.io/blog/Projects/How-I-Managed-To-Get-Doom-In-A-QR-Code)
- El proyecto está publicado bajo la **MIT License**, por lo que se puede usar, modificar y compartir libremente

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-04-19
Comentarios de Hacker News

  • Acabo de conocer DecompressionStream y pulí la parte de HTML para reducir unos bytes más.
    También dejé un PR por si te interesa verlo.

    • Gracias a eso, con el espacio liberado pude agregar soporte para pantallas táctiles, mejor movimiento, generación de enemigos y manejo de daño.
      De verdad, muchas gracias; fue lo mejor que me pasó este mes.

  • Es un proyecto realmente genial.
    También acabo de conocer las URL data:; conocía y había usado el esquema URI data:, pero no sabía que podía usarse como una URL completa.
    Había pensado en hacer algo parecido que entrara entero en un código QR, pero lo había postergado porque creía equivocadamente que necesitaba un enlace HTTP(s). Este video me inspiró mucho: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

    • Yo también vi ese video por la época del confinamiento y me inspiró; es realmente genial.
      Pero fui en la dirección opuesta, basada en navegador, para tener una compatibilidad más amplia, y también dejé la atribución en el repositorio.

  • Quizá sea una pregunta tonta porque soy principiante en tecnología, pero ¿un QR no es simplemente datos codificados?
    Si el máximo de datos que puede contener un QR es de unos 3 KB, eso equivaldría a unos 3000 caracteres de texto plano; entonces me pregunto si el logro aquí es que este juego tipo Doom funcione como código ejecutable de ese tamaño.

    • Los códigos QR tienen varios modos de codificación, como numérico, alfanumérico, 8 bits, kanji, etc. El más común es el alfanumérico, y el más denso es la codificación de 8 bits, que almacena datos binarios tal cual.
      En el estándar QR, el significado y el propósito de la codificación de 8 bits parecen un poco ambiguos, pero la interpretación básica es el conjunto de caracteres JIS8 y Shift JIS, y en otros ECI representa directamente valores de bytes de 8 bits.
      En cualquier caso, es posible guardar datos binarios arbitrarios en un código QR, y la herramienta qrencode lo soporta por defecto.
      Sin embargo, muchos decodificadores asumen que el QR contiene texto, así que el soporte es complicado; incluso envié un parche para decodificación de QR binarios por un problema en el que zbar rompía los datos al pasarlos por iconv.
      Originalmente solo quería imprimir una clave privada RSA de 4096 bits como código QR, pero después la gente empezó a codificar videojuegos en QR también, y es realmente genial.
      https://youtu.be/ExwqNreocpg
      https://news.ycombinator.com/item?id=24287347

  • Lo escaneé con el escáner QR predeterminado del iPhone y me mostró “no se encontraron datos utilizables”.

    • Eso no se debe al tamaño ni a la longitud del código QR, sino a que el escáner predeterminado del iPhone no soporta las URL URI data:.
      Por ejemplo, una página web autocontenida Hi! puede codificarse como data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4=, y si la pegas en el navegador se renderiza Hi!.
      Pero si haces un código QR con eso, no funciona en esa situación.
    • Gracias por confirmarlo.
      La mayoría de los teléfonos no leen bien códigos QR grandes, así que hace falta algo como https://qrscanner.org/.
      Y no funcionaría en teléfonos; por las limitaciones de tamaño no pude incluir también esa compatibilidad.
    • Que no funcione en iPhone en realidad me tranquiliza un poco.
      Suelo escanear códigos QR pegados por todos lados para ahorrar tiempo al ingresar URL, y pensar que escanear un QR permitiría ejecución de código arbitrario da bastante miedo.

  • Si agregas image-rendering: pixelated al CSS del canvas, creo que se vería con un aspecto de píxeles nítidos en lugar de borroso.

    • Lo probé, pero me gustó más cómo se ve ahora; se siente más divertido y retro.

  • Ojalá el próximo proyecto sea un LLM en un código QR.
    Relacionado: https://www.reddit.com/r/OpenAI/comments/138kbhs/someone_sho...

  • El enlace del tráiler del juego lleva a un Short llamado “Fly me to the moon - 19 September 2024”.
    Parece un error.

    • Ya debería estar corregido.

  • Me encantan estos proyectos de juegos ultrapequeños.
    Me recuerda a .kkrieger.
    https://en.wikipedia.org/wiki/.kkrieger

    • Alguien me lo mencionó cuando lo publiqué en LinkedIn, y es realmente genial.

  • Espero que sigas haciendo cosas geniales, kuberwastaken.

    • Haré mi mejor esfuerzo.

  • Una vez hablé con un amigo de una idea más o menos relacionada.
    Me preguntaba si se podría codificar completo un archivo STL para impresión 3D en un código QR y pegarlo al objeto físico, para que con solo escanear lo que hiciste pudieras volver a imprimirlo.
    Al investigarlo, parecía demasiada data, e incluso busqué códigos QR multicolor, pero no sabía que simplemente se podían hacer códigos QR más grandes.

    • Hace tiempo hice algo parecido con mesas como exploración de diseño.
      Como las mesas solo requerían cortar placas, codifiqué un archivo 2D, pero incluso así tuve que usar un algoritmo de compresión personalizado para la prueba de concepto.
      https://johnkestner.com/rev/