# Bảy Tám Chín 3D: đưa bát xúc xắc bàn tiệc lên trình duyệt bằng WebGL

Trò chơi lắc bát xúc xắc 3D cho bàn tiệc từ 2 đến 10 người trên trình duyệt, tích hợp vật lý bát sứ 3D, âm thanh Web Audio API và Sổ bia tự động.

Trong những buổi ngồi liên hoan cùng anh em bạn bè, trò *Bảy Tám Chín* (tổng hai hột bằng 7 thì rót thêm, bằng 8 thì uống nửa, bằng 9 thì uống cạn) luôn khuấy động không khí rất nhanh. Tuy nhiên, lúc vào cuộc thì bàn tiệc lại hay thiếu bát đĩa đậy vừa tay, thiếu cặp xúc xắc hoặc sau vài vòng là cả bàn bắt đầu quên mất lượt trước ai vừa rót, trên bàn đang có mấy cốc và chiều xoay đang đi bên trái hay bên phải.

Mình dựng [Bảy Tám Chín 3D (789.tqd.io.vn)](https://789.tqd.io.vn) để đặt một bộ bát đĩa xúc xắc 3D ngay giữa bàn tiệc. Chỉ cần một chiếc điện thoại hoặc máy tính bảng mở trình duyệt là cả bàn có thể nhập cuộc ngay.

![Màn hình chào mừng của trò Bảy Tám Chín 3D trên 789.tqd.io.vn với lời nhắc người chơi đủ 18 tuổi](/media/2026/11/1350cadceb8b-game-789-1280x720.jpg)

Ngay từ màn hình đầu tiên, ứng dụng hiển thị cổng xác nhận độ tuổi dành cho người từ đủ 18 tuổi kèm lời nhắc văn hóa bàn tiệc: *Uống ít, vui nhiều. Đã uống bia thì không lái xe*.

## Thiết lập quân số và giới hạn cốc trên bàn

Trước khi khai bàn, phần **Bày binh bố trận** cho phép cả nhóm tùy chỉnh nhanh hai thông số theo đúng quy mô cuộc vui hôm đó:

- **Quân số trên bàn**: chọn nhanh từ 2 đến 10 người chơi và đặt tên riêng cho từng người để lúc gọi lượt không bị nhầm.
- **Sức chứa tối đa của bàn**: giới hạn từ 1 đến 4 ly đặt giữa bàn để kiểm soát nhịp độ, tránh tình trạng cộng dồn quá nhiều cốc trong một ván.

![Màn hình chọn quân số chiến hữu và sức chứa ly trên bàn trong trò Bảy Tám Chín 3D](/media/2026/11/41cca4714b39-game-789-table-1280x720.jpg)

Ngay khi bấm **Khai bàn, rót 1/2 cốc mở hàng**, hệ thống tự động đặt nửa cốc đầu tiên vào giữa bàn và chỉ định người cầm bát đầu tiên.

## Bát sứ 3D, vật lý xúc xắc và âm thanh tổng hợp trực tiếp

Thay vì chỉ hiện hai hình vuông 2D đổi mặt số đơn điệu, mình sử dụng **Three.js / WebGL** để dựng mô hình chiếc bát sứ đen viền vàng úp trên đĩa trắng đặt trên mặt thảm xanh cổ điển.

Khi đến lượt, người cầm cái bấm nút lắc bát (hoặc lắc trực tiếp điện thoại trên các thiết bị hỗ trợ cảm biến gia tốc). Chiếc bát 3D rung lắc trên mặt đĩa, kéo theo hai viên xúc xắc bên trong va đập vào thành sứ trước khi từ từ hé mở để cả bàn cùng nín thở chờ kết quả.

Toàn bộ âm thanh tiếng xúc xắc lăn lóc cọc trong lòng bát sứ, tiếng đặt cốc xuống mặt bàn và tiếng chuông báo khi ra cặp đôi đều được tổng hợp theo thời gian thực bằng **Web Audio API**, giúp trò chơi phản hồi tức thì dưới 16 mili-giây mà không cần tải các tệp âm thanh nặng.

## Tự động tính luật 7 - 8 - 9, đảo chiều và ghi Sổ bia

Mọi quy tắc truyền thống của trò *Bảy Tám Chín* đều được máy trạng thái trong ứng dụng xử lý tự động và minh bạch sau mỗi lần mở bát:

- **Tổng bằng 7 (Rót)**: người vừa lắc được quyền rót thêm vào ly giữa bàn (từ nửa cốc đến đầy cốc trong giới hạn sức chứa của bàn), sau đó chuyển bát cho người kế tiếp.
- **Tổng bằng 8 (Uống nửa)**: người vừa lắc uống một nửa lượng bia đang có trên bàn rồi giữ nguyên cái để lắc tiếp lượt nữa.
- **Tổng bằng 9 (Uống cạn)**: người vừa lắc uống hết số cốc đang có trên bàn, rót mở hàng lại nửa cốc mới rồi chuyển bát sang người tiếp theo.
- **Ra đôi (1-1, 2-2, 3-3, 4-4, 5-5, 6-6)**: lập tức đảo ngược chiều truyền bát trên bàn (từ thuận kim đồng hồ sang ngược kim đồng hồ hoặc ngược lại), đồng thời cho phép chỉ định người nhận cốc phạt nếu rơi vào các cặp đôi đặc biệt.
- **Các tổng khác (3, 4, 5, 6, 10, 11)**: qua lượt an toàn, bát tự động chuyển cho người ngồi kế bên theo chiều hiện tại.

Ở cột bên phải màn hình (hoặc ngăn kéo dưới trên điện thoại), bảng **Sổ bia** và **Biên bản** tự động thống kê chi tiết từng người đã uống bao nhiêu lần, tổng cộng mấy cốc và lịch sử từng lượt lắc từ đầu buổi. Cả bàn chỉ việc tập trung vào cuộc trò chuyện mà không cần ai phải làm trọng tài nhớ lượt.

Ứng dụng cũng hỗ trợ cài đặt ra màn hình chính như một ứng dụng độc lập (**PWA**) để mở nhanh ngay cả khi quán ăn ở tầng hầm có sóng mạng yếu.

- **Trải nghiệm trực tiếp**: [789.tqd.io.vn](https://789.tqd.io.vn)