Show HN: Tạo game phong cách Doom được nhúng trong mã QR

 (github.com/Kuberwastaken)
1 điểm bởi GN⁺ 2025-04-19 | 1 bình luận | Chia sẻ qua WhatsApp
  • The Backdooms là một game HTML chạy trực tiếp từ mã QR, được phát triển với cảm hứng từ DOOM 1993 và The Backrooms
  • Dự án này được thiết kế để thử nghiệm giới hạn lưu trữ và nén của mã QR, đồng thời trình diễn một phương pháp sáng tạo để lưu trữ các ứng dụng web nhẹ ngay bên trong mã QR
  • Có thể quét mã QR để chơi game mà không cần kết nối Internet, nhờ việc game được phân phối dưới dạng nén cực mạnh
  • Sử dụng API DecompressionStream để chạy game động ngay trong trình duyệt
  • Tương thích với các trình duyệt di động hiện đại, và có thể tạo mã QR bằng Python cùng thư viện mã QR

Tổng quan dự án

  • The Backdooms là một game HTML chạy trực tiếp từ mã QR, được phát triển với cảm hứng từ DOOM 1993 và The Backrooms
  • Được thiết kế để thử nghiệm giới hạn lưu trữ và nén của mã QR, đồng thời trình diễn một phương pháp sáng tạo để lưu trữ các ứng dụng web nhẹ ngay bên trong mã QR

Tính năng

  • Hoàn toàn ngoại tuyến: Sau khi quét mã QR, có thể chơi game mà không cần kết nối Internet
  • Nén cực hạn: Sử dụng nén Zlib, luồng giải nén Gzip và mã hóa base64 để nén kết quả cuối cùng đến mức tối đa
  • Trang web tự giải nén: Sử dụng API DecompressionStream để chạy game động ngay trong trình duyệt
  • Tương thích di động: Hoạt động trên các trình duyệt di động mới hỗ trợ API Decompressionstream (Edge, Yandex, Opera)

Cài đặt và phụ thuộc

  • Về mặt kỹ thuật, chỉ cần một trình duyệt web hiện đại, nhưng để tạo mã QR cho game khoảng 2.5kb thì cần Python 3.7+, thư viện qrcode, và pillow

Cách sử dụng

1️⃣ Chuyển game thành mã QR

  • Chạy script bằng lệnh sau: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ Quét mã QR

  • Có thể dùng smartphone hoặc trình quét QR để mở game trực tiếp trong trình duyệt web

3️⃣ Chơi ngay 🎮

  • Có thể thưởng thức The Backdooms mà không cần tải xuống hay cài đặt

Phân tích kỹ thuật

Quy trình nén

  • Đọc HTML đầu vào: Đọc nội dung HTML được cung cấp từ tệp hoặc nguồn nhập liệu
  • Nén Zlib + giải nén GZip: Nén HTML bằng Zlib và dùng Decompressionstream của GZip để đạt mức nén tốt nhất
  • Mã hóa Base64: Mã hóa dữ liệu đã nén bằng Base64 để giữ ở dạng văn bản và có thể nhúng an toàn vào tệp HTML
  • Nhúng vào wrapper HTML: Tạo một wrapper HTML tự giải nén dựa trên JavaScript. Wrapper này bao gồm hàm API DecompressionStream để tự động giải nén nội dung khi được mở trong trình duyệt
  • Chuyển thành Data URI: Chuyển toàn bộ HTML sang định dạng data:text/html;base64,... để có thể lưu trữ và chia sẻ dễ dàng mà không cần tệp vật lý

Logic tạo mã QR

  • Hệ thống trước tiên cố gắng tạo phiên bản QR nhỏ nhất có thể bằng cách dùng qr.make(fit=True) để điều chỉnh kích thước QR động theo độ dài nội dung
  • Nếu phiên bản cần thiết vượt quá 40 (giới hạn chuẩn của mã QR), hệ thống sẽ ép dùng phiên bản 40 với fit=False
  • Sử dụng mức sửa lỗi thấp nhất là L để chứa được lượng dữ liệu tối đa có thể
  • Nếu dữ liệu vẫn không vừa trong QR v40 mức L, quy trình sẽ thất bại và trả về thông báo lỗi rằng dữ liệu quá lớn để mã hóa vào mã QR

Kết quả

  • Nếu thành công, mã QR sẽ được tạo và hiển thị
  • Nếu thất bại, quy trình sẽ kết thúc với thông báo lỗi rằng dữ liệu quá lớn để mã hóa vào mã QR

Giấy phép

  • Dự án này được phát hành theo giấy phép MIT và có thể tự do sử dụng, chỉnh sửa, chia sẻ

Ghi nhận

  • id Software, đơn vị đã phát triển DOOM
  • matttkc, người đã đề xuất ý tưởng này từ 5 năm trước
  • Toby Fox, người đã tạo ra phần nhạc tuyệt vời của Undertale; phiên bản được host trên GitHub của game này sử dụng bản 8-bit của Bonetrousle
  • Được phát triển bởi Kuber Mehta

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-04-19
Ý kiến Hacker News

  • Thỉnh thoảng tôi hay bắt đầu những dự án ngẫu hứng, và đây cũng là một trường hợp như vậy. Đây là dự án tôi làm trong một tuần hồi đầu năm nay nhưng chưa chia sẻ, còn lần này tôi quyết định đăng lên

    • Lấy cảm hứng từ Doom và The Backrooms, tôi đã làm ra một trò chơi tên là The Backdooms. Trò chơi này được tạo bằng HTML tối giản, với kích thước dưới 2.4kb
    • Tôi đã dùng một cách ít phổ biến là sử dụng GZip kèm header Zlib, và tự viết script để nén. Quá trình này được chuyển thành mã QR kích thước 40 chạy được trên trình duyệt nhờ Decompressionstream API
    • Mô tả này đã được đơn giản hóa rất nhiều; việc đưa vào 2.4kb trong khi vẫn dùng nhiều kỹ thuật từng được dùng trong DOOM, đồng thời kết hợp với cơ chế tạo bản đồ vô hạn dựa trên seed, là việc cực kỳ khó
    • Nếu muốn đọc thêm, có thể tham khảo các liên kết sau
      • Liên kết kho lưu trữ (giấy phép MIT): [Liên kết GitHub]
      • Phiên bản The Backdooms được host (đã cải tiến đôi chút): [Liên kết GitHub Pages]
      • Trailer trò chơi: [Liên kết YouTube]
      • Bài đăng LinkedIn: [Liên kết LinkedIn]
    • (Lưu ý: để chơi trò này, bạn cần quét một mã QR lớn như [Liên kết trình quét QR] và đưa dữ liệu văn bản vào trình duyệt)
    • Blog ghi lại quá trình phát triển và chi tiết việc xây dựng
      • [Liên kết blog 1]
      • [Liên kết blog 2]

  • Dự án tiếp theo: biến LLM thành mã QR

    • Liên kết liên quan: [Liên kết Reddit]

  • Dự án thật sự rất ngầu. Nhờ đó tôi mới biết về URL data:. Tôi có biết URI scheme data:, nhưng không biết nó có thể được dùng như một URL hoàn chỉnh. Tôi từng nghĩ liệu có thể nhét cả một trò chơi vào mã QR không, nhưng lại lầm tưởng rằng cần một liên kết HTTP(s) nên đã gác ý định đó lại. Việc này truyền cảm hứng cho tôi rất nhiều: có thể nhét cả một trò chơi vào mã QR không? [Liên kết YouTube]

  • Mong bạn thêm vài ảnh chụp màn hình vào kho lưu trữ. Tôi đang xem trên điện thoại, nhưng không rõ vì sao chỉ thấy 3 nút và một màn hình đen

    • Chỉnh sửa: thêm GIF thì sẽ không cần phụ thuộc vào YouTube nữa

  • Tôi đã quét bằng trình quét mã QR mặc định của iPhone, nhưng nó báo "Không có dữ liệu khả dụng"

  • Bạn nên cập nhật CSS của canvas thành image-rendering: pixelated để hình ảnh hiển thị sắc nét thay vì bị mờ

  • Mong bạn tiếp tục tạo ra những thứ tuyệt vời, kuberwastaken

  • Dự án quá đỉnh. Tôi đang chờ "mã QR tự chứa" được thêm vào canitrundoom (dù về mặt kỹ thuật có được chấp nhận hay không thì tôi không chắc)

    • Nhưng giờ thì có lẽ tôi sẽ phải nghĩ kỹ hai lần trước khi quét mã QR vì trò này ^^

  • Dự án này tạo cảm giác như đang tiến gần đến Snow Crash. Tôi tự hỏi liệu chỉ nhìn mã QR thôi có đang làm biến đổi não mình không :-D Công việc thật đáng kinh ngạc

  • Rất hay. Chỉ góp ý nhỏ thôi: DOOM không dùng raycasting. Dự án này giống Wolfenstein 3D hơn, và Wolf3D mới là game dùng raycasting