Show HN: QR koda gömülü Doom tarzı oyun yapımı

 (github.com/Kuberwastaken)
1 puan yazan GN⁺ 2025-04-19 | 1 yorum | WhatsApp'ta paylaş
  • The Backdooms, doğrudan bir QR koddan çalışabilen bir HTML oyunudur; DOOM 1993 ve The Backrooms'tan ilham alınarak geliştirilmiştir
  • Proje, QR kod depolama ve sıkıştırma sınırlarını test etmek ve QR kod içinde hafif web uygulamaları barındırmanın yenilikçi bir yolunu göstermek için tasarlanmıştır
  • Oyun, internet bağlantısı olmadan bir QR kod taranarak oynanabilir ve son derece sıkıştırılmış bir biçimde sunulur
  • Tarayıcı içinde oyunu dinamik olarak çalıştırmak için DecompressionStream API'si kullanılır
  • Modern mobil tarayıcılarla uyumludur ve Python ile QR kod kütüphaneleri kullanılarak QR kod üretilebilir

Projeye genel bakış

  • The Backdooms, doğrudan bir QR koddan çalışabilen bir HTML oyunudur; DOOM 1993 ve The Backrooms'tan ilham alınarak geliştirilmiştir
  • QR kod depolama ve sıkıştırma sınırlarını test etmek ve QR kod içinde hafif web uygulamaları barındırmanın yenilikçi bir yolunu göstermek için tasarlanmıştır

Özellikler

  • Tamamen çevrimdışı: QR kod tarandıktan sonra internet bağlantısı olmadan oyun oynanabilir
  • Aşırı sıkıştırma: Zlib sıkıştırması, Gzip açma akışı ve base64 kodlama kullanılarak nihai sonuç son derece sıkıştırılır
  • Kendini açan web sayfası: DecompressionStream API'si kullanılarak oyun tarayıcı içinde dinamik olarak çalıştırılır
  • Mobil uyumluluk: DecompressionStream API'sini destekleyen modern mobil tarayıcılarda çalışır (Edge, Yandex, Opera)

Kurulum ve bağımlılıklar

  • Teknik olarak yalnızca modern bir web tarayıcısı gerekir, ancak yaklaşık 2.5kb'lık bir oyunun QR kodunu oluşturmak için Python 3.7+, qrcode kütüphanesi ve pillow gereklidir

Kullanım

1️⃣ Oyunu QR koda dönüştürme

  • Betiği şu komutla çalıştırın: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ QR kodu tarama

  • Akıllı telefon veya QR tarayıcı kullanarak oyunu doğrudan web tarayıcısında açabilirsiniz

3️⃣ Anında oynayın 🎮

  • İndirme veya kurulum olmadan The Backdooms'un keyfini çıkarabilirsiniz

Teknik analiz

Sıkıştırma iş akışı

  • Girdi HTML'ini okuma: Dosyadan veya giriş kaynağından verilen HTML içeriği okunur
  • Zlib sıkıştırma + GZip açma: HTML, Zlib ile sıkıştırılır ve en iyi sıkıştırmayı sağlamak için GZip'in DecompressionStream'i kullanılır
  • Base64 kodlama: Sıkıştırılmış veriler, metin tabanlı kalması ve HTML dosyasına güvenle gömülebilmesi için Base64 ile kodlanır
  • HTML sarmalayıcıya gömme: JavaScript tabanlı, kendini açan bir HTML sarmalayıcı oluşturulur. Bu sarmalayıcı, tarayıcıda açıldığında içeriği otomatik olarak açan DecompressionStream API işlevini içerir
  • Data URI'ye dönüştürme: Tüm HTML, fiziksel dosya olmadan kolayca depolanıp paylaşılabilmesi için data:text/html;base64,... biçimine dönüştürülür

QR kod oluşturma mantığı

  • Sistem önce qr.make(fit=True) kullanarak içerik uzunluğuna göre QR boyutunu dinamik biçimde ayarlayıp mümkün olan en küçük QR sürümünü oluşturmaya çalışır
  • Gerekli sürüm 40'ı aşarsa (QR kod standardı sınırı), fit=False ile sürüm 40 zorlanır
  • Mümkün olan en fazla veriyi sığdırmak için en düşük hata düzeltme seviyesi olan L kullanılır
  • Veri hâlâ QR v40 seviye L'ye sığmıyorsa süreç başarısız olur ve verinin QR koda kodlanamayacak kadar büyük olduğunu belirten bir hata mesajı döndürülür

Sonuç

  • Başarılı olursa QR kod oluşturulur ve görüntülenir
  • Başarısız olursa süreç, verinin QR koda kodlanamayacak kadar büyük olduğunu belirten bir hata mesajıyla sonlanır

Lisans

  • Bu proje MIT lisansı altında yayımlanmıştır ve serbestçe kullanılabilir, değiştirilebilir ve paylaşılabilir

Katkıda bulunanlar

  • DOOM'u geliştiren id Software
  • 5 yıl önce bu fikri öneren matttkc
  • Undertale'ın harika müziklerini yapan Toby Fox; bu oyunun GitHub üzerinde barındırılan sürümü Bonetrousle'un 8-bit versiyonunu kullanır
  • Kuber Mehta tarafından geliştirilmiştir

İlgili okumalar

1 yorum

 
GN⁺ 2025-04-19
Hacker News yorumu

  • Bazen rastgele projelere başlıyorum, bu da onlardan biriydi. Bu yılın başında bir haftada yaptığım bir projeydi ama paylaşmamıştım; şimdi paylaşmaya karar verdim

    • Doom ve The Backrooms'tan ilham alarak The Backdooms adlı bir oyun yaptım. Bu oyun, son derece minimal HTML ile 2.4kb'nin altında üretildi
    • GZip'i Zlib header'ı ile birlikte kullanan, çok yaygın olmayan bir yöntem kullandım ve bunun için sıkıştırmayı kendim script yazarak yaptım. Bu süreç, Decompressionstream API kullanılarak tarayıcıda çalışan 40 boyutunda bir QR koda dönüştürüldü
    • Bu açıklama çok basitleştirilmiş durumda; DOOM'da kullanılan pek çok tekniği kullanırken bunu sonsuz seed tabanlı harita üretimiyle birleştirip 2.4kb'ye sığdırmak çok zordu
    • Daha fazla okumak isterseniz şu bağlantılara bakabilirsiniz
      • Depo bağlantısı (MIT lisansı): [GitHub bağlantısı]
      • The Backdooms'un barındırılan (biraz iyileştirilmiş) sürümü: [GitHub Pages bağlantısı]
      • Oyun fragmanı: [YouTube bağlantısı]
      • LinkedIn gönderisi: [LinkedIn bağlantısı]
    • (Not: Bu oyunu oynamak için [QR scanner bağlantısı] gibi büyük bir QR kodu tarayıp metin verisini tarayıcıya koymanız gerekiyor)
    • Geliştirme sürecini ve geliştirmeyi ayrıntılı biçimde belgeleyen blog
      • [Blog bağlantısı 1]
      • [Blog bağlantısı 2]

  • Sonraki proje: LLM'yi QR koda dönüştürmek

    • İlgili bağlantı: [Reddit bağlantısı]

  • Gerçekten harika bir proje. data: URL hakkında bilgi edinmiş oldum. data: URI scheme'ini biliyordum ama bunun tam bir URL olarak kullanılabileceğini bilmiyordum. Tüm oyunu QR kodun içine koyabilir miyim diye düşünmüştüm ama HTTP(s) bağlantısı gerektiğini sanıp bunu ertelemiştim. Bu çalışma bana ciddi şekilde ilham verdi: QR kodun içine tüm bir oyun sığdırılabilir mi? [YouTube bağlantısı]

  • Depoya birkaç ekran görüntüsü eklemenizi isterim. Telefonda bakıyorum ve nedenini bilmiyorum ama sadece 3 düğme ve siyah bir ekran gördüm

    • Düzenleme: Bir GIF eklerseniz YouTube'a bağımlı kalınmaz

  • iPhone'un varsayılan QR kod tarayıcısıyla taradım ve "Kullanılabilir veri yok" dedi

  • Görüntünün bulanık değil net görünmesi için canvas'ın CSS'ini image-rendering: pixelated olarak güncellemeniz gerekir

  • Harika şeyler yapmaya devam et, kuberwastaken

  • Müthiş bir proje. "Kendi kendine yeten QR kod"un canitrundoom'a eklenmesini bekliyorum (teknik olarak kabul edilir mi bilmiyorum)

    • Ama artık o oyun yüzünden bir QR kodu taramadan önce iki kez düşüneceğim sanırım ^^

  • Bu proje Snow Crash'e yaklaşıyormuş gibi hissettiriyor. QR koda bakıp beynimin değişime uğrayıp uğramadığını merak ettim :-D Muhteşem bir iş

  • Çok havalı. Küçük bir düzeltme ama: DOOM raycasting kullanmıyordu. Bu proje Wolfenstein 3D'ye daha benziyor ve Wolf3D raycasting kullanıyordu