Thiết kế website động sử dụng HTML, JavaScript, CSS, ngôn ngữ lập trình web PHP, Java, DotNet,… và cơ sở dữ liệu • Cấu trúc một trang web với html Kết quả hiển thị trên trình duyệt... 2.
Trang 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
Giảng viên hướng dẫn :
Sinh viên thực hiện :
Nguyễn Thành Nhân MSSV : 1711060952 Lớp : 17DTHA5
Huỳnh Hiếu Anh MSSV : 1711060009 Lớp : 17DTHA5
Trần Gia Huy MSSV : 1711060140 Lớp : 17DTHA5
Tp.Hồ Chí Minh, 2021
Trang 2Mục lục
CHƯƠNG 1 TỔNG QUAN
1.1Giớ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ực tuyế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ình vuô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ỗi ngườ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ầm quâ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ã được gọ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ông nhậ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ế.
Trang 3Mộ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ên cá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ương trì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ằng nhữ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ủa trang
• HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý tại viện nghiên cứu CERN 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ười
Trang 4• Ô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ăn bản Theo tài liệu tham khảo HTML Element Reference của Mozilla Developer Network, 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ẵn trê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ía client để 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
1/ Website tĩnh
Là những website không có phần quản trị nội dung Nội dung trang web được chỉ định trong quá trình thiết kế
Trang 5Thiết kế website tĩnh sử dụng HTML (HTML = Hyper Text Markup
Language), JavaScript và CSS
2/ Website động
Là website có phần quản trị nội dung Nội dung trang web được tạo mới, cập nhật hoặc xoá dựa vào phần quản trị này
Thiết kế website động sử dụng HTML, JavaScript, CSS, ngôn ngữ lập trình web (PHP, Java, DotNet,…) và cơ sở dữ liệu
• Cấu trúc một trang web với html
Kết quả hiển thị trên trình duyệt
Trang 62.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
Trang 7Có 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ều khiể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ác bạ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 1 dò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ện khá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
Trang 8Cú 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
Trang 9- 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ằng việ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ủa ngườ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ình Java, đó cũng là lý do tại sao JavaScript được đổi tên từ LiveScript thành
JavaScript
• 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 được xây dựng bởi các khai báo, JavaScript hỗ trợ nền tảng hệ thống thời gian
chạ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ệu cá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ên nguyê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ác nhau 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 đối tượ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 quan tâm cho dù phương thức đó là public, private hoặc protected, và bạn không cần
Trang 10phải implement interfaces Biến, tham số (parameters), và kiểu trả về của phương thức (function return) cũng không cần phải rõ ràng
•
Trang 112.3.1 Tầm quan trọng của Javscript
- 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ôn ngữ 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ất nhàm chán và vô vị
2.3.2 Hạn chế của Javascript
- 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ôn ngữ 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ất nhàm chán và vô vị
Trang 122.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 mong muố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ội dung 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
Có rất nhiều mẫu mã đa dạng để lựa chọn
Trang 132.4.1 Có những dạng Template nào
Thường thì 1 Template được dùng cho nhiều trang Website khác nhau Và 1 trang Website cũng có thể dùng nhiều Template không giống nhau cho mình
Nếu để ý kỹ một chút thì bạn sẽ thấy 1 trang Website bán hàng hoặc giới thiệu về doanh nghiệp sẽ chứa rất nhiều Template khác nhau, và được thiết kế theo nhiều dạng khác nhau, với những màu sắc không giống nhau, được sắp xếp 1 cách khác nhau, cùng với thông tin khác nhau…
Trang 142.5 Các công nghệ được áp dụng
2.5.1 Front end
Ngôn ngữ : HTML , CSS , Javascript
2.5.2 Các công cụ khác
Thiết kế giao diện với Balsamiq
Trang 16Hình 2.1 Quản lí source code Github
Hình 2.2 Commit của dự án
Trang 17CHƯƠNG 3 KẾT QUẢ THỰC NGHIỆM
3.1 Giao diện
Hình 3.1 Giao diện chơi game
Trang 18CHƯƠNG 4 KẾT LUẬN
4.1 Kết quả đạt được
Xây dựng được trò chơi đơn giản với người chơi, xây dựng được các chức năng đề ra Hiểu được cơ bản cách sử dụng công cụ Git để quản lí 1 dự án khi làm việc với mô hình nhóm