Show HN: Criando um jogo estilo Doom dentro de um código QR

 (github.com/Kuberwastaken)
1 pontos por GN⁺ 2025-04-19 | 1 comentários | Compartilhar no WhatsApp
  • The Backdooms é um jogo em HTML que roda diretamente a partir de um código QR, desenvolvido com inspiração em DOOM 1993 e The Backrooms
  • O projeto foi criado para testar os limites de armazenamento e compressão de códigos QR e demonstrar uma forma inovadora de hospedar aplicações web leves dentro de um código QR
  • O jogo pode ser jogado ao escanear o código QR sem conexão com a internet e é distribuído em uma forma extremamente comprimida
  • Usa a API DecompressionStream para executar o jogo dinamicamente dentro do navegador
  • É compatível com navegadores móveis modernos, e o código QR pode ser gerado usando Python e bibliotecas de QR code

Visão geral do projeto

  • The Backdooms é um jogo em HTML que roda diretamente a partir de um código QR, desenvolvido com inspiração em DOOM 1993 e The Backrooms
  • Foi criado para testar os limites de armazenamento e compressão de códigos QR e demonstrar uma forma inovadora de hospedar aplicações web leves dentro de um código QR

Recursos

  • Totalmente offline: após escanear o código QR, é possível jogar sem conexão com a internet
  • Compressão extrema: usa compressão Zlib, stream de descompressão Gzip e codificação base64 para comprimir ao máximo o resultado final
  • Página web autoextraível: executa o jogo dinamicamente no navegador usando a API DecompressionStream
  • Compatível com mobile: funciona em navegadores móveis modernos que suportam a API DecompressionStream (Edge, Yandex, Opera)

Instalação e dependências

  • Tecnicamente, só é necessário um navegador web moderno, mas para gerar o código QR de um jogo de cerca de 2,5 kb são necessários Python 3.7+, a biblioteca qrcode e pillow

Como usar

1️⃣ Converter o jogo em um código QR

  • Execute o script com o seguinte comando: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ Escanear o código QR

  • Use um smartphone ou leitor de QR para abrir o jogo diretamente no navegador web

3️⃣ Jogar na hora 🎮

  • Aproveite The Backdooms sem download nem instalação

Análise técnica

Fluxo de compressão

  • Leitura do HTML de entrada: lê o conteúdo HTML fornecido a partir de um arquivo ou fonte de entrada
  • Compressão Zlib + descompressão GZip: comprime o HTML com Zlib e usa o DecompressionStream do GZip para obter a melhor compressão possível
  • Codificação Base64: codifica os dados comprimidos em Base64 para mantê-los em formato de texto e permitir inclusão segura no arquivo HTML
  • Inclusão no wrapper HTML: é gerado um wrapper HTML autoextraível baseado em JavaScript. Esse wrapper inclui uma função da API DecompressionStream que descomprime automaticamente o conteúdo quando aberto no navegador
  • Conversão para Data URI: converte todo o HTML para o formato data:text/html;base64,..., permitindo armazenamento e compartilhamento fáceis sem arquivos físicos

Lógica de geração do código QR

  • O sistema primeiro tenta gerar a menor versão possível do QR ajustando dinamicamente o tamanho conforme o comprimento do conteúdo com qr.make(fit=True)
  • Se a versão necessária ultrapassar 40 (o limite do padrão de código QR), ele força a versão 40 com fit=False
  • Usa o nível de correção de erro L, o mais baixo e com maior capacidade de dados, para tentar acomodar o máximo possível de conteúdo
  • Se os dados ainda não couberem em um QR v40 nível L, o processo falha e retorna uma mensagem de erro informando que os dados são grandes demais para serem codificados no código QR

Resultado

  • Em caso de sucesso, o código QR é gerado e exibido
  • Em caso de falha, o processo é encerrado com uma mensagem de erro informando que os dados são grandes demais para serem codificados no código QR

Licença

  • Este projeto é disponibilizado sob a licença MIT e pode ser usado, modificado e compartilhado livremente

Créditos

  • id Software, criadora de DOOM
  • matttkc, que propôs essa ideia há 5 anos
  • Toby Fox, que criou a incrível trilha sonora de Undertale; a versão hospedada no GitHub deste jogo usa uma versão em 8 bits de Bonetrousle
  • Desenvolvido por Kuber Mehta

Leituras relacionadas

1 comentários

 
GN⁺ 2025-04-19
Comentários do Hacker News

  • Às vezes eu começo projetos aleatórios, e este foi mais um desses casos. Foi um projeto feito ao longo de uma semana no começo deste ano, mas eu não tinha compartilhado, então resolvi compartilhar agora

    • Inspirado em Doom e The Backrooms, criei um jogo chamado The Backdooms. Este jogo foi feito com HTML minimizado, com menos de 2,4kb
    • Usei um método pouco popular de usar GZip com um cabeçalho Zlib e, para isso, escrevi meu próprio script para comprimir. Esse processo foi convertido em um QR code de tamanho 40 que funciona no navegador usando a API Decompressionstream
    • Esta explicação é bem simplificada, e fazer isso caber em 2,4kb combinando geração de mapa infinita baseada em seed com muitas das técnicas usadas em DOOM foi muito difícil
    • Se quiser ler mais, você pode consultar os links abaixo
      • Link do repositório (licença MIT): [Link do GitHub]
      • Versão hospedada (ligeiramente melhorada) de The Backdooms: [Link do GitHub Pages]
      • Trailer do jogo: [Link do YouTube]
      • Post no LinkedIn: [Link do LinkedIn]
    • (Observação: para jogar este jogo, é preciso escanear um QR code grande como [link do scanner de QR] e colocar os dados de texto no navegador)
    • Blog documentando o processo de desenvolvimento em detalhes
      • [Link do blog 1]
      • [Link do blog 2]

  • Próximo projeto: transformar um LLM em QR code

    • Link relacionado: [Link do Reddit]

  • Projeto realmente muito legal. Aprendi sobre URLs data:. Eu conhecia o esquema de URI data:, mas não sabia que dava para usá-lo como uma URL completa. Já pensei se seria possível colocar um jogo inteiro em um QR code, mas deixei a ideia de lado por achar, erroneamente, que seria necessário um link HTTP(s). Fiquei muito inspirado por este trabalho: será que dá para colocar um jogo inteiro em um QR code? [Link do YouTube]

  • Gostaria que você adicionasse algumas capturas de tela no repositório. Estou vendo pelo celular e, por algum motivo, só apareceu uma tela preta com 3 botões

    • Edit: adicionar um GIF evitaria depender do YouTube

  • Escaneei com o leitor de QR code padrão do iPhone e apareceu "Nenhum dado disponível"

  • Você deveria atualizar o CSS do canvas para image-rendering: pixelated, para que a imagem fique nítida em vez de borrada

  • Continue criando coisas incríveis, kuberwastaken

  • Projeto incrível. Estou esperando isso ser adicionado ao canitrundoom como um "QR code autossuficiente" (não sei se tecnicamente isso poderia ser aprovado)

    • Mas agora acho que vou pensar duas vezes antes de escanear um QR code por causa desse jogo ^^

  • Este projeto dá a sensação de que estamos nos aproximando de Snow Crash. Fiquei me perguntando se meu cérebro estava sendo alterado só de olhar para o QR code :-D Trabalho impressionante

  • Muito legal. Só um pequeno apontamento: DOOM não usava raycasting. Este projeto é mais parecido com Wolfenstein 3D, e Wolf3D usava raycasting