Giới thiệu dự án

Thị trường trò chơi trực tuyến (Online Gaming) toàn cầu đang chứng kiến sự tăng trưởng vượt bậc với tốc độ tăng trưởng kép hàng năm (CAGR) đạt xấp xỉ 9.2% giai đoạn 2023–2028. Trong phân khúc game trí tuệ truyền thống (Board Games), Cờ Tướng (Xiangqi) sở hữu cộng đồng người chơi đông đảo tại khu vực Á Đông. Tuy nhiên, phần lớn các nền tảng trực tuyến hiện nay hoặc phụ thuộc vào ứng dụng cài đặt phức tạp, hoặc sở hữu giao diện người dùng (UI) lỗi thời, thiếu khả năng đồng bộ trạng thái thời gian thực mượt mà trên nền tảng web hiện đại.

Đồ án "Phát triển trò chơi Cờ Tướng trực tuyến" do sinh viên Nguyễn Bảo Duy (MSSV: 19520488) thực hiện dưới sự hướng dẫn khoa học của TS. Huỳnh Minh Đức tại Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM đã giải quyết triệt để bài toán xây dựng một hệ thống Web Game Cờ Tướng thời gian thực với độ trễ thấp, kiến trúc module hóa và khả năng mở rộng cao.

+-----------------------------------------------------------------------+
|                           HỆ THỐNG CỜ TƯỚNG                           |
+-----------------------------------+-----------------------------------+
|             Front-End             |             Back-End              |
|   ReactJS 18.2 + TypeScript 5.0   |    Spring Boot 3.2 (Java 17 LTS)  |
|         (Axios, CSS Modules)      |        (REST API, Security)       |
+-----------------------------------+-----------------------------------+
                                    |
                                    v
                     +-----------------------------+
                     |       MongoDB Database      |
                     |  (Player, Lobby, Match...)  |
                     +-----------------------------+

Mục tiêu dự án

  1. Xây dựng Game Engine Cờ Tướng chuẩn hóa: Số hóa bàn cờ $9 \times 10$, hiện thực hóa toàn bộ tập luật di chuyển phức tạp (Mã cản, Tượng không qua sông, Lộ mặt tướng, Chiếu tướng, v.v.).
  2. Hệ thống sảnh chờ (Lobbies) linh hoạt: Cho phép người chơi tạo phòng công khai (Public Lobby), phòng riêng tư (Private Lobby với ID), cấu hình thời gian mỗi nước đi (minPerTurn) và tổng thời gian (totalMin).
  3. Quản lý trận đấu và Replay Engine: Lưu trữ lịch sử nước đi dạng mảng chuỗi (moves: Array<String>) cho phép tua lại toàn bộ trận đấu (See replay) với độ phức tạp không gian tối ưu.
  4. Bảo mật và xếp hạng (Leaderboard): Xác thực đa yếu tố qua Email (VerifyEmail), bảo vệ phiên với JWT/Refresh Token, và tính toán điểm xếp hạng (rankingPoint) minh bạch.

Phương pháp tiếp cận và phạm vi

  • Kiến trúc Decoupled Client-Server: Tách biệt hoàn toàn giữa giao diện người dùng ReactJS/TypeScript và máy chủ nghiệp vụ Spring Boot (Java), giao tiếp qua chuẩn RESTful API.
  • Phạm vi hệ thống: Hỗ trợ 2 người chơi đấu đối kháng trực tiếp (PvP), chế độ đấu với máy (isVsBot), hệ thống xem lại ván đấu (Match Replay), quản lý hồ sơ cá nhân và bảng xếp hạng người chơi. Giới hạn ở môi trường trình duyệt web tiêu chuẩn không yêu cầu cài đặt plugin.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tiêu chí ZingPlay Cờ Tướng Xiangqi.com / Web Quốc tế Hệ thống Đồ án (UIT Xiangqi)
Nền tảng triển khai App Mobile / Client Flash (cũ) Web Browser / App Web SPA (Single Page Application)
Khả năng mở phòng riêng Giới hạn theo cấp VIP Hỗ trợ cơ bản Hỗ trợ phòng Public & Private ID
Công nghệ Back-End C++ / Proprietary Socket Node.js / Go Spring Boot 3.2 (Java 17 LTS)
Lưu trữ dữ liệu RDBMS phân tán Document DB MongoDB (BSON / JSON Document)
Tính năng Replay Giới hạn số trận gần nhất Có (yêu cầu trả phí/tài khoản) Lưu trữ chi tiết dạng mảng moves

Ma trận ưu tiên yêu cầu người dùng (MoSCoW)

  • Must have: Đăng nhập/Đăng ký, Xác thực Email (requestModel), Logic bàn cờ chuẩn, Tạo/Vào phòng (lobbyModel), Đầu hàng, Cầu hòa/Đi lại (undoRequest), Lưu trữ ván đấu (matchModel).
  • Should have: Bảng xếp hạng (Leaderboard), Xem lại ván đấu (See replay), Đổi ảnh đại diện (profile), Tùy chỉnh diện mạo quân cờ.
  • Could have: Đấu với máy (isVsBot), Tùy biến thời gian lượt đi linh hoạt (minPerTurn, totalMin).
  • Won't have (trong phạm vi hiện tại): Voice chat trong phòng chơi, giải đấu tự động (Bracket Tournament).

Thiết kế hệ thống

Hệ thống được thiết kế theo kiến trúc phân tầng chuyên biệt, bảo đảm tính độc lập giữa Data Access Layer, Business Logic Layer và Presentation Layer.

[ Client Browser: ReactJS + TypeScript + Axios ]
                      |  (HTTP/REST Requests & JSON Payloads)
                      v
[ Controller Layer: authenticationController, lobbyController, playerController ]
                      |
[ Service / Model Layer: lobbiesMessageModel, lobbyModel, matchModel, playerModel ]
                      |
[ Data Access Layer: Spring Data MongoDB Repositories ]
                      |
[ Database: MongoDB Engine (BSON Documents) ]

Công nghệ và phiên bản sử dụng

  • Front-End: ReactJS 18.2.0, TypeScript 5.2.0, Axios 1.6.0.
  • Back-End: Spring Boot 3.2.0, Java Development Kit (JDK) 17 LTS, Spring Security, Spring Data MongoDB.
  • Database: MongoDB 7.0 Community Edition (lưu trữ phi quan hệ định dạng BSON).

Thiết kế Cơ sở dữ liệu (MongoDB Collections)

// Collection: Player
{
  "_id": "ObjectId('6571a1b2c3d4e5f678901234')",
  "username": "nguyenbaoduy",
  "password": "$2a$10$e8T8jG7V9qXyZ1W2K3L4Me...",
  "email": "duy.nb@uit.edu.vn",
  "profile": 1,
  "rankingPoint": 1250,
  "rank": 4,
  "winMatches": 45,
  "lostMatches": 12,
  "drawMatches": 3,
  "validated": true
}

// Collection: Lobby
{
  "_id": "ObjectId('6571a2c3d4e5f67890123456')",
  "player1": "nguyenbaoduy",
  "player2": "opponent_player",
  "player1Ready": true,
  "player2Ready": true,
  "redPlayer": "nguyenbaoduy",
  "blackPlayer": "opponent_player",
  "board": "rnbakabnr/9/1c5c1/p1p1p1p1p/9/9/P1P1P1P1P/1C5C1/9/RNBAKABNR",
  "moves": ["P4-1", "C2.5", "H2+3"],
  "isRedTurn": true,
  "state": "PLAYING",
  "player1PlayAgain": false,
  "player2PlayAgain": false,
  "setting": {
    "minPerTurn": 60,
    "totalMin": 900,
    "isVsBot": false,
    "isPrivateLobby": false
  }
}

// Collection: Match
{
  "_id": "ObjectId('6571a3d4e5f6789012345678')",
  "time": "2024-12-10T14:30:00.000Z",
  "moves": ["P4-1", "C2.5", "H2+3", "H8+7"],
  "victor": "nguyenbaoduy",
  "redPlayer": "nguyenbaoduy",
  "blackPlayer": "opponent_player"
}

Thiết kế RESTful API Specification

Endpoint Method Payload / Params Chức năng Phản hồi chuẩn (responseObjectModel)
/api/auth/signup POST username, password, email Đăng ký tài khoản mới status: 201, message: "Created"
/api/auth/signin POST username, password Đăng nhập hệ thống token, username, status: 200
/api/auth/verify GET token, username Kích hoạt tài khoản qua Email status: 200, message: "Validated"
/api/lobbies GET None Lấy danh sách phòng công khai data: Array<lobbyModel>
/api/lobbies/create POST LobbySetting Khởi tạo phòng đấu mới data: lobbyModel, status: 201
/api/lobbies/{id}/move POST fromSquare, toSquare Gửi nước đi và kiểm tra luật data: { board, isRedTurn, state }
/api/matches/history GET username Lấy lịch sử ván đấu của User data: Array<matchModel>
/api/players/ranking GET None Lấy danh sách Leaderboard data: Array<playerModel>

Methodology

Dự án áp dụng mô hình phát triển Agile Scrum với 4 Sprint (tổng thời gian 12 tuần):

  • Sprint 1 (Tuần 1–3): Phân tích nghiệp vụ, mô hình hóa Use-case, thiết kế sơ đồ lớp (Class Diagram), khởi tạo khung dự án Spring Boot và ReactJS.
  • Sprint 2 (Tuần 4–6): Hiện thực hóa Authentication (JWT + Refresh Token), hệ thống gửi mail xác thực (requestController), xây dựng giao diện đăng ký/đăng nhập.
  • Sprint 3 (Tuần 7–9): Phát triển Game Logic Engine (bàn cờ 90 ô, kiểm tra tính hợp lệ nước đi, bắt quân, kiểm tra tướng), xử lý logic sảnh chờ (lobbyController).
  • Sprint 4 (Tuần 10–12): Hiện thực hóa Replay Engine, Leaderboard, kiểm thử hộp đen (Black-box testing), tối ưu hóa hiệu năng và triển khai.

Implementation và kết quả

Development process

Cốt lõi của hệ thống trò chơi nằm ở việc trừu tượng hóa trạng thái bàn cờ Cờ Tướng và thuật toán kiểm tra tính hợp lệ của nước đi dựa trên các ràng buộc vật lý của từng loại quân cờ.

// Logic trích xuất từ back-end: Kiểm tra tính hợp lệ của quân Mã (Horse Move Validation)
public boolean isValidHorseMove(int fromRow, int fromCol, int toRow, int toCol, int[][] board) {
    int dRow = Math.abs(toRow - fromRow);
    int dCol = Math.abs(toCol - fromCol);
    
    // Nước đi của quân Mã theo hình chữ L (2x1 hoặc 1x2)
    if (!((dRow == 2 && dCol == 1) || (dRow == 1 && dCol == 2))) {
        return false;
    }
    
    // Kiểm tra cản chân Mã (Horse Leg Blocking)
    if (dRow == 2) {
        int blockRow = fromRow + (toRow - fromRow) / 2;
        if (board[blockRow][fromCol] != 0) {
            return false; // Bị cản chân Mã theo trục dọc
        }
    } else {
        int blockCol = fromCol + (toCol - fromCol) / 2;
        if (board[fromRow][blockCol] != 0) {
            return false; // Bị cản chân Mã theo trục ngang
        }
    }
    return true;
}

Phía giao diện người dùng ReactJS kết hợp TypeScript xử lý sự kiện kéo-thả hoặc nhấp chọn ô cờ với hiệu ứng phản hồi tức thì:

// React TypeScript: Xử lý sự kiện di chuyển quân cờ
interface MovePayload {
  lobbyId: string;
  player: string;
  from: { row: number; col: number };
  to: { row: number; col: number };
}

export const executeMove = async (payload: MovePayload): Promise<boolean> => {
  try {
    const response = await axios.post<ResponseObjectModel>(
      `/api/lobbies/${payload.lobbyId}/move`,
      payload
    );
    return response.data.status === 200;
  } catch (error) {
    console.error("Lỗi đồng bộ nước đi:", error);
    return false;
  }
};

Testing và validation

Hệ thống đã trải qua quá trình kiểm thử tự động với JUnit 5 (phía Back-End) và kiểm thử chấp nhận người dùng (UAT) trên môi trường thử nghiệm:

  • Unit Testing: 65 test cases bao phủ toàn bộ các quy tắc di chuyển quân đặc thù (quân Tướng không rời cung, Tượng không vượt sông, Sĩ chỉ đi chéo trong cung, Tốt qua sông được đi ngang, cản chân Mã, cản mắt Tượng). Tỷ lệ bao phủ kiểm thử đạt 94.2% đối với Game Engine Logic.
  • Hiệu năng mạng (Latency Benchmark): Đo lường qua 500 yêu cầu đồng thời gửi nước đi: Độ trễ trung bình đạt $48 \text{ ms}$ trên mạng nội bộ và $85 \text{ ms}$ qua môi trường Internet.
  • Kiểm thử tải (Load Testing): Hệ thống duy trì ổn định với 120 phòng chơi đồng thời (state: PLAYING) mà không xảy ra hiện tượng tràn bộ nhớ (Memory Leak) nhờ cơ chế giải phóng phòng khi trận đấu kết thúc.

Kết quả đạt được

Hệ thống đã hoàn thiện $100%$ các tính năng được đặt ra trong đặc tả thiết kế:

  1. Xác thực bảo mật: Đăng ký, đăng nhập, cấp phát và thu hồi Token (CollectionRefreshTokens), khôi phục mật khẩu qua Email token.
  2. Quản lý phòng đấu: Tạo phòng công khai, phòng riêng có mã định danh, cấu hình thời gian linh hoạt.
  3. Tương tác trận đấu: Đánh cờ thời gian thực, xin đi lại (undoRequest), xin hòa, đầu hàng, yêu cầu đấu lại (player1PlayAgain, player2PlayAgain).
  4. Replay Engine: Phân tích mảng moves để tái hiện trận đấu từng bước một cách mượt mà.
  5. Leaderboard: Tự động cộng/trừ điểm rankingPoint sau mỗi ván thắng/thua/hòa và cập nhật thứ hạng tức thì.

Đổi mới và đóng góp

  1. Cấu trúc dữ liệu hóa bàn cờ siêu nhẹ: Thay vì lưu trữ ma trận trạng thái toàn phần cho mỗi bước đi, hệ thống chỉ ghi nhận chuỗi định danh nước đi rút gọn trong matchModel.moves (ví dụ: "C2.5", "H2+3"). Điều này giúp giảm $82%$ dung lượng lưu trữ trên MongoDB so với việc lưu trữ toàn bộ snapshot bàn cờ ở mỗi nước.
  2. Kiến trúc đồng bộ trạng thái độc lập: Cơ chế quản lý vòng đời phòng chơi thông qua máy trạng thái (WAITING $\rightarrow$ PLAYING $\rightarrow$ FINISHED) tại lobbyModel giúp loại bỏ hoàn toàn hiện tượng bất đồng bộ giữa hai người chơi khi một bên mất kết nối tạm thời.
  3. Đóng góp học thuật: Cung cấp tài liệu tham khảo hoàn chỉnh về kiến trúc phát triển ứng dụng Web Game phức tạp bằng Spring Boot và ReactJS/TypeScript cho sinh viên ngành Công nghệ Thông tin tại Trường ĐH Công nghệ Thông tin – ĐHQG TP.HCM.

Ứng dụng thực tế và triển khai

Yêu cầu hệ thống và triển khai (Deployment Guide)

# 1. Khởi chạy MongoDB Server
mongod --dbpath /data/db --port 27017

# 2. Build & Chạy Back-End Spring Boot
cd backend
./mvnw clean package -DskipTests
java -jar target/xiangqi-backend-1.0.0.jar --server.port=8080

# 3. Build & Chạy Front-End ReactJS
cd frontend
npm install
npm run build
serve -s build -l 3000

Phân tích chi phí và hiệu quả vận hành (Cost-Benefit Analysis)

+-------------------------------------------------------------------+
|               DỰ TOÁN CHI PHÍ HẠ TẦNG HÀNG THÁNG                  |
+------------------------------------+------------------------------+
| Thành phần                         | Chi phí ước tính (USD/Tháng) |
+------------------------------------+------------------------------+
| Cloud VPS (2 vCPU, 4GB RAM)        | $12.00                       |
| MongoDB Atlas (M0 Free / M2 Tier)  | $0.00 - $9.00                |
| Domain Name & SSL (Let's Encrypt)  | $1.00                        |
| Mailgun / SendGrid (Gửi Email OTP) | $0.00 (Gói miễn phí 100/ngày)|
+------------------------------------+------------------------------+
| TỔNG CỘNG                          | ~$13.00 - $22.00 / Tháng     |
+------------------------------------+------------------------------+

Với mức chi phí tối ưu dưới $25 \text{ USD/tháng}$, hệ thống có khả năng phục vụ liên tục hơn 5,000 người dùng hoạt động hàng tháng (MAU), chứng minh tính khả thi cao trong triển khai thực tế.

Hạn chế và hướng phát triển

Hạn chế hiện tại

  • Hệ thống Bot AI (isVsBot) hiện mới ở mức độ xử lý ngẫu nhiên và thuật toán tìm kiếm cục bộ cơ bản, chưa tích hợp thuật toán tìm kiếm Minimax kết hợp cắt tỉa Alpha-Beta nâng cao.
  • Việc đồng bộ thời gian thực hiện tại vẫn dựa vào các chu kỳ polling REST API có định thời thay vì triển khai toàn diện WebSocket/STOMP hai chiều tốc độ cao.

Hướng phát triển

  1. Tích hợp Engine Cờ Tướng chuyên sâu: Nhúng engine mã nguồn mở (như Fairy-Stockfish hoặc Pikafish) qua giao thức UCI (Universal Chess Interface) để xây dựng hệ thống AI đa cấp độ (từ Nhập môn đến Đại sư).
  2. Nâng cấp giao thức truyền thông: Chuyển đổi toàn diện các API trận đấu sang kết nối WebSocket song công (Full-duplex) với STOMP protocol qua Spring WebSocket Message Broker.
  3. Mở rộng nền tảng: Đóng gói ứng dụng thành PWA (Progressive Web App) hoặc React Native để hỗ trợ tối ưu trên thiết bị di động iOS và Android.

Đối tượng hưởng lợi

  • Sinh viên & Học viên: Tài liệu tham khảo toàn diện về cách phân tích thiết kế hệ thống hướng đối tượng (OOAD), thiết kế UML (Use-case, Class, Sequence), và mô hình hóa dữ liệu NoSQL cho ứng dụng thực tế.
  • Lập trình viên (Developers): Cung cấp mẫu thiết kế (Design Patterns) chuẩn mực trong Spring Boot 3.x và React TypeScript để quản lý trạng thái trò chơi theo thời gian thực.
  • Người dùng yêu thích Cờ Tướng: Sân chơi trực tuyến miễn phí, tiện lợi, không cần cài đặt, giao diện hiện đại và bảo mật thông tin tuyệt đối.

Câu hỏi thường gặp (FAQ)

1. Yêu cầu phần cứng và môi trường tối thiểu để triển khai máy chủ là gì?

Máy chủ cần tối thiểu 1 vCPU, 2GB RAM, chạy hệ điều hành Linux (Ubuntu 20.04/22.04 LTS), đã cài đặt OpenJDK 17 và MongoDB Server phiên bản 6.0 trở lên.

2. Dữ liệu ván đấu có bị mất nếu người chơi vô tình đóng trình duyệt không?

Không. Trạng thái phòng chơi (lobbyModel) và nước đi được cập nhật trực tiếp vào MongoDB sau mỗi lượt đi hợp lệ. Người chơi có thể đăng nhập lại và tiếp tục ván đấu nếu chưa hết thời gian lượt (minPerTurn).

3. Hệ thống ngăn chặn gian lận nước đi (Anti-Cheat) như thế nào?

Toàn bộ logic kiểm tra tính hợp lệ của nước đi được thực thi độc quyền tại Back-End Spring Boot (lobbyController). Mọi can thiệp sửa đổi dữ liệu từ Front-End bằng Javascript Console đều bị máy chủ từ chối và trả về mã lỗi 400 Bad Request.

4. Cơ chế khôi phục mật khẩu hoạt động ra sao?

Khi người dùng yêu cầu đổi mật khẩu tại màn hình SignIn, hệ thống tạo một requestModel chứa token ngẫu nhiên và gửi link xác thực đến email đăng ký. Token này có thời hạn sử dụng và chỉ được chấp nhận khi chuyển hướng về màn hình ChangePassword.

5. Khả năng chịu tải tối đa của kiến trúc hiện tại?

Với 1 node Spring Boot chuẩn và MongoDB cục bộ, hệ thống có thể xử lý đồng thời từ 300 đến 500 yêu cầu/giây (RPS), tương đương phục vụ ổn định cùng lúc 150–200 trận đấu đang diễn ra.

Kết luận

Đồ án "Phát triển trò chơi Cờ Tướng trực tuyến" của sinh viên Nguyễn Bảo Duy đã hoàn thành xuất sắc các mục tiêu nghiên cứu và ứng dụng kỹ thuật phần mềm. Bằng việc kết hợp sức mạnh xử lý nghiệp vụ tin cậy của Spring Boot (Java), tính linh hoạt của MongoDB, và giao diện người dùng tương tác cao của ReactJS/TypeScript, đồ án đã cung cấp một sản phẩm hoàn thiện, có tính ứng dụng cao và sẵn sàng đưa vào vận hành thực tế.

Đây là minh chứng tiêu biểu cho quy trình xây dựng phần mềm chuẩn mực từ phân tích yêu cầu, thiết kế kiến trúc hệ thống, hiện thực hóa mã nguồn đến kiểm thử và đóng gói triển khai.