Template 10 mini game

Xem màn hình mẫu: templates/index.html. Component riêng cho game: components/game.css.

Nguồn: chuyển từ design/docs/05-mau-game.md ngày 2026-11-11.

Tổng quan

#	Game	Mô hình	Thời lượng / lượt	Người / lượt	Đầu vào	Độ sẵn sàng
1	Bứt tốc 10 giây	A · B	10s	1	Chạm / nút bấm	🟢 Sẵn sàng
2	Chạm chớp nhoáng	A · B	20–30s	1	Chạm / nút bấm	🟢 Sẵn sàng
3	FPT Signal Hunt	D	30–45s	1	Webcam — bàn tay	🟡 Cần kiểm thử
4	Cáo Goalkeeper	C	5 cú sút ≈ 40s	1	Điện thoại — chọn/nghiêng 3 hướng	🟡 Phụ thuộc mạng
5	FPT Air Kick	D	3–5 cú sút ≈ 60s	1	Webcam — toàn thân	🔴 Thử nghiệm
6	Cáo đối đầu	C	3 hiệp × 2 lượt ≈ 2 phút	2	2 điện thoại — chọn hướng	🟡 Phụ thuộc mạng
7	Cáo gom lộc	A (+TV bảng điểm)	45–60s	Hàng trăm cùng lúc	Vuốt trái/phải	🟢 Sẵn sàng
8	Cáo bay bằng giọng nói	A	30s	1	Micro	🔴 Thử nghiệm
9	Cây lời chúc	C	1–2 phút	Không giới hạn	Form trên điện thoại	🟢 Sẵn sàng
10	Photobooth	D	2–3 phút	1–4 (1 nhóm)	Đăng ký + nhân sự chụp	🟢 Sẵn sàng

Bốn mô hình thiết bị

Mô hình	Thiết bị	`data-platform`	Hàng chờ	Game
A · Chỉ điện thoại	Điện thoại người chơi (web / Zalo / app)	`zalo` · `app` · `web`	Không	1, 2, 7, 8
B · Booth	Màn kiosk đứng / TV + nút arcade hoặc bàn phím	`kiosk` hoặc `tv`	Có	1, 2
C · TV + điện thoại làm tay cầm	TV hiển thị + điện thoại quét QR để điều khiển	TV: `tv` · ĐT: `zalo`/`web`	Có (trừ game 9)	4, 6, 9
D · TV + webcam	TV + webcam/camera + máy tính đủ mạnh	`tv`	Có	3, 5, 10

Luồng chung theo mô hình

Bước	A · Chỉ điện thoại	B · Booth	C · TV + tay cầm	D · TV + webcam
1. Vào	Quét QR / link / Zalo	Chạm màn attract	Quét QR trên TV	Nhân sự gọi số
2. Đăng ký	SĐT (Zalo tự lấy)	SĐT trên bàn phím số	SĐT trên điện thoại	SĐT trên điện thoại khi xếp hàng
3. Chờ	—	Số thứ tự	Phòng chờ, TV hiện tên	Số thứ tự trên điện thoại
4. Chuẩn bị	Hướng dẫn 1 màn	Hướng dẫn 1 màn	Ghép thiết bị, "Sẵn sàng"	Đứng vào vùng, kiểm tra ánh sáng
5. Đếm ngược	3-2-1 trên điện thoại	3-2-1 trên màn	3-2-1 trên TV	3-2-1 trên TV
6. Chơi	Điện thoại	Màn + nút	TV hiển thị, điện thoại điều khiển	TV + cử động
7. Kết quả	Điện thoại	Màn	TV + điện thoại cùng lúc	TV + điện thoại
8. Nhận quà	Voucher trong ví	QR cho nhân sự quét	Voucher trên điện thoại	Voucher trên điện thoại

Thành phần mới (game.css)

Component	Class	Dùng ở game
Khung TV 1920×1080	`.ds-tv` (`__top __stage __ticker`)	3, 4, 5, 6, 7, 9, 10
QR tham gia	`.ds-join` (`--lg`)	4, 6, 7, 9, 10
Đếm ngược	`.ds-countdown` (`--go`)	1–8
Nút chạm khổng lồ	`.ds-tap`	1, 2
Tín hiệu phản xạ	`.ds-signal--wait / --go / --early / --hit`	2
Chọn 3 hướng	`.ds-dpad` (`--locked`)	4, 6
Xin quyền	`.ds-perm`	3, 5 (camera), 8 (micro)
Khung webcam	`.ds-cam` (`__zone __checks __hand __body`)	3, 5, 10
Vật phẩm	`.ds-item--wifi / --camera / --play / --lixi / --bad`	3, 7
Điểm bay	`.ds-floater` (`--minus`)	3, 7
Tỷ số đối đầu	`.ds-versus`, `.ds-rounds`, `.ds-secret`	6
Phòng chờ / số thứ tự	`.ds-lobby` `.ds-slot`, `.ds-queue`	3, 5, 6, 10
Thanh thời gian TV	`.ds-timebar` (`.is-low`)	3, 4, 7
Đo âm lượng	`.ds-meter` (`--dark`)	8
Gợi ý vuốt / làn	`.ds-swipe-hint`, `.ds-lanes`	7
Lời chúc	`.ds-wish`, `.ds-mod-status`, `.ds-insight`	9
Khung ảnh	`.ds-frames` `.ds-frame`, `.ds-photo`	10
Nhân vật Cáo	`.ds-fox` + `assets/mascot/cao-<tư-thế>.webp` (30 tư thế, xem `assets/mascot/README.md`)	Cả 10 game
Cảnh báo vận hành	`.ds-ops`	3, 4, 5, 6, 8 (chỉ hiện cho nhân sự)

Cáo lấy từ bộ sticker resources/cao/. Chỉ có một chú Cáo cam — game đối đầu phân đội bằng màu áo (đỏ / xanh), không đổi màu lông.
Lì xì dùng đỏ #E8202A + vàng #FFC400: màu mùa Tết, chỉ cho vật phẩm, không dùng cho UI.

Đặc tả từng game

1 · Bứt tốc 10 giây

Mục	Nội dung
Ý tưởng	Bấm/chạm liên tục 10 giây — tốc độ như đường truyền FPT
Tính điểm	Số lần bấm hợp lệ. Chặn > 20 lần/giây (bot, auto-click)
Kết quả	Theo ngưỡng (≥ 80 lần = quà A) hoặc xếp hạng trong ngày
Tham số	Thời lượng · ngưỡng quà · số lượt/người/ngày · giới hạn lần/giây
Theme gợi ý	`orange`

Màn	Điện thoại (A)	Booth (B)
Chuẩn bị	"Chạm thật nhanh trong 10 giây" + nút Bắt đầu	Giống, chữ cỡ kiosk; nút arcade sáng đèn
Chơi	`.ds-tap` chiếm nửa dưới · số lần lớn `.ds-score` · `.ds-timer`	Số lần ở giữa màn · thanh thời gian · không cần nút trên màn
Kết quả	Số lần + hạng hôm nay + quà	Như ĐT + top 5 hôm nay

Rủi ro	Xử lý
Chạm đa điểm để gian lận	Chỉ đếm 1 điểm chạm; giới hạn lần/giây
Mỏi tay → bỏ ngang	Chỉ 10 giây, không cho tăng thời lượng
Máy yếu, giật	Không dùng hiệu ứng nặng khi đang chơi; confetti chỉ ở màn kết quả

2 · Chạm chớp nhoáng

Mục	Nội dung
Ý tưởng	Đo phản xạ — FPT phản hồi nhanh
Luật	5 vòng. Mỗi vòng màn đen (`--wait`) 1–4s ngẫu nhiên → chuyển lime (`--go`) → bấm ngay
Tính điểm	Trung bình thời gian phản xạ (ms) của các lần đúng; bấm sớm = phạt +300ms, hiện `--early`
Kết quả	Xếp hạng theo ms thấp nhất trong ngày
Tham số	Số vòng · khoảng chờ min/max · mức phạt · ngưỡng quà

Màn	Điện thoại / Booth
Chơi — chờ	Toàn màn đen "Đợi màu xanh…" — không có nút, cả màn là vùng chạm
Chơi — bấm	Toàn màn lime "CHẠM!"
Sau mỗi vòng	`--hit`: "248 ms" + chuỗi `.ds-bits` 5 vòng
Kết quả	Trung bình ms, lần nhanh nhất, số lần bấm sớm, hạng

Rủi ro	Xử lý
Người bị nhạy cảm ánh sáng	Không nhấp nháy liên tục; mỗi lần chuyển màu chỉ 1 lần; có cảnh báo ở hướng dẫn
Độ trễ màn hình khác nhau giữa máy	Xếp hạng tách theo kênh (booth riêng, điện thoại riêng)
Màu lime khó nhận với người mù màu	Kèm chữ "CHẠM!" + rung (điện thoại)

3 · FPT Signal Hunt — Săn sóng tốc độ

Mục	Nội dung
Ý tưởng	Dùng tay bắt biểu tượng sản phẩm FPT đang rơi
Vật phẩm	Wi-Fi (cam, +10) · Camera (xanh, +10) · FPT Play (lá, +10) · Vật cản (đen viền đỏ, −15)
Tính điểm	Tổng điểm trong 30–45s. Tốc độ rơi tăng mỗi 10s
Tham số	Thời lượng · tỉ lệ từng vật phẩm · tốc độ · điểm
Thiết bị	TV ≥ 55" · webcam 1080p · máy tính có GPU · khoảng trống 2×2 m

Màn	TV
Chờ	Số thứ tự đang chơi + QR đăng ký + top 5
Căn chỉnh	Hình người chơi từ webcam + `.ds-cam__zone` + `.ds-cam__checks` (Đủ sáng · Đúng khoảng cách · Thấy tay). Đủ 3 → tự đếm ngược
Chơi	Webcam làm nền mờ · vật phẩm rơi · vòng tay `.ds-cam__hand` · `.ds-floater` · thanh thời gian
Kết quả	Điểm + số vật phẩm theo loại (giới thiệu lại 3 sản phẩm) + quà

Rủi ro	Xử lý
Ánh sáng sự kiện thay đổi	Bước căn chỉnh bắt buộc; đèn bổ sung phía trước người chơi
Người đứng sau lọt khung	Chỉ nhận tay trong vùng; đánh dấu vùng đứng trên sàn
Máy quá tải	Đo FPS lúc khởi động; < 24 FPS → giảm số vật phẩm, hiện `.ds-ops` cho nhân sự

4 · Cáo Goalkeeper — Bắt trọn đam mê

Mục	Nội dung
Ý tưởng	Người chơi làm thủ môn Cáo, chặn 5 cú sút trên TV
Điều khiển	Điện thoại: 3 nút Trái/Giữa/Phải (`.ds-dpad`) hoặc nghiêng máy. Mặc định nút bấm — nghiêng là tuỳ chọn
Luật	Mỗi cú sút: cầu thủ chạy đà 2s → người chơi chọn trong cửa sổ 1,5s → khoá → bóng bay
Tính điểm	Số cú cản được / 5
Tham số	Số cú sút · thời gian cửa sổ chọn · tỉ lệ hướng sút
Theme gợi ý	`green` (sân cỏ, FPT Play)

Màn	TV	Điện thoại
Chờ	QR lớn + mã 4 số + "Quét để làm thủ môn"	Nhập mã / tự ghép qua QR → "Đã kết nối"
Chơi	Sân bóng, Cáo thủ môn, cầu thủ, `.ds-rounds` 5 cú	`.ds-dpad` toàn màn + gợi ý "Chọn hướng!" + rung khi bắt đầu cửa sổ
Mỗi cú	"CẢN PHÁ!" / "VÀO!"	Đồng bộ kết quả + `.ds-dpad--locked`
Kết quả	Tỷ lệ cản + top hôm nay	Quà

Rủi ro	Xử lý
Mạng sự kiện chập chờn → trễ	Kiểm tra độ trễ khi ghép; > 300ms hiện `.ds-ops`; nên có Wi-Fi riêng cho booth
Mất kết nối giữa lượt	Tạm dừng, cho kết nối lại 15s; quá hạn → lượt không tính, trả lại lượt
Người khác quét QR chen	Mã ghép dùng 1 lần, hết hạn sau 60s

5 · FPT Air Kick — Sút là bùng nổ

Mục	Nội dung
Ý tưởng	Sút bóng thật bằng động tác, không cần bóng
Luật	Xoay thân chọn góc (Trái/Giữa/Phải) → giữ 1s để khoá → vung chân để sút
Tính điểm	Vào lưới +100; góc chết +50; bị thủ môn bắt 0
Thiết bị	TV ≥ 65" · camera góc rộng · máy tính GPU · khoảng trống 3×3 m · sàn đánh dấu vị trí

Màn	TV
Căn chỉnh	Khung `.ds-cam` + bóng người `.ds-cam__body` + 3 điều kiện; hướng dẫn "Lùi lại 1 bước"
Chọn góc	3 vùng khung thành sáng theo hướng thân; vòng khoá 1s
Sút	"VUNG CHÂN!" lớn · hiệu ứng bóng bay theo hướng đã khoá
Kết quả	Điểm từng cú + tổng

Rủi ro	Xử lý
Nhận sai động tác	Có nút dự phòng cho nhân sự kích hoạt cú sút
Va chạm, ngã	Không có vật cứng trong 3 m; nhân sự đứng cạnh; cảnh báo ở hướng dẫn
Chưa ổn định	Thử nghiệm tại 1 điểm trước khi nhân rộng; đo tỉ lệ nhận đúng ≥ 90%

6 · Cáo đối đầu — Sút hay, bắt đỉnh

Mục	Nội dung
Ý tưởng	2 người đấu penalty bằng 2 điện thoại
Luật	3 hiệp. Mỗi hiệp: A sút – B bắt, rồi đổi vai. Cả hai chọn kín trong 5s → TV mở kết quả
Thắng	Nhiều bàn hơn sau 3 hiệp; hoà → sút luân lưu 1 lượt
Quà	Thắng: quà chính · Thua: quà động viên
Nhân vật	A = Cáo áo đỏ (`sut-do`, `thu-mon-do`) · B = Cáo áo xanh (`sut-xanh`, `thu-mon-xanh`) — màu áo giữ nguyên trên TV và điện thoại của từng người

Màn	TV	Điện thoại A / B
Phòng chờ	QR + 2 ô `.ds-slot` (áo đỏ / áo xanh), ô sáng khi có người	Tên + màu đội + "Sẵn sàng"
Chọn	Sân + `.ds-versus` tỷ số + `.ds-rounds` + `.ds-secret` "Áo đỏ đã chọn"	`.ds-dpad` + vai hiện tại ("Bạn SÚT" / "Bạn BẮT") + đếm 5s
Mở kết quả	Hoạt cảnh sút/bắt + "VÀO!" / "CẢN!"	Kết quả hiệp
Kết thúc	Người thắng, tỷ số chung cuộc	Thắng: quà chính · Thua: quà động viên

Rủi ro	Xử lý
Nhìn trộm màn hình đối thủ	Nút chọn không đổi màu đến khi khoá; chỉ hiện "Đã chọn"
Một người không chọn kịp	Hết 5s → chọn ngẫu nhiên, ghi chú "Tự động"
Mạng	Như game 4

7 · Cáo gom lộc

Mục	Nội dung
Ý tưởng	Cáo chạy 3 làn, gom lì xì, tránh chướng ngại — chiến dịch Tết
Điều khiển	Vuốt trái/phải đổi làn; chạm 2 bên màn cũng được (dễ cho người lớn tuổi)
Tính điểm	Lì xì +10 / lì xì vàng +50 / chạm chướng ngại −1 mạng (3 mạng)
Kết thúc	Hết giờ hoặc hết mạng → chốt điểm và quyền nhận quà
Quy mô	Hàng trăm người chơi đồng thời trên điện thoại; TV chỉ hiện bảng điểm

Màn	Điện thoại	TV (tuỳ chọn)
Chơi	3 làn `.ds-lanes` · Cáo `hung-loc` · `.ds-item--lixi` / `--bad` · HUD điểm, mạng, thời gian · `.ds-swipe-hint` 3s đầu	—
Kết quả	Điểm, số lì xì, quà	—
Bảng điểm	—	Top 10 + "đang chơi: 248 người" + QR tham gia + ticker người vừa trúng

Rủi ro	Xử lý
Nghẽn server lúc cao điểm	Chấm điểm phía máy + gửi kết quả có chữ ký; kiểm tra bất thường trên server
Gian lận điểm	Giới hạn điểm tối đa theo thời lượng; ghi lại chuỗi sự kiện để đối soát top

8 · Cáo bay bằng giọng nói

Mục	Nội dung
Ý tưởng	Nói/hát càng to Cáo bay càng cao
Điều khiển	Âm lượng micro → độ cao. Im → Cáo hạ dần
Luật	Vượt cổng chướng ngại để đến đích trong 30s
Tham số	Ngưỡng âm lượng tối thiểu (hiệu chỉnh theo tiếng ồn nền) · độ nhạy

Màn	Điện thoại
Xin quyền	`.ds-perm` micro: lý do, "Không ghi âm, không lưu giọng nói"
Hiệu chỉnh	"Giữ im 2 giây" → đo tiếng ồn nền; `.ds-meter--dark`
Chơi	Cáo + cổng + `.ds-meter` cạnh phải + thời gian
Kết quả	Quãng đường / về đích + quà

Rủi ro	Xử lý
Ồn sự kiện	Bước hiệu chỉnh bắt buộc; khuyến nghị chơi online/tại nhà hơn là tại booth
Người dùng từ chối quyền	Có chế độ thay thế: giữ nút để bay
iOS chặn micro trong webview / Zalo	Kiểm thử trên từng nền tảng trước khi ra mắt

9 · Cây lời chúc — Tết này mong gì?

Mục	Nội dung
Ý tưởng	Gửi điều ước lên cây trên TV — đồng thời là khảo sát nhu cầu
Form	Tên (hiển thị) · nhóm tuổi (chọn) · lời chúc ≤ 80 ký tự · chọn 1 chủ đề mong muốn (chip)
Chủ đề (chip)	Mạng nhanh hơn · Xem phim/bóng đá · An ninh nhà · Kết nối gia đình · Khác
Kiểm duyệt	Lọc từ cấm tự động → hàng chờ nhân sự duyệt → lên TV
Gợi ý sản phẩm	Theo chủ đề: Mạng nhanh → Internet Wi-Fi 7 · Phim → FPT Play · An ninh → FPT Camera

Màn	Điện thoại	TV
Gửi	Form + `.ds-counter` + chip chủ đề	—
Sau gửi	`.ds-mod-status` "Đang chờ duyệt" + gợi ý sản phẩm phù hợp + quà nhỏ	—
Hiển thị	—	Cây bit-dot; `.ds-wish` treo trên cành; lời chúc mới `.ds-wish--new` phóng to 5s; QR góc phải
Thống kê	—	Cụm `.ds-insight` "Mong muốn Tết này" (cập nhật mỗi 5 phút)

Rủi ro	Xử lý
Nội dung xấu	Không hiển thị tự động — luôn qua duyệt
Lộ thông tin cá nhân	TV chỉ hiện tên + nhóm tuổi, không hiện SĐT

10 · Photobooth — Khoảnh khắc kết nối

Mục	Nội dung
Ý tưởng	Ảnh lưu niệm có khung FPT — ảnh chính là quà
Luồng	Đăng ký 1 lần → chọn khung → nhận số thứ tự → nhân sự chụp → nhận ảnh qua link/Zalo → in tại chỗ (tuỳ chọn)
Khung	3–6 khung: cam (mặc định), xanh, lá; có logo FPT Telecom âm bản + corner shape bit-dot + hashtag
Tham số	Danh sách khung · tỉ lệ (3:4 in, 9:16 story) · cho phép in hay không

Màn	Điện thoại	TV / máy nhân sự
Chọn khung	`.ds-frames` lưới 3 cột	—
Chờ	`.ds-queue` số thứ tự + "Còn 3 nhóm trước bạn"	Danh sách hàng chờ, gọi số
Chụp	—	Xem trước có khung, đếm 3-2-1, chụp 3 tấm, chọn 1
Nhận ảnh	`.ds-photo` + Tải về / Chia sẻ Zalo / Mã in	—

Rủi ro	Xử lý
Logo trong khung sai quy chuẩn	Khung xuất từ file thiết kế đã duyệt; logo ≥ 150px trên ảnh xuất
Ảnh có người khác	Chỉ gửi ảnh cho SĐT đã đăng ký; xoá ảnh trên máy sau sự kiện

Thông số chung cần chốt cho mỗi chiến dịch

Tham số	Ví dụ
Lượt / người / ngày	3
Cách nhận thêm lượt	Chia sẻ Zalo +1, check-in booth +1
Kiểu trao quà	Theo ngưỡng điểm · Theo xếp hạng · Quay ngẫu nhiên sau khi chơi
Kho quà & tỉ lệ	Bảng riêng, có giới hạn theo ngày/giờ
Theme	`orange` · `blue` · `green`
Kênh bật	Kiosk · TV · Web · App · Zalo
Giờ chạy	8:00–21:00
Tự reset kiosk/TV	60s không thao tác

Lịch sử thay đổi

Bản	Ngày	Người sửa	Nội dung
1.0	2026-11-11	Designer	Chuyển từ Markdown sang HTML