Đồ án môn học: Phát triển game cờ tướng trực tuyến full chức năng

Tài liệu đồ án phát triển game cờ tướng trực tuyến full chức năng. Báo cáo chi tiết phân tích, thiết kế hệ thống sử dụng ReactJS và Spring Boot.

• Tác giả: Nguyễn Bảo Duy
• Người hướng dẫn: TS. Huỳnh Minh Đức
• Trường học: Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Phát Triển Trò Chơi Cờ Tướng Trực Tuyến Sử Dụng ReactJS Và Spring Boot
• Loại tài liệu: Đồ Án
• Năm xuất bản: 2024
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Game Cờ Tướng Online

Đồ án game cờ tướng online là một ứng dụng web hiện đại được phát triển nhằm cung cấp sân chơi cờ tướng trực tuyến cho mọi đối tượng người dùng. Nhu cầu về thị trường game online ngày càng tăng cao, với số lượng người chơi gia tăng đáng kể. Dự án này kết hợp công nghệ ReactJS cho frontend và Spring Boot cho backend, tạo nên một nền tảng mạnh mẽ và ổn định. Ứng dụng cho phép người chơi tham gia các trận đấu cờ tướng, cạnh tranh trên bảng xếp hạng, và xem lại lịch sử trận đấu của mình. Mục tiêu chính là xây dựng một platform game cờ tướng hoàn thiện với các tính năng quản lý tài khoản, xác thực người dùng, và hỗ trợ gameplay trực tuyến hai người chơi.

1.1. Mục Tiêu Dự Án

Dự án nhằm cung cấp sân chơi cờ tướng online chất lượng cao với giao diện thân thiện. Mục tiêu bao gồm: cung cấp bảng xếp hạng để người chơi cạnh tranh, tính năng lịch sử để xem lại trận đấu, và hỗ trợ gameplay trực tuyến với hai người chơi. Nền tảng này cấp phép cho mọi người có khả năng truy cập trang web, tạo nên cộng đồng game cờ tướng sôi động và tương tác cao.

1.2. Phạm Vi Ứng Dụng

Ứng dụng game cờ tướng ReactJS Spring Boot hỗ trợ đăng nhập, đăng ký, xác thực tài khoản, và đổi mật khẩu. Các tính năng chính bao gồm quản lý thông tin tài khoản, quản lý lịch sử trận đấu, quản lý phòng chơi, và gameplay cờ tướng hoàn thiện với chức năng đi lại, đầu hàng, và chơi lại.

II. Công Nghệ Sử Dụng Trong Đồ Án

Đồ án game cờ tướng online được xây dựng trên nền tảng công nghệ hiện đại và mạnh mẽ. ReactJS được sử dụng làm thư viện JavaScript mã nguồn mở để xây dựng giao diện người dùng (frontend), tập trung vào phần hiển thị giao diện (view) mà không can thiệp vào logic nghiệp vụ. Spring Boot là framework Java được chọn để phát triển backend, cung cấp các API RESTful mạnh mẽ cho ứng dụng. Axios được sử dụng như HTTP client để gửi request từ frontend đến backend. MongoDB là cơ sở dữ liệu NoSQL được lựa chọn để lưu trữ dữ liệu linh hoạt. Sự kết hợp này tạo nên một kiến trúc ứng dụng vô cùng hiệu quả và có khả năng mở rộng cao.

2.1. ReactJS Frontend Framework

ReactJS là thư viện JavaScript phổ biến dùng để xây dựng giao diện người dùng động. Nó tập trung vào phần hiển thị (view) và cho phép tạo các component tái sử dụng. ReactJS hỗ trợ virtual DOM để cải thiện hiệu suất rendering. Với ReactJS, các nhà phát triển có thể tạo một giao diện game cờ tướng mượt mà, responsive, và dễ bảo trì.

2.2. Spring Boot Backend Framework

Spring Boot là framework Java giúp phát triển backend ứng dụng nhanh chóng và hiệu quả. Nó cung cấp các công cụ mạnh mẽ cho quản lý API, xác thực người dùng, và xử lý logic nghiệp vụ. Spring Boot kết hợp với MongoDB tạo nên một backend linh hoạt, có thể xử lý nhiều yêu cầu đồng thời từ game online mà không gặp vấn đề về hiệu suất.

2.3. MongoDB Cơ Sở Dữ Liệu

MongoDB là cơ sở dữ liệu NoSQL linh hoạt, thích hợp cho các ứng dụng game online cần lưu trữ dữ liệu người dùng, lịch sử trận đấu, và thông tin phòng chơi. Cấu trúc document-based của MongoDB cho phép lưu trữ dữ liệu phức tạp một cách hiệu quả, hỗ trợ mở rộng ứng dụng mà không cần sửa đổi schema.

III. Thiết Kế Kiến Trúc Hệ Thống

Kiến trúc hệ thống của game cờ tướng online được chia thành hai phần chính: frontend và backend. Phía frontend sử dụng ReactJS để xây dựng giao diện người dùng, bao gồm các màn hình đăng nhập, đăng ký, lobby trò chơi, và gameplay. Phía backend được xây dựng bằng Spring Boot, xử lý các yêu cầu từ frontend, quản lý logic trò chơi, xác thực người dùng, và tương tác với MongoDB. Hai phần này giao tiếp thông qua Axios HTTP client, gửi các request RESTful. Kiến trúc microservices này cho phép mở rộng ứng dụng một cách độc lập, cải thiện hiệu suất và bảo trì dễ dàng.

3.1. Kiến Trúc Tổng Quát

Kiến trúc ứng dụng game cờ tướng theo mô hình client-server với ba tầng chính. Tầng presentation (frontend) dùng ReactJS hiển thị giao diện người dùng. Tầng application (backend) dùng Spring Boot xử lý logic nghiệp vụ. Tầng data sử dụng MongoDB lưu trữ thông tin. Axios cầu nối giữa frontend và backend thông qua RESTful API, đảm bảo giao tiếp seamless.

3.2. Thiết Kế Cơ Sở Dữ Liệu

Cơ sở dữ liệu MongoDB được thiết kế để lưu trữ các collection như User (thông tin người dùng), Game (lịch sử trận đấu), Lobby (thông tin phòng chơi), và Ranking (bảng xếp hạng). Mỗi document chứa các field cần thiết cho quản lý trò chơi online, cho phép lưu trữ dữ liệu phức tạp như nước đi, trạng thái bàn cờ, và thống kê người chơi.

3.3. Thiết Kế Giao Diện

Giao diện game cờ tướng bao gồm các màn hình chính: SignIn/SignUp (xác thực), MainPage (trang chủ), Lobbies (danh sách phòng), Lobby (chi tiết phòng), GamePlay (bàn cờ trực tuyến), và User Profile (hồ sơ người dùng). Mỗi màn hình được xây dựng bằng ReactJS components, tạo một trải nghiệm người dùng mượt mà và dễ sử dụng.

IV. Các Tính Năng Chính Của Ứng Dụng

Game cờ tướng online cung cấp một bộ tính năng hoàn chỉnh cho trò chơi trực tuyến hiện đại. Người dùng có thể đăng ký tài khoản, đăng nhập, và quản lý thông tin cá nhân như đổi mật khẩu, thay đổi ảnh đại diện. Tính năng chơi game bao gồm tạo phòng chơi, tham gia phòng chơi của người khác, và thực hiện trận đấu cờ tướng trực tuyến với hai người chơi. Ứng dụng hỗ trợ xem lại lịch sử trận đấu, bảng xếp hạng toàn cầu, chức năng đi lại (rút giai đoạn), đầu hàng, và chơi lại. Hệ thống xác thực email đảm bảo bảo mật tài khoản người dùng, cùng với các tính năng nâng cao khác.

4.1. Tính Năng Xác Thực Và Quản Lý Tài Khoản

Hệ thống xác thực bao gồm đăng ký tài khoản mới, đăng nhập an toàn, xác thực email, đổi mật khẩu, và đăng xuất. Mỗi người dùng có một hồ sơ cá nhân hiển thị thông tin tài khoản, lịch sử trận đấu, tỷ lệ thắng thua. Người chơi có thể thay đổi ảnh đại diện để cá nhân hóa hồ sơ game cờ tướng của mình.

4.2. Tính Năng Gameplay Trực Tuyến

Gameplay cờ tướng online cho phép hai người chơi tham gia trận đấu trực tuyến. Người chơi có thể tạo phòng chơi riêng hoặc tham gia phòng chơi của người khác. Trong trò chơi, hỗ trợ đi lại (rút giai đoạn với sự đồng ý), đầu hàng, và chơi lại. Bàn cờ hiển thị rõ ràng, cho phép di chuyển quân cờ dễ dàng.

4.3. Tính Năng Lịch Sử Và Bảng Xếp Hạng

Tính năng lịch sử cho phép người chơi xem lại trận đấu trước đó, phân tích các nước đi và kết quả. Bảng xếp hạng hiển thị những người chơi hàng đầu dựa trên điểm số và số trận thắng. Hệ thống này tạo động lực cho người chơi cạnh tranh và cải thiện kỹ năng cờ tướng của họ.

Trích đoạn nội dung tài liệu

Chương 1. Giới thiệu chung Hiện nay, nhu cầu về thị trường game online ngày càng được tăng cao, số lượng người chơi game online ngày càng nhiều. Bắt theo làn sóng đó, ứng dụng website tạo nên trò chơi cờ tướng để mọi người có thể tham gia sân chơi đó, cạnh tranh với nhau trên bảng xếp hạng. Mục tiêu Cung cấp sân chơi cờ tướng cho mọi đối tượng người dùng có khả năng truy cập vào trang web.

Cung cấp bảng xếp hạng để người chơi cạnh tranh với nhau. Cung cấp tính năng lịch sử để người chơi xem lại trận đấu của mình. Phạm vi Đối tượng sử dụng: ● Mọi đối tượng có khả năng truy cập trang web Các tính năng chính: ● Đăng nhập, đăng xuất, đăng ký, xác thực tài khoản, đổi mật khẩu ● Quản lý thông tin tài khoản ● Quản lý lịch sử các trận mới nhất, xem lại các trận đã đánh ● Quản lý các phòng chơi và thông tin các phòng ● Game cờ tướng hoàn thiện với hai người chơi ● Chức năng đi lại với sự đồng ý của đối phương 1 ● Chức năng đầu hàng ● Chức năng chơi lại ● Thay đổi diện mạo quân cờ ● Danh sách những người chơi đứng đầu bảng xếp hạng 2 Chương 2. Công nghệ sử dụng Đồ án của nhóm sử dụng các công nghệ như: ● Reactjs ● Axios ● Spring Boot (Java) ● Mongodb 2.

Tổng quan công nghệ 2.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác.js được tạo bởi Ryan Dahl từ năm 2009, và phát triển dưới sự bảo trợ của Joyent. Mục tiêu ban đầu của Dahl là làm cho trang web có khả năng push như trong một số ứng dụng web như Gmail. Sau khi thử với vài ngôn ngữ Dahl chọn Javascript vì một API Nhập/Xuất không đầy đủ.

Điều này cho phép anh có thể định nghĩa một quy ước Nhập/Xuất điểu khiển theo sự kiện, non-blocking. Vài môi trường tương tự được viết trong các ngôn ngữ khác bao gồm Twisted cho Python, Perl Object Environment cho Perl, libevent cho C và EventMachine cho Ruby. Khác với hầu hết các chương trình Javascript, Nodejs không chạy trên một 3 trình duyệt mà chạy trên Server.js sử dụng nhiều chi tiết kỹ thuật của CommonJS. Nó cung cấp một môi trường REPL cho kiểm thử tương tác.js được InfoWorld bình chọn là "Công nghệ của năm" năm 2012.

Reactjs React (ReactJS) là mộ t thư viện JavaScript mã nguồ n mở , đượ c dù ng để xâ y dự ng giao diện ngườ i dù ng (frontend) cho web. React chỉ tậ p trung và o phầ n hiển thị giao diện (view), chứ khô ng can thiệp và o cá ch sắ p xếp logic nghiệp vụ hoặ c cấ u trú c ứ ng dụ ng. Điều nà y mang lạ i cho lậ p trình viên nhiều tự do hơn khi thiết kế frontend so vớ i cá c framework khá c. Tuy nhiên, sự tự do nà y cũ ng là m cho React khó họ c hơn vớ i ngườ i mớ i bắ t đầ u, đặ c biệt khi phả i quả n lý cá c ứ ng dụ ng lớ n.

Typescript TypeScript là một ngôn ngữ lập trình được phát triển và duy trì bởi Microsoft. Nó là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu 4 tĩnh tùy chọn vào ngôn ngữ. TypeScript được thiết kế để phát triển các ứng dụng lớn và chuyển đổi sang JavaScript. Vì TypeScript là một siêu tập hợp JavaScript, các chương trình JavaScript hiện có cũng là các chương trình TypeScript hợp lệ.

TypeScript có thể được sử dụng để phát triển các ứng dụng JavaScript cho cả thực thi phía máy khách và phía máy chủ (như với Node.js hoặc Deno). Có nhiều tùy chọn có sẵn để biên dịch. Có thể sử dụng Trình kiểm tra TypeScript mặc định, hoặc có thể sử dụng trình biên dịch Babel để chuyển đổi TypeScript sang JavaScript. Spring Boot Spring là mộ t Java framework siêu to và khổ ng lồ , là m đượ c đủ mọ i thứ.

Nó đượ c chia thà nh nhiều module, mỗ i module là m mộ t chứ c nă ng, ví dụ Spring Core, Web, Data access, AOP,. Spring đượ c xâ y dự ng dự a trên 2 khá i niệm nền tả ng là Dependency injection và AOP (Aspect Oriented Programming). Spring Boot đượ c xâ y dự ng dự a trên nền củ a Spring Framework, phá t triển bở i ngô n ngữ Java. Nó là mộ t phiên bả n có tính tự độ ng hoá cao hơn và đơn giả n hơn củ a Spring.

Spring Boot khiến cho việc tạ o và khở i chạ y ứ ng dụ ng chỉ diễn ra trong vò ng và i phú t. Mongodb MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng viết bằng C++. Bản ghi trong MongoDB được lưu trữ dạng một dữ liệu văn bản (Document), là một cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự như các đối tượng JSON. MongoDB được phát triển bởi MongoDB Inc.

dưới dạng giấy phép Server Side Public License (SSPL). MongoDB lưu trữ các bản ghi dữ liệu dưới dạng dữ liệu văn bản BSON. BSON là một đại diện dạng nhị phân của tài liệu JSON, tuy nhiên nhờ xây dựng dưới dạng nhị phân, nó được thiết kế để chứa nhiều kiểu dữ liệu hơn JSON. PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 3.

Danh sách các Actor STT Tên Actor Ý nghĩa/Ghi chú 1. Người chơi Người dùng truy cập vào trang web 3. Danh sách các Use-case STT Tên Use-case Ý nghĩa/Ghi chú 7 1. Đổi mật khẩu 5.

Xem thông tin tài khoản 7. Đổi ảnh đại diện 8. Xem lịch sử đấu 9. Xem lại trận đấu 10.

Tạo phòng chơi 11. Chơi với người khác 12. Xem bảng xếp hạng 8 3. Đặc tả Use-case 3.

Use-case “Đăng nhập” Mô tả Quá trình đăng nhập vào tài khoản của người dùng Luồng sự kiện 1. Truy cập vào trang chủ của website 2. Nhấn vào nút “Sign in” để tiến hành đăng nhập Luồng sự 3. Nhập Username (tên tài khoản) và Password (mật khẩu) tài khoản kiện chính của người dùng 4.

Nhấn vào nút “Sign in” để đăng nhập 5. Đăng nhập thành công và chuyển đến trang chủ của người dùng Luồng sự Không có kiện phụ Các yêu cầu Username và Password phải khớp với dữ liệu đã được tạo trong đặc biệt database Điều kiện Không có trước Điều kiện Người dùng đăng nhập thành công sau Mở rộng Không có 3. Use-case “Đăng ký” Mô tả Quá trình đăng ký tài khoản của người dùng Luồng sự kiện 1. Truy cập vào trang chủ của website Luồng sự 9 2.

Nhấn vào nút “Sign up” để tiến hành đăng nhập 3. Nhập Username (tên tài khoản), Password (mật khẩu), Email tài kiện chính khoản của người dùng 4. Nhấn vào nút “Sign up” để đăng ký 5. Hiện thông báo đăng ký thành công Luồng sự Không có kiện phụ Các yêu cầu Username và Email không được trùng với dữ liệu đã được tạo trong đặc biệt database Điều kiện Không có trước Điều kiện Tài khoản mới được tạo ở database sau Mở rộng Không có 3.

Use-case “Xác thực” Mô tả Quá trình xác thực tài khoản của người dùng Luồng sự kiện 1. Truy cập vào email được dùng đăng ký tài khoản 2. Mở mail được gửi đến tài khoản Luồng sự 3. Nhấn vào đường dẫn ở trong mail kiện chính 4.

Chuyển đến trang Xác thực tài khoản 5. Hiện thông báo xác thực thành công 10 Luồng sự Không có kiện phụ Các yêu cầu Phải có tài khoản email đặc biệt Điều kiện Đã thực hiện đăng ký trước đó trước Điều kiện Tài khoản được xác thực ở database sau Mở rộng Không có 3. Use-case “Đổi mật khẩu” Mô tả Quá trình đổi mật khẩu của người dùng Luồng sự kiện 1. Truy cập vào email được dùng đăng ký tài khoản 2.

Mở mail được gửi đến tài khoản Luồng sự 3. Nhấn vào đường dẫn ở trong mail kiện chính 4. Chuyển đến trang Xác thực tài khoản 5. Hiện thông báo xác thực thành công Luồng sự Không có kiện phụ Các yêu cầu Phải có tài khoản email đặc biệt Điều kiện Đã thực hiện đăng ký trước đó trước Tài khoản được xác thực ở database Điều kiện 11 sau Mở rộng Không có 3.

Use-case “Đăng xuất” Mô tả Quá trình đăng xuất của người dùng Luồng sự kiện Luồng sự 1. Nhấn vào nút “Log out” kiện chính 2. Chuyển vào trang chủ với trạng thái đã đăng xuất Luồng sự Không có kiện phụ Các yêu cầu Không có đặc biệt Điều kiện Đã đăng nhập vào trước đó trước Điều kiện Thoát ra khỏi trang chính của người dùng sau Mở rộng Không có 3. Use-case “Xem thông tin tài khoản” Mô tả Hiện thị thông tin tài khoản của người dùng Luồng sự kiện 1.

Nhấn vào tab “User” Luồng sự 2. Hiển thị các thông tin như Rank (thứ hạng), Rank Point (điểm xếp kiện chính hạng), tỉ lệ thắng/thua, ảnh đại diện, … 12 Luồng sự Không có kiện phụ Các yêu cầu Không có đặc biệt Điều kiện Đã đăng nhập vào trước đó trước Điều kiện Không có sau Mở rộng Không có 3. Use-case “Đổi ảnh đại diện” Mô tả Thay đổi hình ảnh đại diện cho người dùng Luồng sự kiện 1. Nhấn vào ô lựa chọn hình ảnh Luồng sự 2.

Lựa chọn hình ảnh thay nhu cầu kiện chính 3. Nhấn nút “Save changes” để hoàn tất việc đổi ảnh đại diện Luồng sự Không có kiện phụ Các yêu cầu Không có đặc biệt Điều kiện Đã đăng nhập vào trước đó trước Điều kiện Thay đổi ảnh đại diện của người dùng sau Mở rộng Không có 13 3. Use-case “Xem lại lịch sử đấu” Mô tả Hiện thị lịch sử đấu của người dùng Luồng sự kiện Luồng sự 1. Nhấn vào tab “User” kiện chính 2.

Hiện thị thông tin lịch sử các trận đấu mới nhất Luồng sự Không có kiện phụ Các yêu cầu Không có đặc biệt Điều kiện Đã đăng nhập vào trước đó trước Điều kiện Không có sau Mở rộng Không có 3. Use-case “Xem lại trận đấu” Mô tả Xem lại trận đấu đã được đánh từ trước đó Luồng sự kiện 1. Nhấn vào tab “User” 2. Ở bảng lịch sử ở phía dưới có liệt kê các trận đấu mới nhất Luồng sự 3.

Chọn một trận đấu theo nhu cầu và Nhấn nút “See replay” để xem kiện chính lại trận đấu 4.