Show HN: Membuat game bergaya Doom yang dimuat dalam kode QR

 (github.com/Kuberwastaken)
1 poin oleh GN⁺ 2025-04-19 | 1 komentar | Bagikan ke WhatsApp
  • The Backdooms adalah game HTML terkompresi, self-extracting, dan digenerasi tanpa batas, terinspirasi dari DOOM 1993 dan The Backrooms, yang berjalan langsung di browser dari kode QR
  • Seluruh kode game dimasukkan ke dalam URL; setelah dipindai, game ditujukan sebagai struktur sepenuhnya offline yang bisa dimainkan tanpa koneksi internet
  • Alur kompresinya: HTML dikompresi dengan Zlib, dienkode ke Base64, lalu dimasukkan ke wrapper HTML JavaScript; di browser, konten didekompresi dan dijalankan menggunakan API DecompressionStream
  • Pembuatan QR memakai qr.make(fit=True) untuk mencari versi QR terkecil yang memungkinkan, dan gagal jika tidak muat dalam batas standar versi 40 dengan level koreksi kesalahan L
  • Dukungan mobile terbatas pada browser mobile modern yang mendukung API DecompressionStream; README mencantumkan Edge, Yandex, dan Opera sebagai contoh

Apa yang dilakukan The Backdooms

  • The Backdooms adalah game HTML yang memuat seluruh game di dalam kode QR dan menjalankannya di web browser
  • Game ini terinspirasi dari DOOM 1993 dan The Backrooms, serta disusun sebagai halaman web terkompresi yang mengekstrak dirinya sendiri
  • Saat kode QR dipindai, game langsung berjalan di browser tanpa perlu unduhan atau instalasi terpisah
  • README menyebutkan bahwa game bisa dipindai untuk dimainkan
  • GitHub Pages juga menyediakan versi yang sedikit kurang terkompresi

Metode kompresi yang mendorong batas kapasitas penyimpanan

  • Tujuan proyek ini adalah mendorong batas kapasitas penyimpanan kode QR dan kompresi, sekaligus menunjukkan cara menghosting aplikasi web ringan di dalam kode QR
  • Alur kompresinya terdiri dari urutan berikut
    • Membaca HTML input
    • Mengompresi HTML dengan Zlib
    • Mengenkode data terkompresi ke Base64
    • Menyisipkannya ke wrapper HTML berbasis JavaScript
    • Mengubah seluruh HTML menjadi Data URI dengan format data:text/html;base64,...
  • Di browser, API DecompressionStream digunakan untuk mendekompresi konten terkompresi secara dinamis dan menjalankannya
  • Diagram di README mencakup DecompressionStream 'gzip' dan tahap Format Mismatch pada langkah pemrosesan browser

Logika pembuatan kode QR

  • Alat pembuat kode QR menyediakan alur untuk mengubah game berukuran sekitar 2,5kb menjadi kode QR
  • Contoh eksekusinya adalah sebagai berikut
python3 QRGEN.py <your-game.html> <output-qrcode.png>

python3 QRGEN.py EVEN-SMALLER-SLAMMER-BACKROOMS.html qrcode.png
  • Proses pembuatan terlebih dahulu mencoba versi QR terkecil yang sesuai dengan panjang konten menggunakan qr.make(fit=True)
  • Jika versi yang dibutuhkan melampaui batas standar kode QR, yaitu 40, proses memaksa versi 40 dengan fit=False
  • Untuk memuat data sebanyak mungkin, level koreksi kesalahan yang digunakan adalah yang paling rendah, yaitu L
  • Jika data masih terlalu besar untuk versi 40 dan level L, encoding QR gagal dan mengembalikan error

Eksekusi dan kompatibilitas

  • Untuk bermain, hanya diperlukan web browser modern
  • Setelah dipindai, seluruh kode game berada di dalam URL, sehingga game bisa dimainkan tanpa koneksi internet
  • Di mobile, diperlukan browser modern yang mendukung API DecompressionStream
    • README mencantumkan Edge, Yandex, dan Opera sebagai contoh
  • Implementasi alternatif berbasis BigInt untuk kode QR yang lebih kecil tersedia di The BigInt Branch, tetapi kompatibilitas browser mobile-nya terbatas

Lingkungan pembuatan dan lisensi

  • Untuk membuat kode QR sendiri, dependensi berikut diperlukan

    • Python 3.7+

      • Library qrcode
      • pillow untuk pemrosesan gambar kode QR
      • Perintah instalasi dependensinya adalah sebagai berikut
pip install qrcode[pil]

- Proses pengembangan dirangkum di [MindDump](https://kuberwastaken.github.io/blog/Projects/How-I-Managed-To-Get-Doom-In-A-QR-Code)
- Proyek ini dirilis dengan **MIT License**, sehingga dapat digunakan, dimodifikasi, dan dibagikan secara bebas

Bacaan terkait

1 komentar

 
GN⁺ 2025-04-19
Komentar di Hacker News

  • Baru tahu tentang DecompressionStream, lalu merapikan bagian HTML dan berhasil mengurangi beberapa byte lagi
    Saya juga sudah mengajukan PR kalau ada yang tertarik melihatnya

    • Berkat ruang yang tersisa itu, saya bisa menambahkan dukungan layar sentuh, pergerakan yang lebih baik, spawn musuh, hingga penanganan damage
      Terima kasih banyak, ini jadi hal terbaik saya bulan ini

  • Proyek yang benar-benar keren
    Saya juga baru tahu soal URL data:; saya sudah tahu dan pernah memakai skema URI data:, tapi tidak tahu bahwa itu bisa dipakai sebagai URL lengkap
    Saya sempat berpikir untuk membuat sesuatu yang serupa yang seluruhnya masuk ke dalam QR code, tetapi menundanya karena keliru mengira perlu tautan HTTP(s). Video ini sangat menginspirasi saya: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

    • Saya juga menonton video itu sekitar masa lockdown dan terinspirasi; memang sangat keren
      Namun demi kompatibilitas yang lebih luas, saya mengambil arah berlawanan dengan berbasis browser, dan saya juga mencantumkan atribusinya di repositori

  • Mungkin ini pertanyaan bodoh karena saya pemula teknis, tapi bukankah QR hanya mengenkode data?
    Kalau data maksimum yang bisa ditampung QR sekitar 3 KB, itu kira-kira setara 3.000 karakter teks biasa. Jadi apakah pencapaiannya di sini adalah game mirip Doom ini berjalan sebagai kode yang dapat dieksekusi berukuran sebesar itu?

    • QR code memiliki beberapa mode encoding seperti numerik, alfanumerik, 8-bit, kanji, dan sebagainya. Yang paling umum adalah encoding alfanumerik, sedangkan yang paling padat adalah encoding 8-bit yang menyimpan data biner apa adanya
      Dalam standar QR, makna dan tujuan encoding 8-bit tampak agak ambigu, tetapi interpretasi dasarnya adalah set karakter JIS8 dan Shift JIS; pada ECI lain, nilainya mewakili byte 8-bit secara langsung
      Bagaimanapun, menyimpan data biner arbitrer di QR code itu mungkin, dan tool qrencode mendukungnya secara default
      Namun banyak decoder berasumsi bahwa QR berisi teks, sehingga dukungannya rumit. Saya pernah mengirim patch decoding QR biner karena zbar merusak data dengan melewatkannya melalui iconv
      Awalnya saya hanya ingin mencetak kunci privat RSA 4096-bit sebagai QR code, tetapi kemudian orang-orang mulai mengenkode video game ke QR juga, dan itu benar-benar keren
      https://youtu.be/ExwqNreocpg
      https://news.ycombinator.com/item?id=24287347

  • Saya memindainya dengan pemindai QR code bawaan iPhone, lalu muncul pesan “Tidak dapat menemukan data yang dapat digunakan”

    • Itu bukan karena masalah ukuran atau panjang QR code, melainkan karena pemindai bawaan iPhone tidak mendukung URL URI data:
      Misalnya halaman web mandiri Hi! bisa dienkode sebagai data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4=, dan jika ditempelkan ke browser, Hi! akan dirender
      Namun jika ini dijadikan QR code, dalam situasi tersebut tidak akan berjalan
    • Terima kasih sudah mengecek
      Kebanyakan ponsel tidak bisa membaca QR code besar dengan baik, jadi perlu sesuatu seperti https://qrscanner.org/
      Dan ini mungkin tidak akan berjalan di ponsel; karena batasan ukuran, saya tidak bisa memasukkan kompatibilitas itu juga
    • Agak melegakan juga kalau ternyata tidak berjalan di iPhone
      Saya sering memindai QR code yang ditempel di berbagai tempat untuk menghemat waktu mengetik URL, jadi cukup menakutkan jika hanya dengan memindai QR code saja bisa terjadi eksekusi kode arbitrer

  • Jika menambahkan image-rendering: pixelated pada CSS canvas, tampilannya mungkin akan menjadi nuansa piksel yang tajam dan tidak buram

    • Sudah saya coba, tetapi tampilan seperti sekarang terasa lebih menyenangkan dan retro, jadi saya lebih suka begitu

  • Saya berharap proyek berikutnya adalah LLM dalam bentuk QR code
    Terkait: https://www.reddit.com/r/OpenAI/comments/138kbhs/someone_sho...

  • Tautan trailer game mengarah ke Shorts berjudul “Fly me to the moon - 19 September 2024”
    Sepertinya itu kesalahan

    • Seharusnya sekarang sudah diperbaiki

  • Saya sangat suka proyek game super kecil seperti ini
    Ini mengingatkan saya pada .kkrieger
    https://en.wikipedia.org/wiki/.kkrieger

    • Saat saya mengunggahnya di LinkedIn, ada yang memberi tahu saya soal itu, dan memang sangat keren

  • Teruslah membuat hal-hal keren, kuberwastaken

    • Saya akan berusaha sebaik mungkin

  • Saya pernah membicarakan ide yang agak terkait dengan seorang teman
    Saya penasaran apakah file STL untuk 3D printing bisa dienkode seluruhnya ke dalam QR code dan ditempelkan pada objek fisiknya, sehingga benda yang dibuat bisa dicetak ulang hanya dengan memindainya
    Setelah saya cari tahu, datanya tampak terlalu banyak, dan saya bahkan sempat mencari QR code berwarna-warni, tetapi saya tidak tahu bahwa kita bisa membuat QR code yang lebih besar

    • Dulu saya pernah mencoba sesuatu yang mirip untuk meja sebagai eksplorasi desain
      Karena meja hanya membutuhkan pemotongan papan, saya mengenkode file 2D, tetapi bahkan untuk proof of concept pun saya harus memakai algoritme kompresi kustom
      https://johnkestner.com/rev/