Mace Duel Mobile: bản thiết kế game đối kháng 3D cho web di động

Một bản mẫu tập trung vào trải nghiệm đấu 1v1 trên trình duyệt

Mace Duel Mobile được định hướng như một game đối kháng 3D chạy trực tiếp trên trình duyệt điện thoại lẫn máy tính. Trọng tâm không phải là đồ họa quá nặng, mà là cảm giác điều khiển nhanh, trận đấu ngắn và kết nối hai người chơi ở hai thiết bị khác nhau qua phòng riêng.

Bản thiết kế trong ngữ cảnh nguồn sử dụng TypeScript + Vite + Three.js ở phía client, còn phía server là Node.js + TypeScript + ws. Gameplay gồm đánh chùy ở cự ly gần, đòn đánh mạnh khi rơi từ trên cao, điện tích gió để hất tung đối thủ, tính điểm theo hiệp và tái đấu.

Vì sao máy chủ phải là bên quyết định trận đấu?

Một nguyên tắc quan trọng của kiến trúc này là client chỉ gửi đầu vào — hướng di chuyển, góc nhìn và lệnh tấn công. Client không được tự gửi máu, sát thương hay tọa độ được xem là sự thật.

Máy chủ chạy mô phỏng ở tần số 30 Hz để xử lý:

• di chuyển, trọng lực, nhảy và giới hạn đấu trường;
• phạm vi cùng góc đánh của chùy;
• sát thương đòn thường và đòn rơi;
• đường bay, va chạm và lực nổ của điện tích gió;
• máu, điểm hiệp, trạng thái thắng trận và tái đấu.

Cách làm này giúp kết quả đồng nhất hơn giữa hai người chơi và giảm khả năng một client tự khai báo sát thương hoặc vị trí không hợp lệ. Bản mẫu cũng dùng số thứ tự cho input, giới hạn tốc độ gửi tin, kiểm tra cấu trúc thông điệp và heartbeat để quản lý kết nối.

Điều khiển cảm ứng: phải dùng được nhiều ngón cùng lúc

Trên điện thoại, bố cục điều khiển được đề xuất gồm joystick bên trái để di chuyển; vùng vuốt bên phải để đổi hướng nhìn; cùng các nút nhảy, chạy, đánh chùy và điện tích gió. Chế độ ngang màn hình phù hợp hơn cho kiểu giao diện này.

Đây là tình huống phù hợp với Pointer Events hoặc cơ chế nhập liệu đa điểm: một ngón có thể giữ joystick trong khi ngón khác xoay camera hoặc kích hoạt kỹ năng. Tài liệu MDN lưu ý một pointer đại diện cho một ngón trên màn hình cảm ứng, đồng thời nhiều pointer có thể được quản lý để thực hiện thao tác đồng thời. 1

Máy tính vẫn có thể dùng bàn phím và chuột, nhờ vậy cùng một client phục vụ được cả thử nghiệm desktop lẫn người chơi mobile.

Nhịp trận đấu và các cơ chế chính

Mỗi trận gồm nhiều hiệp, với thời gian đếm ngược trước khi bắt đầu và mục tiêu thắng số hiệp quy định. Người chơi có máu, trạng thái bảo vệ ngắn lúc hồi sinh và các điện tích gió được nạp lại theo thời gian.

Cơ chế đánh chùy kiểm tra khoảng cách, hướng nhìn và góc đánh. Khi người chơi đang rơi đủ xa, đòn đánh có thể chuyển thành đòn mạnh: sát thương và lực hất tăng theo độ rơi, nhưng vẫn bị giới hạn để tránh mất cân bằng. Điện tích gió là đạn bay có vùng nổ, tạo lực đẩy ngang và lực nâng để mở ra cơ hội cho đòn rơi.

Tối ưu hiển thị cho thiết bị di động

Với game 3D chạy trên trình duyệt điện thoại, số lệnh vẽ và chi phí bóng đổ là những điểm cần theo dõi. InstancedMesh của Three.js là dạng mesh hỗ trợ instanced rendering, hữu ích khi cần hiển thị số lượng lớn đối tượng cùng hình học và vật liệu. 2

Bóng đổ cũng nên là tùy chọn đồ họa thay vì mặc định bắt buộc. Trong Three.js, shadowMap.enabled mặc định là false; tài liệu cũng cho biết có thể tắt cập nhật bóng tự động nếu không cần ánh sáng hoặc bóng động. 4 Điều này giúp người chơi trên máy yếu có thêm dư địa hiệu năng.

Lưu ý khi đưa game lên Internet

Khi triển khai công khai, kết nối WebSocket nên đi cùng HTTPS/WSS. Nếu dùng Nginx làm reverse proxy, cấu hình cần chuyển tiếp đúng các header nâng cấp kết nối WebSocket và có cơ chế timeout hoặc heartbeat hợp lý để tránh các phiên kết nối im lặng bị ngắt.

Về vận hành, bản thiết kế chọn Node.js 24 LTS cho môi trường production thay vì nhánh Current, đồng thời khuyến nghị tạo lockfile bằng npm install, lưu nó trong Git và dùng npm ci cho quy trình build hoặc deploy có thể tái lập.

Giá trị của khung triển khai này

Điểm đáng chú ý nhất không nằm ở một đòn đánh hay hiệu ứng riêng lẻ, mà ở cách các phần được nối với nhau: điều khiển đa chạm, mô phỏng server-authoritative, giao thức có kiểm tra dữ liệu, vòng đời phòng đấu và các lựa chọn tối ưu render cho mobile.

Đó là một nền tảng phù hợp để tiếp tục phát triển thành game web 1v1 hoàn chỉnh — bổ sung nhân vật, bản đồ, âm thanh, matchmaking, tài khoản hoặc xếp hạng — mà vẫn giữ phần cốt lõi của trận đấu ở phía máy chủ.