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

• The Backdooms es un juego HTML que se ejecuta directamente desde un código QR, desarrollado con inspiración en DOOM 1993 y The Backrooms
• Este proyecto fue diseñado para poner a prueba los límites de almacenamiento y compresión de los códigos QR, y para mostrar una forma innovadora de alojar aplicaciones web ligeras dentro de un código QR
• El juego puede jugarse escaneando el código QR sin conexión a internet, y se ofrece en una forma extremadamente comprimida
• Usa la API DecompressionStream para ejecutar el juego dinámicamente dentro del navegador
• Es compatible con navegadores móviles modernos, y se pueden generar códigos QR usando Python y librerías de código QR

---

Resumen del proyecto

• The Backdooms es un juego HTML que se ejecuta directamente desde un código QR, desarrollado con inspiración en DOOM 1993 y The Backrooms
• Fue diseñado para poner a prueba los límites de almacenamiento y compresión de los códigos QR, y para mostrar una forma innovadora de alojar aplicaciones web ligeras dentro de un código QR

Funciones

• Totalmente offline: después de escanear el código QR, se puede jugar sin conexión a internet
• Compresión extrema: usa compresión Zlib, flujo de descompresión Gzip y codificación base64 para comprimir al máximo el resultado final
• Página web autoextraíble: usa la API DecompressionStream para ejecutar el juego dinámicamente dentro del navegador
• Compatible con móviles: funciona en navegadores móviles modernos que soportan la API Decompressionstream (Edge, Yandex, Opera)

Instalación y dependencias

• Técnicamente solo se necesita un navegador web moderno, pero para generar el código QR de un juego de aproximadamente 2.5kb se requieren Python 3.7+, la librería qrcode y pillow

Uso

1️⃣ Convertir el juego a código QR

• Ejecuta el script con el siguiente comando: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ Escanear el código QR

• Usa un smartphone o un lector QR para abrir el juego directamente en el navegador web

3️⃣ Jugar al instante 🎮

• Puedes disfrutar The Backdooms sin descargas ni instalación

Análisis técnico

Flujo de trabajo de compresión

• Lectura del HTML de entrada: lee el contenido HTML proporcionado desde un archivo o una fuente de entrada
• Compresión Zlib + descompresión GZip: comprime el HTML con Zlib y usa Decompressionstream de GZip para lograr la mejor compresión
• Codificación Base64: codifica los datos comprimidos en Base64 para mantenerlos en formato de texto y poder incluirlos de forma segura dentro del archivo HTML
• Inclusión en un wrapper HTML: se genera un wrapper HTML autoextraíble basado en JavaScript. Este wrapper incluye una función de la API DecompressionStream que descomprime automáticamente el contenido al abrirse en el navegador
• Conversión a Data URI: convierte el HTML completo al formato data:text/html;base64,... para que pueda almacenarse y compartirse fácilmente sin un archivo físico

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

• El sistema primero intenta generar la versión más pequeña posible del QR usando qr.make(fit=True), ajustando dinámicamente el tamaño según la longitud del contenido
• Si la versión requerida supera la 40 (límite del estándar de códigos QR), fuerza la versión 40 con fit=False
• Usa el nivel de corrección de errores L, el más bajo, para permitir la mayor capacidad de datos posible
• Si los datos siguen sin caber en un QR v40 nivel L, el proceso falla y devuelve un mensaje de error indicando que los datos son demasiado grandes para codificarse en el código QR

Resultado

• Si tiene éxito, el código QR se genera y se muestra
• Si falla, el proceso termina con un mensaje de error indicando que los datos son demasiado grandes para codificarse en el código QR

Licencia

• Este proyecto se publica bajo la licencia MIT y puede usarse, modificarse y compartirse libremente

Créditos

• id Software, desarrollador de DOOM
• matttkc, quien propuso esta idea hace 5 años
• Toby Fox, creador de la increíble música de Undertale; la versión alojada en GitHub de este juego usa una versión de 8 bits de Bonetrousle
• Desarrollado por Kuber Mehta

[GN⁺]

Opiniones de Hacker News

• A veces empiezo proyectos al azar, y este fue uno de esos casos. Lo hice durante una semana a inicios de este año, pero no lo había compartido; ahora decidí hacerlo

  • Inspirado en Doom y The Backrooms, hice un juego llamado The Backdooms. Este juego fue creado con HTML minimizado y ocupa menos de 2.4kb
  • Usé un método poco común de GZip con encabezado Zlib, y para eso escribí mi propio script de compresión. Ese proceso se convirtió en un código QR de tamaño 40 que funciona en el navegador usando la API Decompressionstream
  • Esta explicación está muy simplificada, y aunque usa muchas de las técnicas utilizadas en DOOM, fue muy difícil llevarlo a 2.4kb combinándolo además con generación de mapas infinita basada en semillas
  • Si quieren leer más, pueden revisar los siguientes enlaces
    • Enlace al repositorio (licencia MIT): [enlace de GitHub]
    • Versión alojada (ligeramente mejorada) de The Backdooms: [enlace de GitHub Pages]
    • Tráiler del juego: [enlace de YouTube]
    • Publicación en LinkedIn: [enlace de LinkedIn]
  • (Nota: para jugar este juego, hay que escanear un código QR grande como [enlace al escáner QR] y poner los datos de texto en el navegador)
  • Blog donde se documenta en detalle el proceso de desarrollo
    • [enlace del blog 1]
    • [enlace del blog 2]

• Siguiente proyecto: convertir un LLM en un código QR

  • Enlace relacionado: [enlace de Reddit]

• Proyecto realmente genial. Aprendí sobre los URL data:. Ya conocía el esquema URI data:, pero no sabía que se podía usar como URL completa. Había pensado en si se podría meter un juego completo dentro de un código QR, pero lo había dejado de lado porque erróneamente asumí que se necesitaba un enlace HTTP(s). Esto me inspiró muchísimo: ¿se puede meter un juego completo dentro de un código QR? [enlace de YouTube]

• Ojalá agregues algunas capturas de pantalla al repositorio. Lo estoy viendo desde el celular y, no sé por qué, solo vi 3 botones y una pantalla negra

  • Edit: agregar un GIF evitaría depender de YouTube

• Lo escaneé con el lector de QR predeterminado del iPhone y me apareció "No hay datos disponibles"

• Deberías actualizar el CSS del canvas a image-rendering: pixelated para que la imagen no se vea borrosa sino nítida

• Sigue creando cosas geniales, kuberwastaken

• Tremendo proyecto. Estoy esperando que un "código QR autocontenido" se agregue a canitrundoom (aunque no sé si técnicamente podría ser aceptado)

  • Pero ahora creo que voy a pensarlo dos veces antes de escanear un código QR por culpa de ese juego ^^

• Siento que este proyecto se está acercando a Snow Crash. Me pregunté si ver el código QR estaba alterando mi cerebro :-D trabajo increíble

• Está muy genial. Solo una observación pequeña: DOOM no usaba raycasting. Este proyecto se parece más a Wolfenstein 3D, y Wolf3D sí usaba raycasting