Show HN: สร้างเกมสไตล์ Doom ที่บรรจุอยู่ใน QR โค้ด

 (github.com/Kuberwastaken)
1 คะแนน โดย GN⁺ 2025-04-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • The Backdooms เป็นเกม HTML ที่รันได้โดยตรงจาก QR โค้ด พัฒนาขึ้นโดยได้แรงบันดาลใจจาก DOOM 1993 และ The Backrooms
  • โปรเจ็กต์นี้ถูกออกแบบมาเพื่อทดสอบข้อจำกัดของการจัดเก็บและการบีบอัดใน QR โค้ด และเพื่อแสดงวิธีใหม่ในการโฮสต์เว็บแอปขนาดเล็กภายใน QR โค้ด
  • สามารถเล่นเกมได้โดยสแกน QR โค้ดโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต และถูกจัดมาในรูปแบบที่บีบอัดอย่างมาก
  • ใช้ API DecompressionStream เพื่อรันเกมแบบไดนามิกภายในเบราว์เซอร์
  • ใช้งานร่วมกับเบราว์เซอร์มือถือสมัยใหม่ได้ และสามารถสร้าง QR โค้ดด้วย Python และไลบรารี QR โค้ด

ภาพรวมโปรเจ็กต์

  • The Backdooms เป็นเกม HTML ที่รันได้โดยตรงจาก QR โค้ด พัฒนาขึ้นโดยได้แรงบันดาลใจจาก DOOM 1993 และ The Backrooms
  • ออกแบบมาเพื่อทดสอบข้อจำกัดของการจัดเก็บและการบีบอัดใน QR โค้ด และแสดงวิธีใหม่ในการโฮสต์เว็บแอปขนาดเล็กภายใน QR โค้ด

ฟีเจอร์

  • ออฟไลน์เต็มรูปแบบ: หลังสแกน QR โค้ดแล้ว สามารถเล่นเกมได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
  • การบีบอัดขั้นสุด: ใช้การบีบอัด Zlib, Gzip decompression stream และการเข้ารหัส base64 เพื่อบีบอัดผลลัพธ์สุดท้ายให้เล็กที่สุด
  • เว็บเพจแบบ self-extracting: ใช้ DecompressionStream API เพื่อรันเกมแบบไดนามิกภายในเบราว์เซอร์
  • รองรับมือถือ: ทำงานได้บนเบราว์เซอร์มือถือรุ่นใหม่ที่รองรับ Decompressionstream API (Edge, Yandex, Opera)

การติดตั้งและสิ่งที่ต้องใช้

  • ในทางเทคนิคต้องการเพียงเว็บเบราว์เซอร์รุ่นใหม่ แต่หากต้องการสร้าง QR โค้ดสำหรับเกมขนาดประมาณ 2.5kb จะต้องมี Python 3.7+, ไลบรารี qrcode และ pillow

วิธีใช้งาน

1️⃣ แปลงเกมเป็น QR โค้ด

  • รันสคริปต์ด้วยคำสั่งต่อไปนี้: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ สแกน QR โค้ด

  • ใช้สมาร์ตโฟนหรือเครื่องสแกน QR เพื่อเปิดเกมในเว็บเบราว์เซอร์ได้โดยตรง

3️⃣ เล่นได้ทันที 🎮

  • สนุกกับ The Backdooms ได้โดยไม่ต้องดาวน์โหลดหรือติดตั้ง

การวิเคราะห์ทางเทคนิค

เวิร์กโฟลว์การบีบอัด

  • อ่าน HTML ขาเข้า: อ่านเนื้อหา HTML ที่กำหนดจากไฟล์หรือแหล่งข้อมูลอินพุต
  • การบีบอัด Zlib + การคลาย GZip: บีบอัด HTML ด้วย Zlib และใช้ Decompressionstream ของ GZip เพื่อให้ได้การบีบอัดที่ดีที่สุด
  • การเข้ารหัส Base64: เข้ารหัสข้อมูลที่บีบอัดแล้วเป็น Base64 เพื่อคงให้อยู่ในรูปแบบข้อความและฝังลงในไฟล์ HTML ได้อย่างปลอดภัย
  • ฝังใน HTML wrapper: สร้าง HTML wrapper แบบ self-extracting ที่อิง JavaScript ซึ่งมีฟังก์ชัน DecompressionStream API สำหรับคลายข้อมูลเนื้อหาโดยอัตโนมัติเมื่อเปิดในเบราว์เซอร์
  • แปลงเป็น Data URI: แปลง HTML ทั้งหมดเป็นรูปแบบ data:text/html;base64,... เพื่อให้จัดเก็บและแชร์ได้ง่ายโดยไม่ต้องมีไฟล์จริง

ตรรกะการสร้าง QR โค้ด

  • ระบบจะพยายามสร้าง QR เวอร์ชันที่เล็กที่สุดก่อน โดยใช้ qr.make(fit=True) เพื่อปรับขนาด QR แบบไดนามิกตามความยาวของเนื้อหา
  • หากเวอร์ชันที่ต้องใช้เกิน 40 (ขีดจำกัดของมาตรฐาน QR โค้ด) จะบังคับใช้เวอร์ชัน 40 ด้วย fit=False
  • ใช้ระดับการแก้ไขข้อผิดพลาด L ซึ่งต่ำที่สุดเพื่อให้จุข้อมูลได้มากที่สุด
  • หากข้อมูลยังไม่พอดีกับ QR v40 ระดับ L กระบวนการจะล้มเหลวและส่งข้อความผิดพลาดว่าข้อมูลมีขนาดใหญ่เกินกว่าจะเข้ารหัสใน QR โค้ดได้

ผลลัพธ์

  • หากสำเร็จ จะมีการสร้างและแสดง QR โค้ด
  • หากล้มเหลว กระบวนการจะสิ้นสุดพร้อมข้อความผิดพลาดว่าข้อมูลมีขนาดใหญ่เกินกว่าจะเข้ารหัสใน QR โค้ดได้

ใบอนุญาต

  • โปรเจ็กต์นี้เผยแพร่ภายใต้ MIT License และสามารถใช้งาน แก้ไข และแชร์ได้อย่างอิสระ

เครดิต

  • id Software ผู้พัฒนา DOOM
  • matttkc ผู้เสนอไอเดียนี้เมื่อ 5 ปีก่อน
  • Toby Fox ผู้สร้างดนตรีอันยอดเยี่ยมของ Undertale โดยเวอร์ชันที่โฮสต์บน GitHub ของเกมนี้ใช้ Bonetrousle เวอร์ชัน 8-bit
  • พัฒนาโดย Kuber Mehta

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

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

 
GN⁺ 2025-04-19
ความเห็นจาก Hacker News

  • ฉันชอบเริ่มโปรเจ็กต์แบบสุ่ม ๆ เป็นครั้งคราว และครั้งนี้ก็เป็นแบบนั้นเหมือนกัน เป็นโปรเจ็กต์ที่ทำอยู่หนึ่งสัปดาห์เมื่อต้นปีนี้แต่ยังไม่ได้แชร์ จนตอนนี้ตัดสินใจเอามาแชร์

    • ได้สร้างเกมชื่อ The Backdooms โดยได้แรงบันดาลใจจาก Doom และ The Backrooms เกมนี้ทำด้วย HTML แบบมินิมัลและมีขนาดไม่เกิน 2.4kb
    • ใช้วิธีที่ไม่ค่อยนิยมในการใช้ GZip พร้อม Zlib header และเขียนสคริปต์ขึ้นมาเองเพื่อบีบอัด กระบวนการนี้ถูกแปลงเป็น QR code ขนาด 40 ที่ทำงานในเบราว์เซอร์ผ่าน Decompressionstream API
    • คำอธิบายนี้ย่ออย่างมาก เพราะการทำให้มันเหลือ 2.4kb โดยยังใช้เทคนิคหลายอย่างจาก DOOM และผสานกับการสร้างแผนที่แบบ infinite seed-based นั้นยากมาก
    • ถ้าอยากอ่านเพิ่มเติม ดูลิงก์ต่อไปนี้ได้
      • ลิงก์ไปยัง repository (MIT License): [ลิงก์ GitHub]
      • เวอร์ชันที่โฮสต์ไว้ของ The Backdooms (ซึ่งปรับปรุงเพิ่มเล็กน้อย): [ลิงก์ GitHub Pages]
      • ตัวอย่างเกม: [ลิงก์ YouTube]
      • โพสต์บน LinkedIn: [ลิงก์ LinkedIn]
    • (หมายเหตุ: หากต้องการเล่นเกมนี้ ต้องสแกน QR code ขนาดใหญ่แบบใน [ลิงก์เครื่องสแกน QR] แล้วนำข้อมูลข้อความไปใส่ในเบราว์เซอร์)
    • บล็อกที่บันทึกกระบวนการพัฒนาและรายละเอียดการพัฒนาไว้อย่างละเอียด
      • [ลิงก์บล็อก 1]
      • [ลิงก์บล็อก 2]

  • โปรเจ็กต์ถัดไป: ทำ LLM ให้เป็น QR code

    • ลิงก์ที่เกี่ยวข้อง: [ลิงก์ Reddit]

  • เป็นโปรเจ็กต์ที่เจ๋งมาก ได้รู้จัก 'data:' URL ด้วย ก่อนหน้านี้รู้จัก 'data:' URI scheme อยู่แล้ว แต่ไม่รู้ว่าสามารถใช้เป็น URL เต็มรูปแบบได้ เคยคิดอยู่ว่าจะใส่ทั้งเกมลงใน QR code ได้ไหม แต่เข้าใจผิดว่าจำเป็นต้องเป็นลิงก์ HTTP(s) เลยพับเก็บไอเดียไป งานนี้สร้างแรงบันดาลใจให้มาก: จะใส่ทั้งเกมลงใน QR code ได้ไหม? [ลิงก์ YouTube]

  • อยากให้เพิ่มภาพหน้าจอสักหน่อยใน repository ฉันดูบนมือถืออยู่ แต่ไม่รู้ทำไมเห็นแค่ปุ่ม 3 ปุ่มกับหน้าจอสีดำ

    • แก้ไข: ถ้าเพิ่ม GIF ก็จะได้ไม่ต้องพึ่ง YouTube

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

  • ควรอัปเดต CSS ของ canvas เป็น image-rendering: pixelated เพื่อให้ภาพคมชัดและไม่เบลอ

  • ขอให้สร้างของเจ๋ง ๆ แบบนี้ต่อไปนะ, kuberwastaken

  • เป็นโปรเจ็กต์ที่ยอดเยี่ยมมาก กำลังรอให้ "self-contained QR code" ถูกเพิ่มเข้าไปใน canitrundoom อยู่ (แม้จะไม่แน่ใจว่าในเชิงเทคนิคจะผ่านเกณฑ์ได้ไหม)

    • แต่จากนี้ไปคงต้องคิดสองรอบก่อนสแกน QR code เพราะเกมนี้แล้วล่ะ ^^

  • โปรเจ็กต์นี้ให้ความรู้สึกว่าโลกกำลังเข้าใกล้ Snow Crash มากขึ้น เห็น QR code แล้วก็อดสงสัยไม่ได้ว่าสมองฉันกำลังถูกเปลี่ยนแปลงอยู่หรือเปล่า :-D งานน่าทึ่งมาก

  • เจ๋งมาก มีข้อสังเกตเล็กน้อย: DOOM ไม่ได้ใช้ raycasting โปรเจ็กต์นี้คล้ายกับ Wolfenstein 3D มากกว่า และ Wolf3D ใช้ raycasting