Case Studies5 min readAugust 1, 2026

Pickleball Breaker cho Sportkation: Biến Resort Pickleball Thành Game Arcade Trên Trình Duyệt

Sportkation muốn đưa resort pickleball ở đồng bằng sông Cửu Long vào túi của mọi người. Đây là cách Code Crush thiết kế và xây dựng Pickleball Breaker — game arcade WebGL miễn phí với hai sân, sáu power-up và bảng xếp hạng thế giới trực tiếp, chạy mượt mà cả trên iPhone.

Code Crush Team

Gamification Agency

Pickleball Breaker — sân Mekong Night giữa trận rally với hệ số combo, do Code Crush xây dựng cho Sportkation

Dự án

Pickleball Breaker là game arcade đầu tiên được xây dựng xoay quanh pickleball — và bạn có thể chơi ngay tại pickleball.sportkation.com. Chúng tôi thiết kế và phát triển trò chơi này cho Sportkation, khu nghỉ dưỡng pickleball ở đồng bằng sông Cửu Long, Việt Nam, để đưa sân chơi của họ vào túi của mọi người.

Concept: game rally kiểu Breakout — lốp bóng qua lưới, phá hết mục tiêu bên kia sân và giữ chuỗi rally khi nhịp độ ngày càng nhanh. Game chạy hoàn toàn trên trình duyệt — không app store, không tải về, không đăng ký — trên điện thoại, máy tính bảng hay laptop. Một chạm là bạn đã vào sân.

Màn hình chính: hai sân, sáu power-up, top 10 thế giới, và một nút START MATCH thật to.
Màn hình chính: hai sân, sáu power-up, top 10 thế giới, và một nút START MATCH thật to.

Yêu cầu

Sứ mệnh của Sportkation là phát triển pickleball tại Việt Nam — nhưng không phải ai cũng có thể lái xe ra đồng bằng sông Cửu Long vào một tối thứ Ba. Họ đề ra:

Một trò chơi mang đúng chất nơi của họ — hàng cọ, đèn pha, những đêm miền Tây — mà ai cũng chơi được ngay từ một đường link, đủ cạnh tranh để quay lại, và chạy đẹp trên những chiếc điện thoại mà mọi người thực sự sở hữu.

Ba ràng buộc cứng theo sau: không cài đặt (mỗi cú click vào app store làm mất một nửa khán giả), mobile-first (khán giả của họ dùng điện thoại, và Safari iOS sẽ giết các trang quá nặng), và bảng xếp hạng thật (danh dự chính là vòng lặp giữ chân).

Chúng tôi đã xây dựng như thế nào

3D thời gian thực, không cài đặt

Toàn bộ game được render trực tiếp bằng WebGL (Three.js) — sân, vợt, khán đài, tất cả. Đó là lý do game chạy mượt như app native nhưng lan truyền như một đường link trong tin nhắn — cùng cách tiếp cận trong các chiến dịch thương hiệu của chúng tôi.

Bản sao số của khu nghỉ dưỡng

Game có hai sân. Stadium là đấu trường kinh điển dưới ánh đèn. Mekong Night là lá thư tình gửi khu nghỉ dưỡng: sân rực đèn pha giữa hàng cọ, mái sala tranh và biệt thự ven sông — các mô hình 3D riêng, được tạo và tinh chỉnh dành riêng cho dự án này, bố trí theo đúng không khí buổi tối của khu nghỉ dưỡng thật.

Mekong Night giữa trận rally — hệ số combo đang chạy, đèn pha bật sáng, hàng cọ đung đưa.
Mekong Night giữa trận rally — hệ số combo đang chạy, đèn pha bật sáng, hàng cọ đung đưa.

Cảm giác chơi chính là trò chơi

Một game rally sống hay chết nằm ở cảm giác của cú đánh. Chúng tôi tinh chỉnh "juice" theo từng mili-giây: rung màn hình khi smash, ánh chớp khi mục tiêu nổ, hệ số nhân rally lên tới ×5, màn đếm ngược 3-2-1 nghẹt thở trước mỗi cú giao bóng, và sáu power-up (Defensive Wall, Multiball, Smash, Heavy Ball, Racket XL, Power Shot) rơi ra từ các mục tiêu bị phá và kết hợp thành những combo phá kỷ lục.

Một trận rally tại Stadium — mục tiêu nổ tung, hệ số nhân leo dần.
Một trận rally tại Stadium — mục tiêu nổ tung, hệ số nhân leo dần.

Hiệu năng là một tính năng

Đây là phần không ai chụp màn hình được. Safari iOS áp một trần bộ nhớ GPU cứng — vượt qua là trình duyệt giết tab ngay lập tức. Bản resort đầu tiên của chúng tôi render 5,5 triệu tam giác (cọ, sala và biệt thự là các mô hình dày đặc, được đặt hàng chục lần), với bóng đổ mềm và framebuffer độ phân giải đầy đủ. Chạy tuyệt trên desktop — và crash iPhone ngay khi mở.

Vì vậy chúng tôi kỹ thuật hóa lại ngân sách:

Giảm lưới (mesh decimation): ba mô hình nặng giảm từ ~500.000 tam giác mỗi cái xuống ~95.000 — từ 5,5 triệu xuống 1,2 triệu tổng cộng, và từ 47 MB tải về còn 15 MB — mà không thấy khác biệt ở khoảng cách chơi.
Mức chất lượng theo thiết bị: thiết bị cảm ứng có pixel ratio giới hạn, lọc bóng đổ nhẹ hơn và shadow map nhỏ hơn, trong khi desktop giữ nguyên chất lượng đầy đủ.
UI chuẩn cảm ứng: overlay cuộn mượt trên màn hình nhỏ, nút đủ to cho ngón tay và căn giữa theo thị giác, vợt đi theo thao tác kéo ở bất cứ đâu trên phần sân của bạn.

Kết quả: cùng một game chạy mượt mà trên iPhone, không chỉ trên PC gaming.

Chế độ dọc trên điện thoại — sân tự đổi khung hình để chơi bằng một ngón cái.
Chế độ dọc trên điện thoại — sân tự đổi khung hình để chơi bằng một ngón cái.

Bảng xếp hạng với danh dự thật

Điểm cao sẽ ý nghĩa hơn khi được công nhận. Người chơi có thể đăng nhập bằng Google (trao đổi token phi trạng thái — không cookie, không tài khoản phải quản lý), và điểm cao nhất tự động được lưu lên bảng xếp hạng thế giới. Top 10 hiển thị ngay trên màn hình game, và bảng đầy đủ nằm tại sportkation.com/game/leaderboard — một trang chúng tôi thiết kế theo đúng chất neon arcade của game, đến từng font chữ và tấm panel kính.

Backend là hạ tầng production thật: API điểm số trên website chính, game là một dịch vụ cloud riêng, và trang xếp hạng được render phía server mỗi lượt truy cập.

Bảng xếp hạng thế giới, thiết kế đồng bộ với game.
Bảng xếp hạng thế giới, thiết kế đồng bộ với game.

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

Trò chơi là một điểm chạm thương hiệu không tốn chi phí phân phối: một trận rally sáu mươi giây trên xe buýt, một giải đấu giờ nghỉ trưa giữa các đồng nghiệp, trải nghiệm pickleball đầu tiên cho người chưa từng cầm vợt. Mỗi lượt chia sẻ là một lời mời đến khu nghỉ dưỡng — và mỗi điểm trên bảng xếp hạng là một lý do để quay lại vào ngày mai.

Game đang chạy, miễn phí, và chờ những kẻ thách đấu: chơi Pickleball Breaker — rồi đọc câu chuyện phía Sportkation trên blog Sportkation.

Thiết kế và xây dựng bởi Code Crush cho Sportkation — gameplay, đạo diễn hình ảnh 3D, kỹ thuật hiệu năng mobile, backend bảng xếp hạng và triển khai cloud. Sân mới và các giải đấu theo mùa đang nằm trong lộ trình.

Tagged with

case studySportkationpickleballThree.jsWebGLbrowser gamearcade gameleaderboardmobile optimizationVietnam
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.

Let's Build Something Your Audience Will Love

From branded games to immersive 3D experiences — we bring engagement to life.