Case Studies8 min read16 tháng 7, 2026

Decathlon « Deal-cathlon AR Hunt »: Cuộc săn kho báu WebAR tại cửa hàng

Cách Code Crush biến brief gamification của Decathlon Việt Nam thành một cuộc săn kho báu WebAR thực thụ — mini-game hứng deal, hàng rào GPS 200m, và cuộc săn AR bằng camera + con quay hồi chuyển kéo người chơi online tới cửa hàng. Cách build, công nghệ và những giới hạn thành thật.

Code Crush Team

Gamification Agency

Decathlon Deal-cathlon AR Hunt — cuộc săn kho báu WebAR camera trực tiếp trong cửa hàng Decathlon

Về dự án

The Deal-cathlon AR Hunt là concept gamification đầu tiên trong hai concept Code Crush dựng thử cho chiến dịch kỷ niệm 50 năm của Decathlon Việt Nam. Đây là cuộc săn kho báu online-to-offline: người chơi vượt qua vòng loại ngay trên điện thoại, rồi phải trực tiếp đến một trong năm cửa hàng Decathlon trong "Grand Event Hour" (Giờ G) để săn và nhận quà thật.

Mọi thứ dưới đây là một web app chơi được ngay — dựng bằng Next.js, không cần cài app, deploy lên Google Cloud Run. Nó chạy trọn hành trình: mini-game hứng → access pass → chọn cửa hàng → check-in GPS → săn AR bằng camera → quay thưởng → đổi quà tại cửa hàng.

Màn hình mở đầu. Người chơi vào trong khung giờ pre-launch và được đẩy thẳng vào mini-game vòng loại.
Màn hình mở đầu. Người chơi vào trong khung giờ pre-launch và được đẩy thẳng vào mini-game vòng loại.

Brief từ khách hàng

Yêu cầu của Decathlon (trong deck pitch) rất thẳng:

Kết nối tệp khán giả online với điểm bán. Tạo lượng khách thật vào cửa hàng, thu data CRM, và làm cho nó dễ chia sẻ — không chỉ là một vòng quay may mắn nữa.

Cơ chế họ vạch ra là hành trình năm bước:

1Khám phá — vào website trong khung giờ pre-launch.
2Thử thách nhanh tay — mini-game hứng, mỗi ngày một lượt, mở khóa Access Pass.
3Chọn điểm săn — khóa pass vào 1 trong 5 cửa hàng.
4Check-in giờ săn — có mặt đúng khung giờ, chứng minh bạn đang ở đó, kích hoạt quay thưởng.
5Đổi quà — đưa mã cho nhân viên, nhận quà tại chỗ, cập nhật CRM.

Phần khó nhất là bước 4. "Chứng minh bạn đang ở đó" là thứ tách một công cụ kéo khách thật khỏi một cái voucher ai cũng lấy được từ ghế sofa.

Code Crush trả lời thế nào

Chúng tôi dựng cả hành trình thành một state machine nhanh, mỗi bước là một khoảnh khắc riêng, đậm chất thương hiệu.

1. Mini-game hứng. Các ô deal rơi xuống; chạm để hứng. Vòng 35 giây, tăng tốc khi hứng đủ 10, và cần ngưỡng 15 điểm để có pass. Giới hạn mỗi ngày một lượt là thứ giữ cho pass khan hiếm.

"Grab It Before It's Gone" — game hứng vòng loại. Đạt 15+ trong 35 giây để giành Access Pass.
"Grab It Before It's Gone" — game hứng vòng loại. Đạt 15+ trong 35 giây để giành Access Pass.

2. Access Pass. Thắng là có ngay tấm pass mã vạch kèm đồng hồ đếm ngược tới khung giờ sự kiện của cửa hàng. Nó lưu trên thiết bị, nên người chơi có thể đóng tab rồi quay lại — pass (và đồng hồ đếm ngược) vẫn còn đó.

Access Pass — lưu cục bộ, chơi tiếp được, và khóa vào một cửa hàng duy nhất cho sự kiện.
Access Pass — lưu cục bộ, chơi tiếp được, và khóa vào một cửa hàng duy nhất cho sự kiện.

3. Chọn cửa hàng. Năm cửa hàng Decathlon Việt Nam thật, mỗi nơi có diện tích sàn và khung Giờ G chung (17h thứ Năm).

Chọn cửa hàng săn. Pass sẽ khóa vào cửa hàng bạn chọn.
Chọn cửa hàng săn. Pass sẽ khóa vào cửa hàng bạn chọn.

4. Check-in — hàng rào GPS 200m thật. Đây là câu trả lời của chúng tôi cho "chứng minh bạn đang ở đó". Trước khi mở cuộc săn, app xin GPS và kiểm tra bạn có nằm trong 200 mét của cửa hàng đã chọn không. Nếu quá xa, nó nói chính xác bạn còn cách bao nhiêu.

5. Cuộc săn AR. Trong bán kính đó, camera sau của điện thoại bật lên và các drop được giấu trong không gian 3D quanh bạn. Bạn xoay người để tìm, theo một radar nóng dần khi tới gần, rồi chạm để thu.

Cuộc săn AR camera trực tiếp. Các drop neo trong không gian 3D quanh người chơi; radar chỉ về drop gần nhất. Xoay điện thoại để tìm, chạm để hứng.
Cuộc săn AR camera trực tiếp. Các drop neo trong không gian 3D quanh người chơi; radar chỉ về drop gần nhất. Xoay điện thoại để tìm, chạm để hứng.

6. Quay thưởng & đổi quà. Tóm được drop lớn sẽ mở một lượt quay có trọng số từ pool cố định đúng 50 phần quà mỗi cửa hàng ("50 Đặc Quyền Tuổi 50"), rồi tạo ra một vé đổi quà người chơi đưa cho nhân viên — và có thể lưu về điện thoại dưới dạng ảnh.

Lượt quay thưởng. Pool cố định 50 phần quà mỗi cửa hàng, trọng số theo số lượng còn lại của từng loại.
Lượt quay thưởng. Pool cố định 50 phần quà mỗi cửa hàng, trọng số theo số lượng còn lại của từng loại.
Vé đổi quà — một mã vạch cộng nút "lưu về điện thoại" render trên canvas.
Vé đổi quà — một mã vạch cộng nút "lưu về điện thoại" render trên canvas.

Chúng tôi code thế nào

Stack: Next.js 15 (App Router), một state machine phía client điều khiển mọi màn hình, deploy dạng container standalone lên Google Cloud Run (region Singapore, scale-to-zero).
Game hứng: vòng lặp `requestAnimationFrame` sinh và thả các ô; hứng là một cú chạm với vùng chạm rộng có chủ đích để mục tiêu di chuyển nhanh vẫn công bằng trên màn cảm ứng.
Access Pass: lưu vào `localStorage` kèm đồng hồ đếm ngược trực tiếp, để sống sót qua refresh và giữ khóa vào cửa hàng.
Geofence: `navigator.geolocation` + khoảng cách haversine tới tọa độ cửa hàng, chặn ở 200m, kèm lối "xem thử vẫn được" để demo khám phá được khi ở xa cửa hàng.
Phần AR: điểm nhấn chính. Feed camera sau nằm sau một lớp WebGL Three.js trong suốt, mà camera của nó được điều khiển bằng `DeviceOrientationEvent` của thiết bị — xoay điện thoại thật sẽ nhìn quanh cảnh. Các drop là billboard 3D đặt xa trên một mặt cầu và lần lượt hiện ra từng cái một; một cú chạm raycast vào drop đang active. Khi không có camera hay cảm biến chuyển động (vd. desktop), nó lùi về bản demo kéo-để-nhìn để link không bao giờ hiện màn hình lỗi.
Vé đổi quà: vẽ lên `` HTML và export ra PNG để người chơi lưu.
Responsive: khung điện thoại mockup trên desktop để pitch, tràn viền trên điện thoại thật.

Những giới hạn (và đánh đổi thành thật)

Nói rõ về giới hạn cũng là một phần của công việc:

WebAR là nhìn quanh, không phải world-tracking. Trình duyệt không chạy được detect mặt phẳng cỡ ARKit, nên các drop neo theo hướng của người chơi (qua con quay hồi chuyển), không ghim vào một kệ hàng cụ thể. Nó "đọc" như AR và không cần app — cái giá cho độ phủ đó là không có neo không gian thật.
GPS đơn lẻ có thể bị giả mạo. Hàng rào 200m là một cổng lọc mạnh, nhưng với sự kiện có quà thật nó nên đi kèm quét QR tại cửa hàng mà brief đã nêu — QR là bằng chứng "bạn thật sự có mặt" không giả được; GPS là bộ lọc đầu thân thiện.
iOS cần một cú chạm để cấp camera + chuyển động. Cả hai quyền phải xuất phát từ thao tác của người dùng, nên cuộc săn luôn bắt đầu sau nút "Enable camera AR" rõ ràng.
Vòng lặp game web tạm dừng khi ở nền. Như mọi game `requestAnimationFrame`, vòng thả deal ngủ khi tab bị đưa xuống nền — đây là hành vi mong đợi, không phải lỗi.

Vì sao nó hiệu quả cho Decathlon

Điểm cốt lõi là bước chân tới cửa hàng. Vượt vòng loại online thì vui, nhưng pass vô giá trị cho tới khi bạn đứng trong Decathlon vào Giờ G — và cổng GPS cộng cuộc săn camera biến "có mặt ở đó" thành trò chơi thật sự. Đó là lượng khách đo được, data first-party lúc đổi quà, và một khoảnh khắc dễ chia sẻ, tất cả từ một cái link.

Đây là một trong hai concept của pitch. Người anh em của nó — một game AR filter khuôn mặt mang tính xã hội, dễ chia sẻ — được viết trong Decathlon « Deal Frenzy / Cơn Lốc Deal »: Game WebAR filter khuôn mặt dễ chia sẻ.

Prototype do Code Crush thiết kế và phát triển như một concept cho Decathlon Việt Nam. Dữ liệu cửa hàng, quà và thời gian chỉ mang tính minh họa.

Thẻ

case studyDecathlonWebARAR treasure huntgeofencingThree.jsNext.jsonline to offlineVietnam
Bản tin miễn phí

Nhận thông tin chuyên sâu về gamification gửi hằng tuần

Tham gia cùng các quản lý thương hiệu và marketer để nhận những nội dung hay nhất của chúng tôi về game thương hiệu, chiến lược tương tác và tiếp thị tương tác — không spam, hủy đăng ký bất cứ lúc nào.

Không spam. Hủy đăng ký bất cứ lúc nào. Chúng tôi tôn trọng hộp thư của bạn.

Hãy cùng tạo ra điều mà khán giả của bạn sẽ yêu thích

Từ game thương hiệu đến trải nghiệm 3D nhập vai — chúng tôi thổi hồn vào sự tương tác.