Phát triển trò chơi cờ tướng trực tuyến (Đồ Án môn học Đồ Án 2)

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 k

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN 2 PHÁT TRIỂN TRÒ CHƠI CỜ TƯỚNG TRỰC TUYẾN

Giảng viên hướng dẫn: TS HUỲNH MINH ĐỨC

Sinh viên thực hiện: Nguyễn Bảo Duy - 19520488

TP HỒ CHÍ MINH, THÁNG 12 NĂM 2024

LỜI CẢM ƠN

Em xin gửi lời cảm ờn tời thảy Huynh Minh Đửc đả giup đờ, hửờng dản,đinh hửờng cảch lảm việ!c cuả ệm trong suo%t quả trình thửc hiệ!n đo ản Em vo!cung biệ%t ờn thảy vì đả tả!n tình chì dản ệm thửc hiệ!n đệ tải nảy Trong quả trìnhthửc hiệ!n cuả ệm con hản chệ% vả con nhiệu kho khả,n nệ!n kho!ng trảnh khoinhửng thiệ%u sot nệ!n ệm mong thảy sệ đửả rả nhửng gop y, hửờng dản đệ- ệm cothệ!m cho mình nhiệu kiệ%n thửc bo- ìch, tinh thản hoc tả!p hiệ!u quả, nghiệ!m tuc Emxin chả!n thảnh cảm ờn thảy!

TP Ho Chì Minh, thảng 12 nả,m 2024

Sinh việ!n thửc hiệ!n

Nguyện Bảo Duy

3.1.4.4 Use-case “Đổi mật khẩu” 8

3.1.4.6 Use-case “Xem thông tin tài khoản” 83.1.4.7 Use-case “Đổi ảnh đại diện” 83.1.4.8 Use-case “Xem lại lịch sử đấu” 93.1.4.9 Use-case “Xem lại trận đấu” 93.1.4.10 Use-case “Tạo phòng chơi” 93.1.4.11 Use-case “Chơi với người khác” 103.1.4.12 Use-case “Xem bảng xếp hạng” 10

3.4.2 Mô tả các kiểu dữ liệu trong sơ đồ logic 243.4.2.1 Collection Player (Người chơi) 243.4.2.2 CollectionRefreshTokens 253.4.2.3 CollectionLobby (Phòng chơi) 253.4.2.4 SubdocumentLobbySetting 253.4.2.5 Collection Match (Trận đấu) 25

3.6.2.1 Màn hình “SignIn” 30

3.6.2.4 Màn hình “ChangePassword” 333.6.2.5 Màn hình “VerifyEmail” 33

Chương 1 TỔNG QUAN

1.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

1.2 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ậpvào trang web Cung cấp bảng xếp hạng để người chơi cạnh tranh với nhau Cung cấptính năng lịch sử để người chơi xem lại trận đấu của mình

1.3 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

● 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

Node.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ằngJavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tốithiểu tổng chi phí và tối đa khả năng mở rộng Node.js bao gồm có V8 JavaScriptengine của Google, libUV, và vài thư viện khác

Node.js được tạo bởi Ryan Dahl từ năm 2009, và phát triển dưới sự bảo trợ củaJoyent Mục tiêu ban đầu của Dahl là làm cho trang web có khả năng push như trongmộ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ộtquy ướ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 Twistedcho Python, Perl Object Environment cho Perl, libevent cho C và EventMachine choRuby Khác với hầu hết các chương trình Javascript, Nodejs không chạy trên một

trình duyệt mà chạy trên Server Node.js sử dụng nhiều chi tiết kỹ thuật củaCommonJS Nó cung cấp một môi trường REPL cho kiểm thử tương tác.

Node.js được InfoWorld bình chọn là "Công nghệ của năm" năm 2012

2.2.2 Reactjs

Rệảct (RệảctJS) lả mo!t thử việ!n JảvảScript mả nguon mờ, đửờc dung đệ- xả!y dửng giảo diệ!n ngửời dung (frontệnd) cho wệb Rệảct chì tả!p trung vảo phản hiệ-n thi giảo diệ!n (việw), chử kho!ng cản thiệ!p vảo cảch sảQp xệ%p logic nghiệ!p vu hoả,c cả%u truc ửng dung

Điệu nảy mảng lải cho lả!p trình việ!n nhiệu tử do hờn khi thiệ%t kệ%

frontệnd so vời cảc frảmệwork khảc Tuy nhiệ!n, sử tử do nảy cung lảm cho Rệảct kho hoc hờn vời ngửời mời bảQt đảu, đả,c biệ!t khi phải quản ly cảc ửng dung lờn

2.2.3 Typescript

TypeScript là một ngôn ngữ lập trình được phát triển và duy trì bởi Microsoft

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ácchươ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ùychọ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

2.2.4 Spring Boot

Spring lả mo!t Jảvả frảmệwork siệ!u to vả kho-ng lo, lảm đửờc đu moi thử

No đửờc chiả thảnh nhiệu modulệ, moi modulệ lảm mo!t chửc nả,ng, vì du

Spring Corệ, Wệb, Dảtả ảccệss, AỔP, Spring đửờc xả!y dửng dửả trệ!n 2 khải niệ!m nện tảng lả Dệpệndệncy injệction vả AỔP (Aspệct Ổriệntệd

Progrảmming)

Spring Boot đửờc xả!y dửng dửả trệ!n nện cuả Spring Frảmệwork, phảt triệ-n bời ngo!n ngử Jảvả No lả mo!t phiệ!n bản co tình tử đo!ng hoả cảo hờn vả đờn giản hờn cuả Spring Spring Boot khiệ%n cho việ!c tảo vả khời chảy ửng dungchì diện rả trong vong vải phut

2.2.5 Mongodb

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảngviế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

Chương 3 PHÂN TÍCH THIẾT KẾ ỨNG DỤNG

3.1 Use-case

3.1.1 Sơ đồ Use-case

3.1.2 Danh sách các Actor

1 Người chơi Người dùng truy cập vào trang web

3.1.3 Danh sách các Use-case

6 Xem thông tin tài khoản

7 Đổi ảnh đại diệ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

3 Nhập Username (tên tài khoản) và Password (mật khẩu) tài khoản 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ùngLuồng sự

kiện chính

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 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ôngLuồng sự

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

3 Nhấn vào đường dẫn ở trong mail

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ôngLuồng sự

kiện phụ Không có

3.1.4.4 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

Luồng sự

kiện chính

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

3 Nhấn vào đường dẫn ở trong mail

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ôngLuồng sự

3.1.4.5 Use-case “Đăng xuất”

Mô tả Quá trình đăng xuất của người dùng

Luồng sự kiệnLuồng sự

kiện chính

1 Nhấn vào nút “Log out”

2 Chuyển vào trang chủ với trạng thái đã đăng xuấtLuồng sự

3.1.4.6 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

Luồng sự

kiện chính

1 Nhấn vào tab “User”

2 Hiển thị các thông tin như Rank (thứ hạng), Rank Point (điểm xếp hạng), tỉ lệ thắng/thua, ảnh đại diện, …

Luồng sự

kiện phụ Không có

Các yêu cầu

đặc biệt Không có

3.1.4.7 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

Luồng sự

kiện chính

1 Nhấn vào ô lựa chọn hình ảnh

2 Lựa chọn hình ảnh thay nhu cầu

3 Nhấn nút “Save changes” để hoàn tất việc đổi ảnh đại diệnLuồng sự

3.1.4.8 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ệnLuồng sự 1 Nhấn vào tab “User”

3.1.4.9 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

Luồng sự

kiện chính

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

3 Chọn một trận đấu theo nhu cầu và Nhấn nút “See replay” để xem lại trận đấu

4 Chuyển đến trang xem lại trận đấu được chọnLuồng sự

kiện phụ Không có

Các yêu cầu

đặc biệt Đã có ít nhất một trận đấu trước đó

Điều kiện Đã đăng nhập vào trước đó

Điều kiện

sau Trang thể hiện thông tin bàn cờ của trận đấu được chọn để xem lại

Mở rộng Không có

3.1.4.10 Use-case “Tạo phòng chơi”

Mô tả Tạo một phòng chơi mới

Luồng sự kiện

Luồng sự

kiện chính

1 Nhấn vào tab “Lobbies”

2 Nhấn nút “Create lobby” để tạo phòng chơi

3.1.4.11 Use-case “Chơi với người khác”

Mô tả Tham gia vào một phòng chơi để đấu với người dùng khác

Luồng sự kiệnLuồng sự 1 Nhấn vào tab “Lobbies”

Điều kiện

sau Không có

Mở rộng Không có

3.2 Thiết kế Class

3.2.1 Sơ đồ lớp

STT Tên lớp/quan hệ Ý nghĩa/Ghi chú

1 lobbiesMessageModel Model của message phòng chơi khi tạo hoặc

xóa

2 lobbyModel Model của phòng chơi

3 lobbyMessageModel Model của message các trạng thái của phòng

chơi

4 lobbySettingModel Model của các cài đặt của phòng chơi

5 matchModel Model của các trận đấu

6 playerModel Model của các người chơi

7 requestModel Model của các request của người dùng chờ xác

nhận qua email

8 responseObjectModel Các object dùng để truyền tải dữ liệu message

9 tokenModel Các access token được tạo cho việc đăng nhập

10 userController Xử lý CRUD với người dùng

11 authenticationController Sử dụng thông tin của người dùng để xác nhận

đăng nhập, đăng ký, đăng xuất

12 lobbyController Xử lý các trạng thái của lobby

13 playerController Xử lý các thông tin của player

14 requestController Xử lý các request đổi mật khẩu và xác thực

email tài khoản

3.2.2 Danh sách các lớp đối tượng và quan hệ

3.2.3 Mô tả chi tiết từng lớp đối tượng Model

3.2.3.1 lobbiesMessageModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

3 player Chuỗi tên của người chơi

4 type Loại message enum (CREATE hoặc

REMOVE)

3.2.3.2 lobbyModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 player1 Chuỗi tên của người chơi 1

3 player2 Chuỗi tên của người chơi 2

4 player1Ready Xác định người chơi 1 đã săn sàng hay

chưa

5 player2Ready Xác định người chơi 2 đã sẵn sàng hay

chưa

6 blackPlayer Người chơi bên màu đen

7 redPlayer Người chơi bên màu đỏ

8 board Chuỗi các ô trong bàn cờ

9 moves Danh sách các bước đi được thực hiện

10 isRedTurn Xác định đến lượt bên đỏ đi

11 state Trạng thái của phòng chơi (WAITING,

PLAYING, FINISHED)

12 player1PlayAgain Xác định người chơi 1 có muốn chơi

lại hay không

13 player2PlayAgain Xác định người chơi 2 có muốn chơi

lại hay không

14 setting Object LobbySetting

15 undoRequest Request yêu cầu undo bước đi vừa thực

hiện

3.2.3.3 lobbyMessageModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

3 player Chuỗi tên của người chơi

4 data Thông tin của message

3.2.3.4 lobbySettingModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 minPerTurn Thời gian mỗi lượt đi

3 totalMin Tổng thời gian tối đa

4 isVsBot Xác định có đấu với máy

5 isPrivateLobby Xác định có là phòng riêng

3.2.3.5 matchModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 time Ngày giờ của trận đấu kết thúc

3 moves Danh sách các bước đi được thực hiện

4 victor Tên người chiến thắng

5 redPlayer Người chơi bên đỏ

6 blackPlayer Người chơi bên đen

3.2.3.6 playerModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 username UQ Tên tài khoản

9 password Mật khẩu tài khoản

10 email UQ Email tài khoản

11 validated Xác định tài khoản đã được xác thực hay

chưa

3.2.3.7 requestModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 username UQ Tên tài khoản

3 type Loại request enum (EMAIL_VERIFY

hoặc CHANGE_PASSWORD)

3.2.3.8 responseObjectModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 status Trạng thái của Object

3 statusName Trạng thái HTTP của Object

3.2.3.9 tokenModel

STT Tên thuộc tính Ràng buộc Ý nghĩa/ghi chú

2 token

3.3 Activity / Segment

3.3.1 Đăng nhập

3.3.2 Đăng ký

3.3.3 Đăng xuất

3.3.4 Đổi mật khẩu

3.3.5 Xác thực tài khoản

3.3.6 Xem thông tin tài khoản

3.3.7 Tạo phòng chơi

3.3.8 GamePlay

3.3.9 Xem lại trận đấu

3.4 Thiết kế Cơ sở dữ liệu

3.4.1 Sơ đồ logic

3.4.2 Mô tả các kiểu dữ liệu trong sơ đồ logic

3.4.2.1 Collection Player (Người chơi)

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id ObjectId Unique ID ID của document

2 username String Required, Unique Tên đăng nhập của

người dùng

9 password String Required Mật khẩu của người

dùng

10 email String Required, Unique Email của người dùng

11 Validated Boolean Đã xác thực email người

dùng hay chưa

3.4.2.2 CollectionRefreshTokens

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id ObjectId Unique ID ID của document

3 username String Required, Unique Tên đăng nhập của

người dùng

3.4.2.3 CollectionLobby (Phòng chơi)

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id ObjectId Unique ID ID của document

3 player1Ready Boolean Người chơi 1 đã sẵn

sàng hay chưa

4 player2Ready Boolean Người chơi 2 đã sẵn

sàng hay chưa

5 redPlayer String Tên người chơi bên đỏ

6 board String Chuỗi các ô trên bàn cờ

7 moves Array<String> Danh sách các bước đi

được thực hiện

8 isRedTurn Boolean Tới lượt người bên đỏ

hay không

10 player1PlayAgain Boolean Người chơi 1 muốn chơi

lại hay không

11 player2PlayAgain Boolean Người chơi 2 muốn chơi

lại hay không

3.4.2.4 SubdocumentLobbySetting

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 minPerTurn Int Thời gian mỗi lượt đi

3 isVsBot Boolean Đấu với máy hay không

4 isPrivateLobby Boolean Là phòng riêng hay

không

3.4.2.5 Collection Match (Trận đấu)

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id ObjectId Unique ID ID của document

đấu

3 moves Array<String> Danh sách các bước đi

được thực hiện

5 redPlayer String Tên người chơi bên đỏ

6 blackPlayer String Tên người chơi bên đen

3.4.2.6 Collection Request

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id ObjectId Unique ID ID của document

3 username String Required, Unique Tên đăng nhập của

người dùng

3.5 Thiết kế Kiến trúc

3.5.1 Kiến trúc hệ thống

Kiến trúc hệ thống 1: Tổng quát

Kiến trúc hệ thống 2

Kiến trúc hệ thống 3: Phía front-end

Kiến trúc hệ thống 4: Phía back-end

Thành phần Diễn giải

Model Các đối tượng mô hình hóa cho dữ liệu thể hiện ở giao diệnRow Các đối tượng ánh xạ cho một record của một bảng dữ liệuRepository Các lớp quản lý việc truy xuất database

3.5.2 Mô tả chi tiết từng thành phần trong hệ thống

3.5.2.1 Kiến trúc tổng quát

Tên lớp đối tượng Mô tả chức năng của lớp trong sơ đồ

Máy chủ (Server) Đây thường là một mánh tính đặc biệt có tốc độ xử lý lớn

và được dùng để phục vụ việc chia sẻ tài nguyên như file ảnh, file HTML, dữ liệu, máy in… cho nhiều máy khách.Máy khách (Client) Là cá máy tính nhỏ như desktop hay laptop Trong mô hình

này các máy khách sẽ gửi yêu cầu tới máy chủ để máy chủ thực hiện một nhiệm vụ nào đó như lấy dữ liệu từ database,

in ấn, gửi email…

Việc giao tiếp giữa Client với Server phải dựa trên các giao thức chuẩn Các giao

thức chuẩn được sử dụng phổ biến nhất hiện nay là: giao thức TCP/IP, giao thức

SNA của IBM, OSI, ISDN, X.25 hay giao thức LAN-to-LAN NetBIOS

Mô hình web client-server là một mô hình nổi tiếng trong mạng máy tính, được áp

dụng rất rộng rãi và là mô hình của mọi trang web hiện có Một mô hình ngược lại

là mô hình master-slaver, trong đó máy chủ (đóng vai trò ông chủ) sẽ gửi dữ liệu

đến máy con (đóng vai trò nô lệ) bất kể máy con có cần hay không

Client/Server là mô hình tổng quát nhất, trên thực tế thì một server có thể được nối tới nhiều server khác nhằm làm việc hiệu quả và nhanh hơn Khi nhận được 1 yêu

cầu từ client, server này có thể gửi tiếp yêu cầu vừa nhận được cho server khác ví

dụ như database server vì bản thân nó không thể xử lý yêu cầu này được Máy

server có thể thi hành các nhiệm vụ đơn giản hoặc phức tạp