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

• The Backdooms adalah game HTML yang bisa dijalankan langsung dari kode QR, dikembangkan dengan inspirasi dari DOOM 1993 dan The Backrooms
• Proyek ini dirancang untuk menguji batas penyimpanan dan kompresi kode QR, serta menunjukkan cara inovatif untuk meng-host aplikasi web ringan di dalam kode QR
• Game ini bisa dimainkan dengan memindai kode QR tanpa koneksi internet, dan disajikan dalam bentuk yang sangat terkompresi
• Menggunakan API DecompressionStream untuk menjalankan game secara dinamis di dalam browser
• Kompatibel dengan browser mobile modern, dan kode QR dapat dibuat menggunakan Python serta library kode QR

---

Gambaran proyek

• The Backdooms adalah game HTML yang bisa dijalankan langsung dari kode QR, dikembangkan dengan inspirasi dari DOOM 1993 dan The Backrooms
• Dirancang untuk menguji batas penyimpanan dan kompresi kode QR, serta menunjukkan cara inovatif untuk meng-host aplikasi web ringan di dalam kode QR

Fitur

• Sepenuhnya offline: Setelah memindai kode QR, game dapat dimainkan tanpa koneksi internet
• Kompresi ekstrem: Menggunakan kompresi Zlib, aliran dekompresi Gzip, dan encoding base64 untuk memampatkan hasil akhir secara ekstrem
• Halaman web self-extracting: Menggunakan API DecompressionStream untuk menjalankan game secara dinamis di dalam browser
• Kompatibilitas mobile: Berjalan di browser mobile modern yang mendukung API Decompressionstream (Edge, Yandex, Opera)

Instalasi dan dependensi

• Secara teknis hanya membutuhkan browser web modern, tetapi untuk membuat kode QR dari game sekitar 2.5kb dibutuhkan Python 3.7+, library qrcode, dan pillow

Cara penggunaan

1️⃣ Ubah game menjadi kode QR

• Jalankan skrip dengan perintah berikut: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ Pindai kode QR

• Gunakan smartphone atau pemindai QR untuk membuka game langsung di browser web

3️⃣ Langsung mainkan 🎮

• Nikmati The Backdooms tanpa unduhan atau instalasi

Analisis teknis

Alur kerja kompresi

• Membaca HTML input: Membaca konten HTML yang diberikan dari file atau sumber input
• Kompresi Zlib + dekompresi GZip: Mengompresi HTML dengan Zlib dan menggunakan Decompressionstream milik GZip untuk mencapai kompresi terbaik
• Encoding Base64: Data terkompresi dienkode ke Base64 agar tetap berbasis teks dan bisa disisipkan dengan aman ke dalam file HTML
• Disertakan dalam wrapper HTML: Dibuat wrapper HTML self-extracting berbasis JavaScript. Wrapper ini menyertakan fungsi API DecompressionStream yang otomatis mendekompresi konten saat dibuka di browser
• Konversi ke data URI: Seluruh HTML diubah ke format data:text/html;base64,... agar mudah disimpan dan dibagikan tanpa file fisik

Logika pembuatan kode QR

• Sistem mula-mula mencoba membuat versi QR sekecil mungkin dengan menyesuaikan ukuran QR secara dinamis berdasarkan panjang konten menggunakan qr.make(fit=True)
• Jika versi yang dibutuhkan melebihi 40 (batas standar kode QR), versi 40 dipaksakan dengan fit=False
• Menggunakan tingkat koreksi kesalahan terendah, yaitu L, yang memungkinkan kapasitas data maksimum agar bisa memuat data sebanyak mungkin
• Jika data tetap tidak muat pada QR v40 level L, proses gagal dan mengembalikan pesan kesalahan bahwa data terlalu besar untuk dienkode ke dalam kode QR

Hasil

• Jika berhasil, kode QR akan dibuat dan ditampilkan
• Jika gagal, proses berhenti dengan pesan kesalahan bahwa data terlalu besar untuk dienkode ke dalam kode QR

Lisensi

• Proyek ini dirilis di bawah lisensi MIT dan dapat digunakan, dimodifikasi, serta dibagikan secara bebas

Kredit

• id Software, pengembang DOOM
• matttkc, yang mengusulkan ide ini 5 tahun lalu
• Toby Fox, yang membuat musik luar biasa untuk Undertale; versi yang di-host di GitHub dari game ini menggunakan versi 8-bit dari Bonetrousle
• Dikembangkan oleh Kuber Mehta

[GN⁺]

Opini Hacker News

• Saya kadang memulai proyek acak, dan kali ini juga seperti itu. Ini proyek yang dibuat selama seminggu pada awal tahun ini, tetapi belum saya bagikan, dan sekarang saya memutuskan untuk membagikannya

  • Terinspirasi oleh Doom dan The Backrooms, saya membuat game bernama The Backdooms. Game ini dibuat dengan HTML minimalis dalam ukuran di bawah 2.4kb
  • Saya menggunakan cara yang tidak populer, yaitu memakai GZip dengan header Zlib, dan untuk itu saya menulis skrip sendiri untuk melakukan kompresi. Proses ini kemudian diubah menjadi kode QR berukuran 40 yang berjalan di browser menggunakan Decompressionstream API
  • Penjelasan ini sangat disederhanakan, dan membuatnya menjadi 2.4kb sambil tetap memakai banyak teknik yang digunakan di DOOM serta menggabungkannya dengan pembuatan map berbasis seed tak terbatas sangatlah sulit
  • Jika ingin membaca lebih lanjut, bisa melihat tautan berikut
    • Tautan repositori (lisensi MIT): [tautan GitHub]
    • Versi The Backdooms yang di-hosting (sedikit ditingkatkan): [tautan GitHub Pages]
    • Trailer game: [tautan YouTube]
    • Postingan LinkedIn: [tautan LinkedIn]
  • (Catatan: untuk memainkan game ini, Anda perlu memindai kode QR besar seperti [tautan pemindai QR] dan memasukkan data teksnya ke browser)
  • Blog yang mencatat proses pengembangan dan mendokumentasikan pengembangannya secara rinci
    • [tautan blog 1]
    • [tautan blog 2]

• Proyek berikutnya: membuat LLM menjadi kode QR

  • Tautan terkait: [tautan Reddit]

• Proyek yang sangat keren. Saya jadi tahu tentang URL data:. Saya memang tahu skema URI data:, tetapi tidak tahu bahwa itu bisa dipakai sebagai URL penuh. Saya pernah berpikir apakah seluruh game bisa dimasukkan ke dalam kode QR, tetapi menundanya karena salah mengira bahwa harus memakai tautan HTTP(s). Saya sangat terinspirasi oleh karya ini: bisakah seluruh game dimasukkan ke dalam kode QR? [tautan YouTube]

• Tolong tambahkan beberapa tangkapan layar ke repositorinya. Saya membukanya lewat ponsel, dan entah kenapa yang terlihat hanya 3 tombol dan layar hitam

  • Sunting: menambahkan GIF akan membuatnya tidak harus bergantung pada YouTube

• Saya memindainya dengan pemindai kode QR bawaan iPhone, tetapi muncul pesan "Tidak ada data yang tersedia"

• CSS pada canvas sebaiknya diperbarui menjadi image-rendering: pixelated agar gambar terlihat tajam dan tidak buram

• Teruslah membuat hal-hal keren, kuberwastaken

• Proyek yang luar biasa. Saya menunggu "kode QR mandiri" ini ditambahkan ke canitrundoom (meskipun saya tidak tahu apakah secara teknis ini bisa disetujui)

  • Tapi sekarang, gara-gara game ini, sepertinya saya akan berpikir dua kali sebelum memindai kode QR ^^

• Proyek ini terasa seperti makin mendekati Snow Crash. Saya sempat bertanya-tanya apakah melihat kode QR ini sedang mengubah otak saya :-D Karya yang menakjubkan

• Sangat keren. Sedikit koreksi saja: DOOM tidak menggunakan raycasting. Proyek ini lebih mirip Wolfenstein 3D, dan Wolf3D memang menggunakan raycasting