Show HN : création d’un jeu style Doom intégré dans un code QR

 (github.com/Kuberwastaken)
1 points par GN⁺ 2025-04-19 | 1 commentaires | Partager sur WhatsApp
  • The Backdooms est un jeu HTML qui s’exécute directement depuis un code QR, développé en s’inspirant de DOOM 1993 et de The Backrooms
  • Ce projet a été conçu pour tester les limites du stockage et de la compression dans les codes QR, et pour démontrer une méthode innovante d’hébergement d’applications web légères à l’intérieur d’un code QR
  • Le jeu peut être lancé en scannant le code QR sans connexion Internet, et il est distribué sous une forme extrêmement compressée
  • Grâce à l’API DecompressionStream, le jeu peut s’exécuter dynamiquement dans le navigateur
  • Compatible avec les navigateurs mobiles modernes, et les codes QR peuvent être générés avec Python et des bibliothèques de codes QR

Aperçu du projet

  • The Backdooms est un jeu HTML qui s’exécute directement depuis un code QR, développé en s’inspirant de DOOM 1993 et de The Backrooms
  • Conçu pour tester les limites du stockage et de la compression des codes QR, et pour démontrer une méthode innovante d’hébergement d’applications web légères à l’intérieur d’un code QR

Fonctionnalités

  • Entièrement hors ligne : après avoir scanné le code QR, il est possible de jouer sans connexion Internet
  • Compression extrême : le résultat final est compressé à l’extrême à l’aide de la compression Zlib, d’un flux de décompression Gzip et de l’encodage base64
  • Page web auto-extractible : utilise l’API DecompressionStream pour exécuter dynamiquement le jeu dans le navigateur
  • Compatible mobile : fonctionne sur les navigateurs mobiles récents prenant en charge l’API DecompressionStream (Edge, Yandex, Opera)

Installation et dépendances

  • Techniquement, seul un navigateur web moderne est nécessaire, mais pour générer le code QR d’un jeu d’environ 2,5 kb, il faut Python 3.7+, la bibliothèque qrcode et pillow

Utilisation

1️⃣ Convertir le jeu en code QR

  • Exécuter le script avec la commande suivante : python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ Scanner le code QR

  • Utiliser un smartphone ou un lecteur QR pour ouvrir directement le jeu dans le navigateur web

3️⃣ Jouer immédiatement 🎮

  • Profitez de The Backdooms sans téléchargement ni installation

Analyse technique

Workflow de compression

  • Lecture du HTML en entrée : lit le contenu HTML fourni depuis un fichier ou une source d’entrée
  • Compression Zlib + décompression GZip : compresse le HTML avec Zlib et utilise le DecompressionStream de GZip pour obtenir la meilleure compression possible
  • Encodage Base64 : encode les données compressées en Base64 afin de les conserver sous forme textuelle et de pouvoir les inclure en toute sécurité dans un fichier HTML
  • Inclusion dans un wrapper HTML : un wrapper HTML auto-extractible en JavaScript est généré. Ce wrapper inclut une fonction de l’API DecompressionStream qui décompresse automatiquement le contenu à l’ouverture dans le navigateur
  • Conversion en URI de données : convertit l’ensemble du HTML au format data:text/html;base64,... afin de pouvoir le stocker et le partager facilement sans fichier physique

Logique de génération du code QR

  • Le système tente d’abord de générer la plus petite version possible du code QR en utilisant qr.make(fit=True), ce qui ajuste dynamiquement la taille du QR selon la longueur du contenu
  • Si la version requise dépasse 40 (limite du standard des codes QR), il force la version 40 avec fit=False
  • Il utilise le niveau de correction d’erreur le plus bas, L, qui autorise la capacité maximale de données, afin d’y faire tenir autant de données que possible
  • Si les données ne tiennent toujours pas dans un QR v40 niveau L, le processus échoue et renvoie un message d’erreur indiquant que les données sont trop volumineuses pour être encodées dans un code QR

Résultat

  • En cas de succès, le code QR est généré et affiché
  • En cas d’échec, le processus s’arrête avec un message d’erreur indiquant que les données sont trop volumineuses pour être encodées dans un code QR

Licence

  • Ce projet est publié sous licence MIT et peut être utilisé, modifié et partagé librement

Crédits

  • id Software, qui a développé DOOM
  • matttkc, qui a proposé cette idée il y a 5 ans
  • Toby Fox, qui a composé l’incroyable musique d’Undertale ; la version hébergée sur GitHub de ce jeu utilise une version 8 bits de Bonetrousle
  • Développé par Kuber Mehta

À lire aussi

1 commentaires

 
GN⁺ 2025-04-19
Commentaire Hacker News

  • Il m’arrive de lancer des projets aléatoires de temps en temps, et c’était encore le cas ici. Je l’avais réalisé en une semaine au début de l’année sans le partager, mais j’ai décidé de le faire cette fois

    • Inspiré par Doom et The Backrooms, j’ai créé un jeu appelé The Backdooms. Il a été conçu en HTML minimaliste pour tenir en moins de 2,4 kb
    • J’ai utilisé une méthode peu courante consistant à employer GZip avec un en-tête Zlib, et j’ai écrit mon propre script pour le compresser. Ce processus a permis de le convertir en un QR code de taille 40 fonctionnant dans le navigateur via l’API Decompressionstream
    • Cette explication est très simplifiée, et il a été très difficile de faire tenir le tout en 2,4 kb en combinant de nombreuses techniques utilisées dans DOOM avec une génération de carte infinie basée sur une seed
    • Si vous voulez en lire davantage, vous pouvez consulter les liens suivants
      • Lien du dépôt (licence MIT) : [lien GitHub]
      • Version hébergée (légèrement améliorée) de The Backdooms : [lien GitHub Pages]
      • Bande-annonce du jeu : [lien YouTube]
      • Publication LinkedIn : [lien LinkedIn]
    • (Remarque : pour jouer à ce jeu, vous devez scanner un grand QR code comme [lien du scanner QR], puis coller les données texte dans le navigateur)
    • Blog détaillant le développement et le processus de création
      • [lien du blog 1]
      • [lien du blog 2]

  • Projet suivant : créer un LLM sous forme de QR code

    • Lien associé : [lien Reddit]

  • Projet vraiment génial. J’ai découvert les URL data:. Je connaissais le schéma d’URI data:, mais je ne savais pas qu’on pouvait l’utiliser comme URL complète. Je m’étais demandé s’il était possible de mettre un jeu entier dans un QR code, mais j’avais laissé tomber en pensant, à tort, qu’il fallait un lien HTTP(s). Ce travail m’a énormément inspiré : est-il possible de mettre un jeu entier dans un QR code ? [lien YouTube]

  • J’aimerais que vous ajoutiez quelques captures d’écran au dépôt. Je regarde depuis mon téléphone et, pour une raison inconnue, je n’ai vu que 3 boutons et un écran noir

    • Modification : ajouter un GIF éviterait aussi de dépendre de YouTube

  • Je l’ai scanné avec le lecteur de QR code par défaut de l’iPhone, et j’ai obtenu « aucune donnée utilisable »

  • Il faudrait mettre à jour le CSS du canvas avec image-rendering: pixelated pour que l’image soit nette au lieu d’être floue

  • Continue à créer des choses géniales, kuberwastaken

  • Projet impressionnant. J’attends qu’un « QR code auto-contenu » soit ajouté à canitrundoom (je ne sais pas si cela pourrait être validé techniquement)

    • Mais à cause de ce jeu, je pense que je vais désormais réfléchir à deux fois avant de scanner un QR code ^^

  • Ce projet donne l’impression de se rapprocher de Snow Crash. Je me suis demandé si mon cerveau était en train d’être altéré juste en regardant le QR code :-D Travail incroyable

  • Très sympa. Petite précision toutefois : DOOM n’utilisait pas le raycasting. Ce projet ressemble davantage à Wolfenstein 3D, et Wolf3D, lui, utilisait le raycasting