Show HN: QRコードに収めたDoomスタイルのゲームを制作

 (github.com/Kuberwastaken)
1 ポイント 投稿者 GN⁺ 2025-04-19 | 1件のコメント | WhatsAppで共有
  • The Backdooms は、QRコード上で直接実行できるHTMLゲームで、DOOM 1993 と The Backrooms に着想を得て開発された
  • このプロジェクトは、QRコードの保存容量と圧縮の限界を試し、QRコード内で軽量なWebアプリケーションをホストする革新的な方法を示すために設計された
  • ゲームは、QRコードをスキャンするだけでインターネット接続なしにプレイでき、極限まで圧縮された形で提供される
  • DecompressionStream API を使って、ブラウザ内で動的にゲームを実行できる
  • 現代的なモバイルブラウザで互換性があり、Python と QRコードライブラリを使って QRコードを生成できる

プロジェクト概要

  • The Backdooms は、QRコード上で直接実行できるHTMLゲームで、DOOM 1993 と The Backrooms に着想を得て開発された
  • QRコードの保存容量と圧縮の限界を試し、QRコード内で軽量なWebアプリケーションをホストする革新的な方法を示すために設計された

機能

  • 完全オフライン: QRコードをスキャンした後、インターネット接続なしでゲームをプレイできる
  • 極限の圧縮: Zlib 圧縮、Gzip の伸長ストリーム、base64 エンコーディングを使って、最終結果を極限まで圧縮する
  • 自己展開型Webページ: DecompressionStream API を使って、ブラウザ内で動的にゲームを実行する
  • モバイル対応: DecompressionStream API をサポートする最新のモバイルブラウザで動作する（Edge、Yandex、Opera）

インストールと依存関係

  • 技術的には最新のWebブラウザだけで十分だが、約 2.5kb のゲームの QRコードを生成するには、Python 3.7+、qrcode ライブラリ、pillow が必要

使い方

1️⃣ ゲームをQRコードに変換

  • スクリプトを次のコマンドで実行: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ QRコードをスキャン

  • スマートフォンや QR スキャナーを使って、ゲームをWebブラウザで直接開ける

3️⃣ すぐにプレイ 🎮

  • ダウンロードやインストールなしで The Backdooms を楽しめる

技術的な分析

圧縮ワークフロー

  • 入力HTMLの読み込み: ファイルまたは入力ソースから指定された HTML コンテンツを読み込む
  • Zlib 圧縮 + GZip 伸長: HTML を Zlib で圧縮し、GZip の DecompressionStream を使って最良の圧縮を実現する
  • Base64 エンコーディング: 圧縮データを Base64 でエンコードしてテキストベースのまま維持し、HTML ファイルに安全に埋め込めるようにする
  • HTML ラッパーに含める: JavaScript ベースの自己展開型 HTML ラッパーが生成される。このラッパーには、ブラウザで開かれたときにコンテンツを自動で伸長する DecompressionStream API 関数が含まれる
  • データ URI への変換: HTML 全体を data:text/html;base64,... 形式に変換し、物理ファイルなしで簡単に保存・共有できるようにする

QRコード生成ロジック

  • システムはまず qr.make(fit=True) を使い、コンテンツ長に応じて QR サイズを動的に調整し、可能な限り最小の QR バージョンを生成しようとする
  • 必要なバージョンが 40 を超える場合（QRコード規格の上限）、fit=False でバージョン 40 を強制する
  • 最大データ容量を確保するため、可能な限り多くのデータを収められる最も低い誤り訂正レベル L を使用する
  • データがなお QR v40 レベル L に収まらない場合、プロセスは失敗し、データが QRコードにエンコードするには大きすぎるというエラーメッセージが返される

結果

  • 成功すると、QRコードが生成されて表示される
  • 失敗すると、データが QRコードにエンコードするには大きすぎるというエラーメッセージとともにプロセスが終了する

ライセンス

  • このプロジェクトは MIT ライセンス の下で公開されており、自由に利用、修正、共有できる

クレジット

  • DOOM を開発した id Software
  • 5年前にこのアイデアを提案した matttkc
  • Undertale の素晴らしい音楽を作った Toby Fox。このゲームの GitHub ホスティング版では Bonetrousle の 8ビット版を使用している
  • Kuber Mehta によって開発された

関連記事

1件のコメント

 
GN⁺ 2025-04-19
Hacker Newsのコメント

  • ときどき思いつきでランダムなプロジェクトを始めるのですが、今回もそんな感じでした。今年の初めに1週間で作ったプロジェクトでしたが共有しておらず、今回共有することにしました

    • DoomとThe Backroomsに着想を得て、The Backdoomsというゲームを作りました。このゲームは最小限のHTMLで、2.4kb以下に収められています
    • GZipをZlibヘッダー付きで使うあまり一般的でない方法を使い、そのために自作スクリプトで圧縮しました。この過程で、Decompressionstream APIを使ってブラウザ上で動作するサイズ40のQRコードに変換しました
    • この説明はかなり単純化していますが、DOOMで使われた多くの技術を使いつつ、無限シードベースのマップ生成を組み合わせて2.4kbに収めるのは非常に困難でした
    • さらに読みたい場合は、以下のリンクを参照できます
      • リポジトリのリンク（MITライセンス）: [GitHubリンク]
      • The Backdoomsのホストされた（少し改善された）バージョン: [GitHub Pagesリンク]
      • ゲームのトレーラー: [YouTubeリンク]
      • LinkedInの投稿: [LinkedInリンク]
    • （参考: このゲームをプレイするには、[QRスキャナーリンク]のような大きなQRコードをスキャンし、テキストデータをブラウザに入力する必要があります）
    • 開発過程と実装を詳しく記録したブログ
      • [ブログリンク 1]
      • [ブログリンク 2]

  • 次のプロジェクト: LLMをQRコードにする

    • 関連リンク: [Redditリンク]

  • 本当にすごいプロジェクトです。data: URLについて知ることができました。data: URIスキームは知っていましたが、完全なURLとして使えるとは知りませんでした。QRコードの中にゲーム全体を入れられないかと考えたことはありましたが、HTTP(s)リンクが必要だと勘違いして保留にしていました。この作品から大きな刺激を受けました: QRコードの中にゲーム全体を入れられるか？ [YouTubeリンク]

  • リポジトリにスクリーンショットをいくつか追加してほしいです。私はスマホで見ているのですが、理由は分からないものの、3つのボタンと黒い画面しか表示されませんでした

    • 修正: GIFを追加すればYouTubeに依存しなくて済みます

  • iPhoneの標準QRコードスキャナーでスキャンしたところ、「利用可能なデータがありません」と表示されました

  • キャンバスのCSSを image-rendering: pixelated に更新して、画像がぼやけず鮮明に表示されるようにすべきです

  • これからもすてきなものを作り続けてください、kuberwastaken

  • 素晴らしいプロジェクトです。「自己完結型QRコード」がcanitrundoomに追加されるのを待っています（技術的に承認されるのかは分かりませんが）

    • でも今後は、そのゲームのせいでQRコードをスキャンする前に二度考えるようになりそうです ^^

  • このプロジェクトはSnow Crashに近づいてきている感じがします。QRコードを見て、自分の脳が変質していないか気になりました :-D 驚くべき仕事です

  • とてもクールです。細かい指摘ですが、DOOMはレイキャスティングを使っていませんでした。このプロジェクトはWolfenstein 3Dに近く、Wolf3Dはレイキャスティングを使っていました