1. Cơ chế Giao diện (UI/UX)
-
Thiết kế Bàn cờ Động (Dynamic Grid): Giao diện cho phép bạn nhập số lượng ô (ví dụ: 10x10, 15x15, hoặc 20x20). Hệ thống sẽ sử dụng CSS Grid để tự động chia tỷ lệ các ô cờ sao cho luôn vuông vức và nằm vừa vặn trên màn hình.
-
Chủ đạo Hình ảnh (Neon Style): Sử dụng phông nền tối với hiệu ứng kính mờ (Glassmorphism). Quân X (Người chơi 1) sẽ hiển thị màu Đỏ hồng (Crimson/Pink) với hiệu ứng đổ bóng phát sáng. Quân O (Người chơi 2 / Máy) sẽ hiển thị màu Xanh ngọc (Cyan), tạo độ tương phản mạnh mẽ và hiện đại.
-
Bảng Điều khiển: Tích hợp trực tiếp phía trên bàn cờ, cho phép chọn chế độ (Người vs Người hoặc Người vs Máy), kích thước bàn, và nút Khởi tạo lại ván đấu.
2. Logic Thắng/Thua (Win Condition)
Thuật toán kiểm tra điều kiện thắng sẽ được kích hoạt ngay sau mỗi nước đi. Hệ thống lấy tọa độ của quân cờ vừa đánh làm trung tâm, sau đó quét ra 4 hướng:
Nếu ở bất kỳ hướng nào có đủ 5 quân cờ cùng loại nằm liên tiếp nhau, trò chơi sẽ kết thúc. Thuật toán này tối ưu hơn việc quét toàn bộ bàn cờ vì nó chỉ tập trung vào khu vực vừa có sự thay đổi.
3. Logic Máy (Heuristic Bot)
Đối với cờ Caro trên một bàn cờ lớn (ví dụ 15x15 hoặc 20x20), việc sử dụng thuật toán Minimax truyền thống sẽ khiến trình duyệt bị treo do khối lượng tính toán khổng lồ. Thay vào đó, tôi sử dụng thuật toán Lượng giá Cờ (Heuristic Evaluation) để đảm bảo máy đánh thông minh, phản ứng nhanh và chặn đường sắc bén:
-
Hệ thống Điểm số (Score Weights): Máy sở hữu hai bộ điểm: Điểm Tấn Công và Điểm Phòng Thủ.
-
Quét và Đánh giá: Khi đến lượt Máy, nó sẽ duyệt qua toàn bộ các ô còn trống trên bàn cờ. Tại mỗi ô trống, máy giả lập việc đặt quân X (để tính điểm phòng thủ chặn người chơi) và đặt quân O (để tính điểm tấn công của máy).
-
Nhận diện Thế cờ: Trọng số điểm được thiết lập dựa trên số lượng quân cờ liên tiếp và độ mở của hai đầu (ví dụ: 4 quân cờ hở hai đầu sẽ có điểm cực kỳ cao để ưu tiên đánh/chặn ngay lập tức).
-
Ra quyết định: Ô nào có tổng điểm (Tấn Công + Phòng Thủ) cao nhất sẽ được máy lựa chọn làm nước đi. Nếu bàn cờ trống hoàn toàn, máy luôn ưu tiên đánh vào ô trung tâm.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn