Show HN: สร้างเกมสไตล์ Doom ที่อยู่ใน QR code

 (github.com/Kuberwastaken)
1 คะแนน โดย GN⁺ 2025-04-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • The Backdooms เป็นเกม HTML แบบบีบอัดและแตกไฟล์เองที่สร้างฉากได้ไม่สิ้นสุด ได้แรงบันดาลใจจาก DOOM 1993 และ The Backrooms และรันจาก QR code ไปยังเบราว์เซอร์ได้โดยตรง
  • ใช้วิธีใส่โค้ดทั้งหมดของเกมไว้ใน URL และตั้งเป้าให้เป็นโครงสร้างแบบ ออฟไลน์เต็มรูปแบบ ที่เล่นได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ตหลังสแกน
  • กระบวนการบีบอัดคือบีบอัด HTML ด้วย Zlib แล้วเข้ารหัสเป็น Base64 จากนั้นใส่ไว้ใน JavaScript HTML wrapper และให้เบราว์เซอร์แตกไฟล์ด้วย API DecompressionStream เพื่อรัน
  • การสร้าง QR ใช้ qr.make(fit=True) เพื่อหา QR version ที่เล็กที่สุดเท่าที่เป็นไปได้ และจะล้มเหลวหากไม่พอดีภายในขีดจำกัดมาตรฐานคือ version 40 และ error correction level L
  • การรองรับมือถือจำกัดเฉพาะเบราว์เซอร์มือถือรุ่นใหม่ที่รองรับ API DecompressionStream โดย README ยกตัวอย่าง Edge, Yandex, Opera

The Backdooms ทำอะไร

  • The Backdooms เป็นเกม HTML ที่ใส่เกมทั้งตัวไว้ใน QR code และรันในเว็บเบราว์เซอร์
  • เกมได้แรงบันดาลใจจาก DOOM 1993 และ The Backrooms และถูกจัดทำในรูปแบบเว็บเพจแบบบีบอัดที่แตกไฟล์เอง
  • เมื่อสแกน QR code จะรันในเบราว์เซอร์ได้ทันที โดยไม่ต้องดาวน์โหลดหรือติดตั้งเพิ่มเติม
  • README ระบุว่าสามารถ สแกนเพื่อเล่น ได้
  • GitHub Pages ยังมี เวอร์ชันที่บีบอัดน้อยลงเล็กน้อย ให้ใช้งานด้วย

วิธีบีบอัดที่ผลักดันขีดจำกัดพื้นที่จัดเก็บ

  • เป้าหมายของโปรเจกต์คือผลักดันขีดจำกัดของ ความจุในการเก็บข้อมูลของ QR code และการบีบอัด พร้อมแสดงวิธีโฮสต์เว็บแอปพลิเคชันขนาดเบาไว้ใน QR code
  • กระบวนการบีบอัดประกอบด้วยลำดับต่อไปนี้
    • อ่าน HTML อินพุต
    • บีบอัด HTML ด้วย Zlib
    • เข้ารหัสข้อมูลที่บีบอัดแล้วเป็น Base64
    • แทรกลงใน HTML wrapper ที่ใช้ JavaScript
    • แปลง HTML ทั้งหมดเป็น Data URI รูปแบบ data:text/html;base64,...
  • ในเบราว์เซอร์จะใช้ API DecompressionStream เพื่อแตกเนื้อหาที่บีบอัดแบบไดนามิกและรัน
  • ในไดอะแกรมของ README มีขั้นตอน DecompressionStream 'gzip' และขั้นตอน Format Mismatch รวมอยู่ในช่วงการประมวลผลของเบราว์เซอร์

ตรรกะการสร้าง QR code

  • เครื่องมือสร้าง QR code มีขั้นตอนสำหรับเปลี่ยนเกมขนาดประมาณ 2.5kb ให้เป็น QR code
  • ตัวอย่างการรันมีดังนี้
python3 QRGEN.py <your-game.html> <output-qrcode.png>

python3 QRGEN.py EVEN-SMALLER-SLAMMER-BACKROOMS.html qrcode.png
  • ระหว่างสร้าง จะลองใช้ qr.make(fit=True) ก่อน เพื่อหา QR version ที่เล็กที่สุดซึ่งพอดีกับความยาวของเนื้อหา
  • หาก version ที่ต้องใช้เกินขีดจำกัดมาตรฐาน QR code คือ 40 จะบังคับใช้ version 40 ด้วย fit=False
  • เพื่อใส่ข้อมูลให้ได้มากที่สุด จะใช้ error correction level ต่ำสุดคือ L
  • หากข้อมูลยังใหญ่เกินไปแม้ใช้ version 40 และ level L การเข้ารหัส QR จะล้มเหลวและส่งคืนข้อผิดพลาด

การรันและความเข้ากันได้

  • การเล่นต้องใช้เพียงเว็บเบราว์เซอร์รุ่นใหม่
  • หลังสแกนแล้ว โค้ดทั้งหมดของเกมจะอยู่ใน URL จึงเล่นได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
  • บนมือถือจำเป็นต้องใช้เบราว์เซอร์รุ่นใหม่ที่รองรับ API DecompressionStream
    • README ยกตัวอย่าง Edge, Yandex, Opera
  • การใช้งานทางเลือกที่ใช้ BigInt เพื่อให้ได้ QR code ที่เล็กลงอยู่ใน The BigInt Branch แต่ความเข้ากันได้กับเบราว์เซอร์มือถือมีข้อจำกัด

สภาพแวดล้อมการสร้างและไลเซนส์

  • หากต้องการสร้าง QR code เอง ต้องมี dependency ต่อไปนี้

    • Python 3.7+

      • ไลบรารี qrcode
      • pillow สำหรับประมวลผลภาพ QR code
      • คำสั่งติดตั้ง dependency มีดังนี้
pip install qrcode[pil]

- กระบวนการพัฒนาถูกสรุปไว้ใน [MindDump](https://kuberwastaken.github.io/blog/Projects/How-I-Managed-To-Get-Doom-In-A-QR-Code)
- โปรเจกต์เผยแพร่ภายใต้ **MIT License** จึงสามารถใช้ แก้ไข และแชร์ได้อย่างเสรี

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-19
ความคิดเห็นบน Hacker News

  • เพิ่งรู้จัก DecompressionStream เป็นครั้งแรก และได้ปรับแต่งส่วน HTML ให้ลดลงได้อีกไม่กี่ไบต์
    ถ้าสนใจก็ส่ง PR ไว้ให้ดูแล้ว

    • ด้วยพื้นที่ที่ได้เพิ่มมานั้น ทำให้เพิ่ม การรองรับหน้าจอสัมผัส, การเคลื่อนที่ที่ดีขึ้น, การสร้างศัตรู และการจัดการความเสียหายได้ด้วย
      ขอบคุณจริง ๆ นี่เป็นเรื่องดีที่สุดของเดือนนี้เลย

  • เป็นโปรเจกต์ที่เจ๋งมาก
    เพิ่งได้รู้จัก data: URL ด้วย ก่อนหน้านี้รู้และเคยใช้สคีม data: URI อยู่แล้ว แต่ไม่รู้ว่าสามารถใช้เป็น URL แบบเต็ม ได้
    เคยคิดจะทำอะไรคล้าย ๆ กันที่ใส่ทั้งหมดไว้ใน QR code แต่เข้าใจผิดว่าต้องมีลิงก์ HTTP(s) เลยพักไว้ก่อน วิดีโอนี้ให้แรงบันดาลใจมาก: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

    • วิดีโอนั้นผมก็ได้ดูช่วงล็อกดาวน์และได้แรงบันดาลใจเหมือนกัน มันเจ๋งจริง ๆ
      แต่เพื่อความเข้ากันได้ที่กว้างกว่า เลยไปในทิศทางตรงกันข้ามคือทำบนเบราว์เซอร์ และใส่เครดิตไว้ใน repository แล้ว

  • อาจเป็นคำถามโง่ ๆ เพราะผมยังเป็นมือใหม่ด้านเทคนิค แต่ QR ก็แค่เข้ารหัสข้อมูลไม่ใช่เหรอ?
    ถ้าข้อมูลสูงสุดที่ QR เก็บได้อยู่ราว 3KB ก็น่าจะเท่ากับอักขระข้อความธรรมดาประมาณ 3,000 ตัว เลยสงสัยว่าความสำเร็จตรงนี้หมายถึงเกมคล้าย Doom นี้ทำงานได้ด้วย โค้ดที่รันได้จริง ในขนาดประมาณนั้นใช่ไหม

    • QR code มี โหมดการเข้ารหัส หลายแบบ เช่น ตัวเลข, ตัวอักษรและตัวเลข, 8 บิต, คันจิ เป็นต้น แบบที่พบบ่อยที่สุดคือการเข้ารหัสตัวอักษรและตัวเลข และแบบที่หนาแน่นที่สุดคือการเข้ารหัส 8 บิตที่เก็บข้อมูลไบนารีโดยตรง
      ความหมายและจุดประสงค์ของการเข้ารหัส 8 บิตในมาตรฐาน QR ดูจะคลุมเครืออยู่บ้าง แต่การตีความพื้นฐานคือชุดอักขระ JIS8 และ Shift JIS ส่วนใน ECI อื่น ๆ จะหมายถึงค่าไบต์ 8 บิตโดยตรง
      ไม่ว่าอย่างไร การเก็บข้อมูลไบนารีใด ๆ ใน QR code ก็ทำได้ และเครื่องมือ qrencode รองรับสิ่งนี้เป็นค่าเริ่มต้น
      อย่างไรก็ตาม ตัวถอดรหัสมักสมมติว่าข้างใน QR เป็นข้อความ ทำให้การรองรับยุ่งยาก และผมเคยส่งแพตช์ถอดรหัส QR แบบไบนารีไป เพราะ zbar ทำข้อมูลพังจากการส่งผ่าน iconv
      เดิมทีผมแค่อยากพิมพ์ คีย์ลับ RSA 4096 บิต เป็น QR code เท่านั้น แต่หลังจากนั้นผู้คนก็เริ่มเข้ารหัสวิดีโอเกมลง QR กันด้วย เจ๋งมากจริง ๆ
      https://youtu.be/ExwqNreocpg
      https://news.ycombinator.com/item?id=24287347

  • ลองสแกนด้วยตัวสแกน QR code พื้นฐานของ iPhone แล้วขึ้นว่า “ไม่พบข้อมูลที่ใช้งานได้”

    • นั่นไม่ใช่ปัญหาเรื่องขนาดหรือความยาวของ QR code แต่เป็นเพราะตัวสแกนพื้นฐานของ iPhone ไม่รองรับ URL แบบ data: URI
      ตัวอย่างเช่น เว็บเพจแบบบรรจุในตัวเอง Hi! สามารถเข้ารหัสเป็น data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4= และถ้าวางลงในเบราว์เซอร์ก็จะแสดงผลเป็น Hi!
      แต่ถ้านำสิ่งนี้ไปทำเป็น QR code จะไม่ทำงานในสถานการณ์นั้น
    • ขอบคุณที่ช่วยยืนยัน
      โทรศัพท์ส่วนใหญ่สแกน QR code ขนาดใหญ่ได้ไม่ดีนัก เลยต้องใช้บริการอย่าง https://qrscanner.org/
      และบนโทรศัพท์ก็คงไม่ทำงานอยู่ดี เพราะข้อจำกัดด้านขนาดทำให้ใส่ความเข้ากันได้ระดับนั้นเพิ่มไม่ได้
    • พอรู้ว่าใช้ไม่ได้บน iPhone ก็รู้สึกโล่งใจนิดหน่อย
      ผมมักสแกน QR code ที่ติดตามที่ต่าง ๆ เพื่อประหยัดเวลาในการพิมพ์ URL แต่ถ้าคิดว่าการสแกน QR code เพียงอย่างเดียวสามารถทำให้เกิด การรันโค้ดตามอำเภอใจ ได้ ก็น่ากลัวพอสมควร

  • ถ้าใส่ image-rendering: pixelated ใน CSS ของ canvas น่าจะดูเป็น พิกเซลคม ๆ ไม่เบลอ

    • ลองแล้ว แต่ผมชอบแบบที่เห็นตอนนี้มากกว่า เพราะให้ความรู้สึกสนุกและเรโทรกว่า

  • โปรเจกต์ถัดไปอยากให้เป็น LLM ในรูป QR code
    ที่เกี่ยวข้อง: https://www.reddit.com/r/OpenAI/comments/138kbhs/someone_sho...

    • อัปเดต: ทำออกมาได้ในระดับหนึ่งแล้ว
      ไม่ใช่ LLM แต่ก็เป็นแชตบอตที่ค่อนข้างเจ๋ง
      https://github.com/Kuberwastaken/MiniLMs/tree/main/SYNEVA
    • พูดตรง ๆ ผมอาจลองทำเวอร์ชันที่คล้ายกันดูสักครั้งก็ได้

  • ลิงก์เทรลเลอร์เกมพาไปที่ Shorts ชื่อ “Fly me to the moon - 19 September 2024”
    น่าจะเป็นความผิดพลาด

    • ตอนนี้น่าจะแก้แล้ว

  • ชอบ โปรเจกต์เกมขนาดจิ๋ว แบบนี้มาก
    ทำให้นึกถึง .kkrieger
    https://en.wikipedia.org/wiki/.kkrieger

    • มีคนบอกผมตอนโพสต์บน LinkedIn มันเจ๋งจริง ๆ

  • หวังว่าจะทำของเจ๋ง ๆ ออกมาเรื่อย ๆ นะ kuberwastaken

    • จะพยายามให้ดีที่สุด

  • เคยคุยไอเดียที่เกี่ยวข้องอยู่บ้างกับเพื่อน
    สงสัยว่าถ้าเข้ารหัส ไฟล์ STL สำหรับพิมพ์ 3D ทั้งไฟล์ลงใน QR code แล้วแปะไว้บนชิ้นงานจริง จะทำให้แค่สแกนของที่ทำไว้แล้วพิมพ์ซ้ำได้หรือเปล่า
    พอลองหาข้อมูลแล้วดูเหมือนข้อมูลจะเยอะเกินไป และถึงขั้นไปดู QR code แบบหลายสีด้วย แต่ไม่รู้เลยว่าสามารถทำ QR code ให้ใหญ่ขึ้นได้

    • เมื่อก่อนเคยทำอะไรคล้าย ๆ กันกับโต๊ะในเชิงสำรวจการออกแบบ
      โต๊ะต้องใช้แค่การตัดแผ่นวัสดุ เลยเข้ารหัสไฟล์ 2D แต่ถึงอย่างนั้น เพื่อพิสูจน์แนวคิดก็ยังต้องใช้ อัลกอริทึมบีบอัดแบบกำหนดเอง
      https://johnkestner.com/rev/