Xây dụng game cờ vua

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM ĐỒ ÁN MÔN HỌC XÂY DỤNG GAME CỜ VUA Môn CÔNG CỤ PHÁT TRIỂN PHẦN MỀM Ngành CÔNG NGHỆ THÔNG TIN Mục lục CHƯƠNG 1 TỔNG QUAN 1 1 Giới thiệu đề tài 3 1[.]

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM

ĐỒ ÁN MÔN HỌC XÂY DỤNG GAME CỜ VUA

Mục lục

CHƯƠNG 1 TỔNG QUAN

1.1 Giới thiệu đề tài 3

1.2 Ý tưởng 3

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về HTML 4

2.1.2 Phân loại website 5

2.1.3 Cú pháp khai báo 6

2.1.4 Thuộc tính của thẻ 7

2.1.5 Ưu điểm 7

2.2 CSS 8

2.3 Javscript 9

2.3.1 Tầm quan trọng của Javscript 10

2.4 Template trong thiết kế website 11

2.4.1 Có những dạng Template nào 12

2.5 Các công nghệ được áp dụng 12

2.5.1 Front end 12

2.5.2 Các công cụ khác 12

2.5.3 Jira 14

2.5.3.1 Tính năng chính của Jira là gì? 14

2.5.3.2 Vì sao nên dùng Jira? 15

2.5.3.3Các thành phần cơ bản của Jira 15

2.5.3.4 Ưu điểm của Jira là gì? 15

1.1 Giới thiệu đề tài

Cờ vua (tiếng Anh: chess), trước kia còn được gọi là cờ quốc tế, là trò chơi quốc tế và

là môn thể htao trí tuệ cho 2 người chơi Ngày nay, cờ vua là một trong những tròchơi phổ biến nhất thế giới với hàng triệu người tại nhà riêng, trong câu lạc bộ, trựctuyến, từ xa và trong các giải đấu Trò chơi này diễn ra trên một bàn cờ hìnhvuông gồm 8 hàng (đánh số từ 1 đến 8) và 8 cột (đánh các chữ cái từ a đến h), tạo ra

64 ô hình vuông với các màu đậm và nhạt xen kẽ nhau, với mỗi người chơi sẽ có ômàu nhạt ở hàng cuối cùng bên tay phải của mình khi ngồi vào bàn chơi cờ Mỗingười sẽ bắt đầu ván cờ với 16 quân cờ và sẽ lần lượt đi các quân của mình sau khiđối phương đã đi xong một nước Các quân cờ của mỗi bên bao gồm 8 tốt, 2 mã,

2 tượng, 2 xe, 1 hậu và 1 vua Người cầm quân trắng đi đầu tiên; người cầmquân đen đi sau Các quân hậu và xe được gọi là quân nặng, còn tượng và mã đượcgọi là quân nhẹ

Truyền thống của thi đấu cờ đã xuất hiện từ thế kỉ XVI Ngày nay, cờ vua được côngnhận là một môn thể thao chính thức bởi Ủy ban Olimpic Quốc tế

Các nhà lý thuyết đã sáng tạo ra rất nhiều chiến thuật và chiến lược kể từ khi bắt đầu

có cờ vua Nhiều khía cạnh nghệ thuật cũng được tìm thấy trong cờ thế

Một trong những mục tiêu ban đầu của các nhfa khoa học máy tính là tạo nêncác máy tính biết đánh cờ vua Cờ vua ngày nay bị ảnh hưởng rõ ràng bởi các chươngtrình chơi cờ cũng như khả năng chơi cờ trực tuyến

1.2 Ý tưởng

• Thiết kế một trò chơi thân thiện

• Giao diện đơn giản, gần gũi với người chơi

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về HTML

HTML là viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn bản).HTML cho phép người dùng tạo và cấu trúc hóa các thành phần trên một trang web nhưđoạn văn, tiêu đề, liên kết, trích dẫn, bảng biểu

 Các phần tử trong HTML là các khối của trang web HTML, được đại diện bằngnhững thẻ đánh dấu (tag)

 Thẻ đánh dấu HTML chứa các nội dung như ‘paragraph’, ‘heading’, ‘table’

 Trình duyệt không hiển thị thẻ HTML nhưng dùng chúng để hiển thị nội dung củatrang

 HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý tại viện nghiên cứuCERN của Thụy Sĩ Ông đã đưa ra ý tưởng về hệ thống siêu văn bản trên Internet.Siêu văn bản nghĩa là văn bản có thể chứa liên kết đến văn bản khác mà ngườidùng có thể truy cập ngay lập tức

 Ông đã xuất bản phiên bản HTML đầu tiên vào năm 1991, bao gồm 18 thẻ HTML.Sau đó, ngôn ngữ HTML có thêm nhiều thẻ và thuộc tính mới để đánh dấu vănbản Theo tài liệu tham khảo HTML Element Reference của Mozilla DeveloperNetwork, hiện có khoảng 140 thẻ HTML, bao gồm cả một số thẻ đã lỗi thời,không còn được các trình duyệt hiện đại hỗ trợ nữa

 Một trang web là một tập tin chứa thông tin được hiển thị cho người sử dụng vàcác trang web được lưu trữ trên một máy chủ web và đảm bảo rằng luôn có sẵntrên Internet cho người sử dụng

 Máy chủ web là máy tính được sử dụng để lưu trữ, xử lý và trả kết quả về phíaclient để hiển thị trên trình duyệt Và trình duyệt web hiển thị các trang web sửdụng giao thức HTTP/HTTPS

2.1.2 Phân loại website

• Cấu trúc một trang web với html

Kết quả hiển thị trên trình duyệt

2.1.3 Cú pháp khai báo

2.1.4 Thuộc tính của thẻ

 Các thẻ HTML có thể có thuộc tính

 Thuộc tính cung cấp thêm thông tin cho thẻ

 Thuộc tính luôn luôn được chỉ định trong thẻ mở

 Cách khai báo thuộc tính: name=”value”

2.1.5 Ưu điểm

Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng

sử dụng cực lớn

Sử dụng mượt mà trên hầu hết mọi trình duyệt

Có quá trình học đơn giản và trực tiếp

Mã nguồn mở và hoàn toàn miễn phí

Markup gọn gàng và đồng nhất

Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C)

Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js

2.2 CSS

CSS viết tắt của từ Cascading Style Sheets, được dùng để trang trí, định dạng, bố

cục cho trang web, không có ý nghĩa trong việc thể hiện nội dung

CSS là một file có phần mở rộng là.css, nhiệm vụ của nó là tách riêng phần định dạng(style) ra khỏi nội dung trang HTML

Khi sử dụng CSS chúng ta sẽ dễ dàng quản lý nội dung trang HTML, dễ điềukhiển phần định dạng, và đặc biệt là sẽ tốn ít thời gian khi code hay chỉnh sửa, giả sử cácbạn có ~100 file HTML có tiêu đề như nhau, và bạn muốn tất cả các trang HTML này cótiêu đề được thay đổi sang màu xanh, thì CSS sẽ thực hiện việc thay đổi này chỉ với 1dòng code

 CSS là viết tắt của Cascading Style Sheets

 CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiệnkhác

 CSS rất hữu ích và tiện lợi Nó có thể kiểm soát tất cả các trang trên một website

 Các stylesheet ngoài được lưu trữ dưới dạng các tập tin CSS

Cú pháp cơ bản

Ví dụ :

2.3 Javscript

- JavaScript (viết tắt là JS) là một ngôn ngữ lập trình kịch bản phía máy khách, mã lệnh

được thực thi bởi trình duyệt của người dùng

- JavaScript được sử dụng rộng rãi trong việc kết hợp với HTML/CSS để thiết kế webđộng

JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như: Array, Date, và Math,

và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử (operators), cấu trúc điều khiển(control structures), và câu lệnh JavaScript có thể được mở rộng cho nhiều mục đích bằngviệc bổ sung thêm các object; ví dụ:

 Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở rộng bằng

cách cung cấp các object để quản lý trình duyệt và Document Object Model(DOM) của nó Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tácđộng tới các yếu tố trên một trang HTML và phản hồi giống các tác động củangười dùng như click chuột, nhập form, và chuyển trang

 Server-side JavaScript - JavaScript phía Server, JavaScript được mở rộng bằng

cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy chủ Ví

dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu(database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác củaứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ

 JavaScript và Java thì giống nhau ở những cái này nhưng lại khác nhau ở cái khác.Ngôn ngữ JavaScript có lẽ giống giống với ngôn ngữ Java nhưng JavaScript không

có khai báo static cũng như không có "tính mạnh về kiểu" (strong type checking)như Java Cú pháp (syntax) lập trình, đặt tên công thức và xây dựng điều khiển lưu

lượng (control-flow) cơ bản của JavaScript phần lớn dựa theo ngôn ngữ lập trìnhJava, đó cũng là lý do tại sao JavaScript được đổi tên từ LiveScript thànhJavaScript.

 Ngược lại với hệ thống thời gian biên dịch (compile-time) Java của các lớp đượcxây dựng bởi các khai báo, JavaScript hỗ trợ nền tảng hệ thống thời gianchạy dựa trên một số lượng nhỏ các loại dữ liệu đại diện cho số, boolean và dữ liệucác chuỗi JavaScript có một mô hình ít phổ biến hơn là mô hình đối tượng dựa trênnguyên mẫu (prototype-based) thay vì các mô hình đối tượng dựa trên lớp (class-based) Các mô hình dựa trên nguyên mẫu cung cấp khả năng thừa kế năngđộng; nghĩa là, những gì được kế thừa có thể khác nhau cho các đối tượng khácnhau JavaScript cũng hỗ trợ các phương thức (function) không khai báo bất cứ gì

ở trỏng Phương thức có thể là một trong các thuộc tính (property) của các đốitượng, thực thi như là một phương thức đã được định kiểu (loosely typed methods)

 JavaScript là một ngôn ngữ rất tự do so với Java Bạn có thể không cần khai báo tất

cả biến (variable), lớp (class) và cả phương thức (method) Bạn không cần quantâm cho dù phương thức đó là public, private hoặc protected, và bạn không cầnphải implement interfaces Biến, tham số (parameters), và kiểu trả về của phươngthức (function return) cũng không cần phải rõ ràng



- JavaScript là một ngôn ngữ lập trình phổ biến bậc nhất thế giới và là một trong ba ngônngữ không thể thiếu đối với một lập trình viên web.

- Cũng như các bạn đã thấy qua những ví dụ phía trên, JavaScript đã mang đến cho chúng

ta những gì Nếu một trang web mà không có JavaScript thì trang web đó thật sự là rấtnhàm chán và vô vị

- Cũng như các bạn đã thấy qua những ví dụ phía trên, JavaScript đã mang đến cho chúng

ta những gì Nếu một trang web mà không có JavaScript thì trang web đó thật sự là rấtnhàm chán và vô vị

2.4 Template trong thiết kế website

Template trong thiết kế Web là một hoặc nhiều bố cục trang đơn thường có tên gọi ngắn

là theme (chủ đề hay giao diện)

Trong thiết kế Website, các template có thể hiểu là các mẫu Web đã có sẵn được sửdụng để chỉ định cho một kiểu Giao diện hay một loại trang Website cụ thể

Nó kiểu như các Website đã được xây dựng hết kích thức phần thông tin, hình ảnh,sidebar… bạn chỉ cần tải thông tin lên là thành một trang Website hoàn chỉnh

Template trong thiết kế Website khá nhiều loại, đa dạng, được các nhà thiết kế đăng tải

và bán liên tục trên các trang bán template, chỉ với ngân sách từ 20$ – 50$, bạn có thể tìm

thấy hàng ngàn mẫu bố cục và giao diện Website có sẵn theo lĩnh vực mà mình mongmuốn.

Và, việc sử dụng các nguồn template đã có sẵn cũng mang lại một vài ích lợi cho công

ty và đơn vị thiết kế Website như:

 Tiết kiệm thời gian thực hiện (chỉ cần chỉnh sửa và thay đổi các yếu tố nộidung cho phù hợp)

 Tiết kiệm chi phí (chỉ tốn phí mua template + công chỉnh sửa)

 Không phải tự nghĩ ra ý tưởng cho tất cả trang Web

 Không phải thiết kế lại từ đầu

 Sở hữu nhiều tính năng, kiểu bố cục thú vị và độc đáo

 Cập nhật được các xu hướng thiết kế Website mới nhất

2.5 Các công nghệ được áp dụng

2.5.1 Front end

Ngôn ngữ : HTML , CSS , Javascript

Hình 2.1 Quản lí source code Github

Hình 2.2 Commit của dự án

Hình 2.3 Commit dự án trong Github Desktop

2.5.3 Jira

Jira là một ứng dụng theo dõi và quản lý lỗi, vấn đề và dự án, được phát triển để làm quy trình này trở nên dễ dàng hơn cho mọi tổ chức JIRA đã được thiết kế với trọng tâm vào kết quả công việc, có thể sử dụng ngay và linh hoạt khi sử dụng.

2.5.3.1 Tính năng chính của Jira là gì?

 Quản lý, theo dõi tiến độ của dự án

2.5.3.2 Vì sao nên dùng Jira?

 Dễ dàng lựa chọn nhiều loại dự án với các mục đích khác nhau

 Dễ dàng lên kế hoạch, phân chia nhiệm vụ cho các thành viên

 Tạo ra quy trình làm việc hiệu quả

 Dễ dàng quản lý nhiều dự án phần mềm cùng lúc

 Bộ lọc JIRA Query Language giúp tìm kiếm nhanh chóng

 Dễ dàng đưa ra các báo cáo phân tích tình hình dự án một cách nhanh chóng, chính xác và hiệu quả

 Hơn 950 add-on mang đến các tính năng nâng cao

 Giao diện thân thiện, rõ ràng, dễ thao tác, thích hợp với mọi đối tượng người sử dụng.



2.5.3.3 Các thành phần cơ bản của Jira

 Roles: Xác lập các role của dự án, Mục này xác nhận ai tham gia vào dự án, những người add vào role thì mới có thể tạo Resource Allocation và project team sau này Nhiều người

có thể vào 1 role.

 Issue: là các tasks, các bugs, các features hay bất kỳ các type khác của project work

 Project: Chức năng này dùng để phân quyền approve worklog cho thành viên của dự án.

Ai là team lead của group nào thì sẽ được approve worklog cho member của group đó Project management được quyền approve cho toàn bộ thành viên dự án C

 Component là sản phẩm của dự án Ở đây sẽ nhập tất cả sản phẩm của dự án lấy từ file kế hoạch doanh số Nếu dự án làm theo Scrum thì sẽ là Product của Sprint tương ứng.

 Workflow: Là một quản trị JIRA, bạn có thể cấu hình gây nên quy trình làm việc, điều kiện, xác nhận, và sau chức năng Trang này sẽ cung cấp một cái nhìn tổng quan và các bước cơ bản cho từng phần của công việc của bạn

 Priority: Là mức độ ưu tiên của một defect Có 4 mức , chọn theo datalist

 Status: Đại diện cho các vị trí của vấn đề trong workflow

 Resolution

2.5.3.4 Ưu điểm của Jira là gì?

 Jira có chức năng phân quyền cực kỳ chi tiết, không chỉ phân quyền trong dự án chung, mà còn phân quyền đối với từng nhiệm vụ, giúp team công nghệ bảo vệ thông tin độc quyền của mình.

 Dễ dàng tích hợp với các hệ thống khác (như Email, Excel, RSS,…)

 Hệ thống module và bộ công cụ phát triển bổ trợ cho phép tùy biến, mở rộng và tích hợp Jira vào trong hệ thống hiện tại

 Jira được phát triển sử dụng chuẩn HTML và được thử nghiệm với tất cả các trình duyệt phổ biến hiện nay.

 Có thể chạy trên hầu hết các nền tảng phần cứng, hệ điều hành và cơ sở dữ liệu

 Mỗi màn hình trong Jira có một phiên bản có thể in đảm bảo việc luân chuyển bản cứng một cách dễ dàng

 Có thể tích hợp trực tiếp với code trên môi trường phát triển, là một công cụ hoàn toàn phù hợp với các developer

2.5.3.5 Nhược điểm của Jira là gì?

 Chi phí cao, sau 7 ngày dùng thử thì doanh nghiệp càng có quy mô lớn thì càng tốn nhiều chi phí: $10 mỗi tháng dành cho tối đa 10 tài khoản; từ 11-100 tài khoản là $7/tài khoản/tháng

 Tốn nhiều thời gian và công sức để setup nên chỉ phát huy tối ưu hiệu quả với dự án lớn, không phù hợp với dự án vừa và nhỏ (dưới 3 tháng)

 Ngôn ngữ tiếng Anh với nhiều thuật ngữ khó sử dụng

 Quy trình làm việc phức tạp đòi hỏi phải tìm hiểu kỹ lưỡng

Tóm lại, Jira là một phần mềm quản lý dự án khá đặc thù, đây sẽ là lựa chọn hoàn hảo cho các team làm việc theo phương pháp Agile, đặc biệt là các team công nghệ hoặc phát triển phần mềm.

2.5.3.6 Các thuật ngữ cần biết khi sử dụng Jira

Jira là phần mềm với khá nhiều thuật ngữ công nghệ:

 Sprint: Một vòng lặp ngắn hạn (lý tưởng là 2-4 tuần) mà đội phát triển thực hiện đầy đủ

các công việc cần thiết như lập kế hoạch, phân tích yêu cầu, thiết kế, triển khai để cho ra các phần nhỏ của sản phẩm.

trong khi đó một bảng Kanban thường có một quy trình làm việc ba bước: To do, In Progress, và Done).



Hình 2.4 Phân quyền trong Jira

CHƯƠNG 3 KẾT QUẢ THỰC NGHIỆM 3.1 Giao diện

Hình 3.1 Giao diện chơi game

Hình 3.2 Giao diện khi chơi game