Bỏ qua tới nội dung

← Bài viết

Wizard Chess 3D: bàn cờ vua và cờ tướng 3D chạy thẳng trên trình duyệt

Trò chơi cờ vua chuẩn FIDE và cờ tướng 3D viết bằng Three.js và Cloudflare Durable Objects, có 8 bàn đấu, hiệu ứng quân cờ vỡ vụn khi ăn quân và phòng chơi trực tuyến.

Wizard Chess 3D: bàn cờ vua và cờ tướng 3D chạy thẳng trên trình duyệt
  • Wizard Chess 3D
  • Three.js
  • WebGL
  • Cloudflare
  • Game 3D

Mỗi lần xem lại cảnh bàn cờ phù thủy trong tập đầu Harry Potter, mình đều tự hỏi vì sao trên web lại hiếm có một bàn cờ 3D nào giữ được cảm giác nặng tay của những quân cờ đá mà vẫn mở ra chơi ngay trong vài giây. Phần lớn trò chơi cờ trên trình duyệt dùng mặt bàn phẳng 2D cho nhẹ, còn những bản 3D cầu kỳ thì thường bắt tải bộ cài hàng trăm megabyte.

Mình dựng Wizard Chess 3D để nối hai thái cực đó lại. Bạn chỉ cần mở đường dẫn trên điện thoại hoặc máy tính là bước thẳng vào một đại sảnh 3D có ánh sáng nến, bóng đổ thời gian thực, quân cờ điêu khắc nổi và hiệu ứng vỡ vụn mỗi khi ăn quân.

Hai bộ luật Cờ vua FIDE và Cờ tướng 3D trong cùng một không gian

Ban đầu dự án chỉ xoay quanh cờ vua quốc tế. Khi dựng xong hệ thống khung xương và vật liệu cho các quân Vua, Hậu, Xe, Tượng, Mã, Tốt, mình nhận ra rất nhiều bạn bè quanh mình thích đánh cờ tướng nhưng chưa từng trải nghiệm cảm giác nhìn quân Pháo lộn qua ngòi hay quân Mã bị cản chân trong không gian ba chiều.

Chế độ Cờ tướng 3D với tượng Tướng, Sĩ, Tượng, Xe, Pháo, Mã và Tốt điêu khắc ba chiều

Thay vì dùng những quân cờ tròn khắc chữ Hán như bàn gỗ truyền thống, mình tạo hình riêng từng quân Tướng, Sĩ, Tượng, Xe, Pháo, Mã và Tốt thành các bức tượng 3D cho hai phe Đỏ và Đen trên bàn 9x10 có sông Sở Hà - Hán Giới.

Toàn bộ luật cờ được tách thành hai bộ máy độc lập:

  • Cờ vua quốc tế (FIDE) xử lý đầy đủ nước nhập thành, bắt tốt qua đường (en passant), phong cấp, chiếu, chiếu hết và các trường hợp hòa cờ (bất biến 3 lần, luật 50 nước, hết nước đi).
  • Cờ tướng (Xiangqi) do mình tự viết bộ kiểm tra luật riêng (xiangqiEngine.ts), tính chính xác các thế cản chân Mã, tắc mắt Tượng, Pháo ăn cách một ngòi, Tốt qua sông đi ngang và luật lộ mặt Tướng đối diện trên cùng một cột.

Cảm giác va chạm khi quân cờ vỡ vụn và góc quay kết liễu

Điểm làm nên chất riêng của một ván cờ 3D nằm ở khoảnh khắc hai quân cờ chạm trán. Khi bạn điều một quân tiến lên ô đối phương, quân tấn công lao tới tung đòn, còn quân bị bắt sẽ vỡ tung thành các mảnh đá văng ra mặt bàn theo lực va chạm trước khi tan biến.

Góc máy cận cảnh khi chiếu hết (Checkmate): quân Vua đen ngã đổ và vỡ vụn trên bàn cờ 3D

Ở nước đi chiếu hết (Checkmate), máy quay tự động thu hẹp trường nhìn, làm mờ hậu cảnh (Depth of Field) và quay chậm cảnh quân Vua đối phương nghiêng đổ xuống mặt bàn đá. Nếu muốn xem lại khoảnh khắc dứt điểm ở góc máy khác, bạn có thể bấm nút Replay King Fall ngay trên bảng kết quả.

Toàn bộ tiếng bước chân đá trượt trên mặt bàn, tiếng kiếm chạm khi ăn quân, tiếng chuông báo chiếu và tiếng sập đổ lúc kết thúc ván đều được tổng hợp trực tiếp bằng Web Audio API ngay trên trình duyệt, không cần tải thêm tệp âm thanh rời.

Tám đấu trường 3D và hệ thống chiếu sáng thời gian thực

Để người chơi không bị nhàm mắt khi ngồi đánh nhiều ván liền, mình thiết kế 8 bối cảnh đấu trường (Arena) với bảng màu, kiến trúc cột đá và nguồn sáng hoàn toàn khác nhau:

  • Đại Sảnh Phù Thủy (Hogwarts Sanctum) với cột đá Gothic và ánh đuốc vàng ấm.
  • Điện Ngọc Bích (Jade Dynasty) mang tông xanh ngọc và gỗ trầm Á Đông, rất hợp khi chuyển sang chế độ Cờ tướng.
  • Sảnh Bắc Âu (Viking Hall), Lâu Đài Mạc Phủ (Shogun Keep), Thiên Cung (Celestial), Trạm Vũ Trụ (Cyber Grid), Đỉnh Olympus và Thành Cổ Necropolis.

Sảnh chọn 8 bàn đấu 3D từ Đại Sảnh Phù Thủy, Điện Ngọc Bích đến Trạm Vũ Trụ và Đấu Trường Cổ Đại

Mỗi bàn đấu đều hỗ trợ xoay camera tự do 360 độ, khóa góc nhìn cố định để tránh trượt tay khi thao tác trên màn hình cảm ứng hoặc chuyển nhanh sang góc nhìn từ đỉnh xuống khi cần tính các biến phức tạp.

Đấu với AI trong Web Worker hoặc mở phòng trực tuyến qua Durable Objects

Trò chơi hỗ trợ ba chế độ đối kháng:

  1. Đấu với máy (AI) ở nhiều mức độ khó. Bộ máy tính nước đi sử dụng thuật toán tìm kiếm Minimax kết hợp cắt tỉa Alpha-Beta, bảng băm Zobrist và tìm kiếm sâu dần (Iterative Deepening). Toàn bộ quá trình tính toán chạy trong một Web Worker tách biệt để khung hình 3D ở luồng chính luôn mượt mà, không bị khựng khi máy đang suy nghĩ.
  2. Chơi 2 người trên cùng thiết bị với chế độ tự động xoay góc nhìn hoặc giữ nguyên bàn cờ.
  3. Phòng đấu trực tuyến (Online Room) chạy trên hạ tầng Cloudflare Workers và Durable Objects. Khi bạn tạo phòng và gửi mã phòng cho bạn bè, một thực thể RoomDurableObject trên mạng biên Cloudflare sẽ giữ kết nối WebSocket hai chiều, đồng bộ đồng hồ thi đấu và kiểm tra tính hợp lệ của từng nước đi ngay trên máy chủ để chống gian lận.

Trải nghiệm trực tiếp

Bạn có thể vào đánh thử một ván Cờ vua hoặc Cờ tướng 3D ngay trên trình duyệt mà không cần đăng ký tài khoản tại chess.tqd.me.

Esc