CÔNG CỤ PHÁT TRIỂN PHẦN MỀM: thiết kế 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 Giảng viên hướng dẫn : Sinh viên thực : Nguyễn Thành Nhân MSSV : 1711060952 Lớp : 17DTHA5 Trần Hoài Nam MSSV : 1711061119 Lớp : 17DTHA5 Trần Phúc Hậu MSSV : 1711061058 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 Mục lục CHƯƠNG TỔNG QUAN 1.1 Giới thiệu đề tài Cờ vua (tiếng Anh: chess), trước gọi cờ quốc tế, trị chơi quốc tế mơn thể htao trí tuệ cho người chơi Ngày nay, cờ vua trò chơi phổ biến giới với hàng triệu người nhà riêng, câu lạc bộ, trực tuyến, từ xa giải đấu Trò chơi diễn bàn cờ hình vng gồm hàng (đánh số từ đến 8) cột (đánh chữ từ a đến h), tạo 64 hình vng với màu đậm nhạt xen kẽ nhau, với người chơi có màu nhạt hàng cuối bên tay phải ngồi vào bàn chơi cờ Mỗi người bắt đầu ván cờ với 16 quân cờ quân sau đối phương xong nước Các quân cờ bên bao gồm tốt, mã, tượng, xe, hậu vua Người cầm quân trắng đầu tiên; người cầm quân đen sau Các quân hậu xe gọi quân nặng, tượng mã gọi quân nhẹ Truyền thống thi đấu cờ xuất từ kỉ XVI Ngày nay, cờ vua cơng nhận mơn thể thao thức Ủy ban Olimpic Quốc tế Các nhà lý thuyết sáng tạo nhiều chiến thuật chiến lược kể từ bắt đầu có cờ vua Nhiều khía cạnh nghệ thuật tìm thấy cờ Một mục tiêu ban đầu nhfa khoa học máy tính tạo nên máy tính biết đánh cờ vua Cờ vua ngày bị ảnh hưởng rõ ràng chương trình chơi cờ khả chơi cờ trực tuyến 1.2 Ý tưởng • Thiết kế 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 CƠ SỞ LÝ THUYẾT 2.1 Tổng quan HTML HTML viết tắt 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 cấu trúc hóa thành phần trang web đoạn văn, tiêu đề, liên kết, trích dẫn, bảng biểu • • • Các phần tử HTML khối trang web HTML, đại diện thẻ đánh dấu (tag) Thẻ đánh dấu HTML chứa nội dung ‘paragraph’, ‘heading’, ‘table’ Trình duyệt khơng hiển thị thẻ HTML dùng chúng để hiển thị nội dung trang • HTML tạo Tim Berners-Lee, nhà vật lý viện nghiên cứu CERN Thụy Sĩ Ông đưa ý tưởng hệ thống siêu văn Internet Siêu văn nghĩa văn chứa liên kết đến văn khác mà người dùng truy cập • Ơng xuất phiên HTML vào năm 1991, bao gồm 18 thẻ HTML Sau đó, ngơn ngữ HTML có thêm nhiều thẻ thuộc tính để đánh dấu văn Theo tài liệu tham khảo HTML Element Reference Mozilla Developer Network, có khoảng 140 thẻ HTML, bao gồm số thẻ lỗi thời, khơng cịn trình duyệt đại hỗ trợ • Một trang web tập tin chứa thông tin hiển thị cho người sử dụng trang web lưu trữ máy chủ web đảm bảo ln có sẵn Internet cho người sử dụng • Máy chủ web máy tính sử dụng để lưu trữ, xử lý trả kết phía client để hiển thị trình duyệt Và trình duyệt web hiển thị trang web sử dụng giao thức HTTP/HTTPS 2.1.2 Phân loại website 1/ Website tĩnh Là website khơng có phần quản trị nội dung Nội dung trang web định trình thiết kế Thiết kế website tĩnh sử dụng HTML (HTML = Hyper Text Markup Language), JavaScript CSS 2/ Website động Là website có phần quản trị nội dung Nội dung trang web tạo mới, cập nhật xoá dựa vào phần quản trị Thiết kế website động sử dụng HTML, JavaScript, CSS, ngơn ngữ lập trình web (PHP, Java, DotNet,…) sở liệu • Cấu trúc trang web với html Kết hiển thị trình duyệt 2.1.3 Cú pháp khai báo 2.1.4 Thuộc tính thẻ • Các thẻ HTML có thuộc tính • Thuộc tính cung cấp thêm thơng tin cho thẻ • Thuộc tính ln ln định thẻ mở • Cách khai báo thuộc tính: name=”value” 2.1.5 Ưu điểm Ngôn ngữ sử dụng rộng lớn có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng cực lớn Sử dụng mượt mà hầu hết trình duyệt Có q trình học đơn giản trực tiếp Mã nguồn mở hồn tồn miễn phí Markup gọn gàng đồng Chuẩn web vận hành World Wide Web Consortium (W3C) Dễ dàng tích hợp với ngơn ngữ backend PHP Node.js 2.2 CSS CSS viết tắt từ Cascading Style Sheets, dùng để trang trí, định dạng, bố cục cho trang web, khơng có ý nghĩa việc thể nội dung CSS file có phần mở rộng là.css, nhiệm vụ tách riêng phần định dạng (style) khỏi nội dung trang HTML Khi sử dụng CSS dễ dàng quản lý nội dung trang HTML, dễ điều khiển phần định dạng, đặc biệt tốn thời gian code hay chỉnh sửa, giả sử bạn có ~100 file HTML có tiêu đề nhau, bạn muốn tất trang HTML có tiêu đề thay đổi sang màu xanh, CSS thực việc thay đổi với dịng code • • • • CSS viết tắt Cascading Style Sheets CSS mô tả cách phần tử HTML hiển thị hình phương tiện khác CSS hữu ích tiện lợi Nó kiểm sốt tất trang website Các stylesheet lưu trữ dạng tập tin CSS Cú pháp Ví dụ : 2.3 Javscript - JavaScript (viết tắt JS) ngơn ngữ lập trình kịch phía máy khách, mã lệnh thực thi trình duyệt người dùng - JavaScript sử dụng rộng rãi việc kết hợp với HTML/CSS để thiết kế web động JavaScript chứa thư viện tiêu chuẩn cho object, ví dụ như: Array, Date, Math, yếu tố cốt lõi ngơn ngữ lập trình như: toán tử (operators), cấu trúc điều khiển (control structures), câu lệnh JavaScript mở rộng cho nhiều mục đích việc bổ sung thêm object; ví dụ: • • Client-side JavaScript - JavaScript phía máy khách, JavaScript mở rộng cách cung cấp object để quản lý trình duyệt Document Object Model (DOM) Ví dụ, phần mở rộng phía máy khách cho phép ứng dụng tác động tới yếu tố trang HTML phản hồi giống tác động người dùng click chuột, nhập form, chuyển trang Server-side JavaScript - JavaScript phía Server, JavaScript mở rộng cách cung cấp thêm đối tượng cần thiết để để chạy JavaScript máy chủ Ví dụ, phần mở rộng phía server cho phép ứng dụng kết nối với sở liệu (database), cung cấp thông tin cách liên tục từ yêu cầu tới phần khác ứng dụng, thực thao tác với tập tin máy chủ • JavaScript Java giống lại khác khác Ngôn ngữ JavaScript có lẽ giống giống với ngơn ngữ Java JavaScript khơng có khai báo static khơng có "tính mạnh kiểu" (strong type checking) Java Cú pháp (syntax) lập trình, đặt tên cơng thức xây dựng điều khiển lưu lượng (control-flow) JavaScript phần lớn dựa theo ngơn ngữ lập trình Java, lý JavaScript đổ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 lớp xây dựng khai báo, JavaScript hỗ trợ tảng hệ thống thời gian chạy dựa số lượng nhỏ loại liệu đại diện cho số, boolean liệu chuỗi JavaScript có mơ hình phổ biến mơ hình đối tượng dựa ngun mẫu (prototype-based) thay mơ hình đối tượng dựa lớp (classbased) Các mơ hình dựa nguyên mẫu cung cấp khả thừa kế động; nghĩa là, kế thừa khác cho đối tượng khác JavaScript hỗ trợ phương thức (function) không khai báo Phương thức thuộc tính (property) đối tượng, thực thi phương thức định kiểu (loosely typed methods) • JavaScript ngơn ngữ tự so với Java Bạn khơng cần khai báo tất biến (variable), lớp (class) phương thức (method) Bạn không cần quan tâm cho dù phương thức public, private protected, bạn không cần phải implement interfaces Biến, tham số (parameters), kiểu trả phương thức (function return) khơng cần phải rõ ràng • 10 2.3.1 Tầm quan trọng Javscript - JavaScript ngôn ngữ lập trình phổ biến bậc giới ba ngôn ngữ thiếu lập trình viên web o HTML o CSS o JavaScript - Cũng bạn thấy qua ví dụ phía trên, JavaScript mang đến cho Nếu trang web mà khơng có JavaScript trang web thật nhàm chán vô vị 2.3.2 Hạn chế Javascript - JavaScript ngơn ngữ lập trình phổ biến bậc giới ba ngôn ngữ khơng thể thiếu lập trình viên web o HTML o CSS o JavaScript - Cũng bạn thấy qua ví dụ phía trên, JavaScript mang đến cho Nếu trang web mà khơng có JavaScript trang web thật nhàm chán vô vị 11 2.4 Template thiết kế website Template thiết kế Web nhiều bố cục trang đơn thường có tên gọi ngắn theme (chủ đề hay giao diện) Trong thiết kế Website, template hiểu mẫu Web có sẵn sử dụng để định cho kiểu Giao diện hay loại trang Website cụ thể         Nó kiểu Website xây dựng hết kích thức phần thơng tin, hình ảnh, sidebar… bạn cần tải thông tin lên thành trang Website hoàn chỉnh Template thiết kế Website nhiều loại, đa dạng, nhà thiết kế đăng tải bán liên tục trang bán template, với ngân sách từ 20$ – 50$, bạn tìm thấy hàng ngàn mẫu bố cục giao diện Website có sẵn theo lĩnh vực mà mong muốn Và, việc sử dụng nguồn template có sẵn mang lại vài ích lợi cho công ty đơn vị thiết kế Website như: Tiết kiệm thời gian thực (chỉ cần chỉnh sửa thay đổi 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ĩ ý tưởng cho tất 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ị độc đáo Cập nhật xu hướng thiết kế Website Sản phẩm đảm bảo Có nhiều mẫu mã đa dạng để lựa chọn 12 2.4.1 Có dạng Template Thường Template dùng cho nhiều trang Website khác Và trang Website dùng nhiều Template khơng giống cho Nếu để ý kỹ chút bạn thấy trang Website bán hàng giới thiệu doanh nghiệp chứa nhiều Template khác nhau, thiết kế theo nhiều dạng khác nhau, với màu sắc không giống nhau, xếp cách khác nhau, với thông tin khác nhau… 13 2.5 Các công nghệ á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 14 15 Github Hình 2.1 Quản lí source code Github Hình 2.2 Commit dự án 16 CHƯƠNG 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 chơi game 17 CHƯƠNG KẾT LUẬN 4.1 Kết đạt Xây dựng trò chơi đơn giản với người chơi, xây dựng chức đề Hiểu cách sử dụng công cụ Git để quản lí dự án làm việc với mơ hình nhóm 18 ... tìm thấy cờ Một mục tiêu ban đầu nhfa khoa học máy tính tạo nên máy tính biết đánh cờ vua Cờ vua ngày bị ảnh hưởng rõ ràng chương trình chơi cờ khả chơi cờ trực tuyến 1.2 Ý tưởng • Thiết kế trị... nhàm chán vô vị 11 2.4 Template thiết kế website Template thiết kế Web nhiều bố cục trang đơn thường có tên gọi ngắn theme (chủ đề hay giao diện) Trong thiết kế Website, template hiểu mẫu Web... thống thi đấu cờ xuất từ kỉ XVI Ngày nay, cờ vua công nhận mơn thể thao thức Ủy ban Olimpic Quốc tế Các nhà lý thuyết sáng tạo nhiều chiến thuật chiến lược kể từ bắt đầu có cờ vua Nhiều khía