(Tiểu luận) tiểu luận báo cáo môn học lập trình hướng đối tượng

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH TẾ - KỸ THUẬT BÌNH DƯƠNG KHOA KỸ THUẬT - CƠNG NGHỆ TIỂU LUẬN BÁO CÁO MƠN HỌC LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG NHÓM SINH VIÊN THỰC HIỆN: NGUYỄN MẬU TÂM ĐINH NGỌC TÀI HỒ THỊ NHÃ VY NGUYỄN LÊ THANH HIỀN TRẦN ĐỒNG NGHIỆP GIẢNG VIÊN HƯỚNG DẪN THS TRƯƠNG NGUYỄN TRÙNG DƯƠNG Bình Dương, ngày 06 tháng 06 năm 2023 DANH SÁCH THÀNH VIÊN NHÓM MỨC S NỘI HỌ TÊN TT ĐỘ MSSV GH DUNG THỰC HOÀN I CHÚ HIỆN THÀNH Nguyễn Lê Thanh D20C01A 1338 Lên ý tưởng nhân vật, bối cảnh 80% D20C01A 1326 Lên ý tưởng nhân vật, bối cảnh 80% D20C01A 7369 Lập trình 100% Hiền Trần Đồng Nghiệp Đinh Ngọc Tài Nh D20C01A 1303 Lập trình, Báo cáo 100% D20C01A 1460 Lên ý tưởng nhân vật, bối cảnh 80% Nguyễn Mậu Tâm Hồ Thị Nhã Vy óm trưởng Lập trình hướng đối tượng Nhóm LỜI NĨI ĐẦU Trên giới Việt Nam, công nghệ thông tin trở thành cơng nghệ mũi nhọn, ngành công nghiệp kỹ thuật thiết việc áp dụng vào hoạt động xã hội như: hoạt động quản lý hệ thống, kinh doanh, hoạt động nghiên cứu, … đặc biệt lĩnh vực game – lĩnh vực phát triển mạnh Ở nước ta nay, việc xây dựng ứng dụng game khơng cịn xa lạ, để tạo game hay chất lượng vấn đề không dễ Đây vấn đề nan giải, để xây dựng game đạt chất lượng ngồi việc người lập trình, cần phải hiểu, hoạch định phân tích tối ưu vai trị chức hệ thống thơng tin Game có tên Flexbox Owlet, hai tựa game tạo nên từ sáng tạo, kết hợp việc học giải trí đơn giản tạo nên game đặc biệt Ý tưởng trị chơi sử dụng phương pháp trò chơi để thúc đẩy tương tác, tham gia việc áp dụng kiến thức trình học tập Game mang phong cách độc lạ với kiểu chơi 2d Với mục tiêu giúp bạn trẻ muốn tìm hiểu Flexbox Mặc dù cố gắng để hồn thành cơng việc, thời gian có hạn thiết kinh nghiệm kỹ cịn nhiều thiếu sót nên việc phân tích thiết kế cịn nhiều thiếu sót, kính mong q thầy cơ, bổ sung để nhóm hồn thiện cho đồ án tốt Lập trình hướng đối tượng Nhóm MỤC LỤC MỞ ĐẦU CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Mô tả game 1.2 Yêu cầu sản phẩm CHƯƠNG II: CƠ SỞ LÝ THUYẾT 2.1 Nền tảng Công nghệ 2.2 Mơ hình thiết kế .5 CHƯƠNG III: PHÂN TÍCH 3.1 Gameplay .8 3.2 Source code 11  Index.html 11  Style.css 17  Docs.js 41  Game.js 43  Levels.js 64  Messages.js .79 CHƯƠNG IV: KẾT LUẬN 82 TÀI LIỆU THAM KHẢO Lập trình hướng đối tượng Nhóm DANH MỤC HÌNH ẢN Hình 1: Flexbox Owlet Hình 2: Hoàn thành cấp độ Hình 3: Ngơn ngữ lập trình Hình 4: Giao diện Hình 5: Kiểm tra Hình 6: Vượt thử thách Hình 7: Các cấp độ 10 Hình 8: Folder file .11 Lập trình hướng đối tượng Nhóm NHẬN XÉT CỦA GIÁO VIÊN Bình Dương, ngày….tháng….năm 20… Giảng viên ThS.Trương Nguyễn Trùng Dương Lập trình hướng đối tượng Mở đầu MỞ ĐẦU I Lý chọn đề tài Trong giới phát triển web đại, CSS Flexbox trở thành phương pháp mạnh mẽ để tạo giao diện linh hoạt đáp ứng Flexbox giúp kiểm soát hiển thị xếp phần tử trang web cách dễ dàng hiệu Tuy nhiên, việc hiểu làm quen với thuộc tính khả Flexbox gặp khó khăn người học CSS chí người có kinh nghiệm Trong báo cáo này, giới thiệu Flexbox Game - cơng cụ hữu ích thú vị để tìm hiểu CSS Flexbox Flexbox Game cung cấp mơi trường tương tác trị chơi giúp người dùng rèn luyện nắm vững kiến thức Flexbox thông qua việc thực hành giải tập II Mục tiêu nghiên cứu Giới thiệu CSS Flexbox: Chúng ta tổng quan khái niệm lợi ích CSS Flexbox, đồng thời đưa số ví dụ cách Flexbox áp dụng để tạo giao diện đáp ứng Giới thiệu Flexbox Game: Chúng ta khám phá Flexbox Game tính bật Sự tương tác cách thức hoạt động trò chơi trình bày chi tiết Trải nghiệm học tập thơng qua Flexbox Game: Chúng ta tìm hiểu cấp độ tập Flexbox Game, với cách thức giúp người dùng nắm vững rèn luyện kỹ sử dụng Flexbox Lợi ích ứng dụng Flexbox Game: Chúng ta xem xét lợi ích mà Flexbox Game mang lại việc học Flexbox, khả ứng dụng kiến thức học dự án phát triển thực tế Nhóm 1 Lập trình hướng đối tượng Chương I: Tổng quan đề tài CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Mô tả game Flexbox Owlet trò chơi trực tuyến tạo để giúp người học hiểu nắm vững cách sử dụng Flexbox CSS Flexbox mơ hình kiểu bố trí CSS cho phép linh hoạt dễ dàng xếp phần tử khung (container) điều chỉnh chúng theo quy tắc xếp chồng chỉnh Hình 1: Flexbox Owlet Trong Flexbox Owlet, người chơi đưa vào giao diện trực quan với thử thách tập liên quan đến sử dụng Flexbox Mục tiêu người chơi sử dụng thuộc tính giá trị Flexbox cách để xếp chồng chỉnh phần tử theo yêu cầu tập Trò chơi cung cấp hướng dẫn gợi ý để giúp người chơi tiếp cận hiểu cách hoạt động Flexbox Người chơi thử nghiệm thay đổi giá trị thuộc tính Flexbox “display”, “flex-direction”, “justify-content”, “align-items”, “flex-wrap” để xem thay đổi bố cục vị trí phần tử Qua việc hồn thành cấp độ thử thách trò chơi, người chơi nắm vững kiến thức Flexbox có khả áp dụng vào dự án thực tế Flexbox Owlet không giúp người học rèn kỹ sử dụng Flexbox mà cịn mang tính giải trí thú vị tương tác với thử thách tập Nhóm Lập trình hướng đối tượng Chương I: Tổng quan đề tài Hình 2: Hoàn thành cấp độ 1.2 Yêu cầu sản phẩm Giao diện trực quan: Trò chơi nên có giao diện thân thiện hấp dẫn với phần tử trực quan hình ảnh, biểu đồ, biểu đồ gantt để thể bố cục vị trí phần tử Thử thách tập: Trò chơi nên cung cấp loạt thử thách tập, từ dễ đến khó, để người chơi thực hành sử dụng Flexbox Các thử thách yêu cầu người chơi xếp chồng chỉnh phần tử theo yêu cầu cụ thể Hướng dẫn gợi ý: Trò chơi nên cung cấp hướng dẫn chi tiết gợi ý để giúp người chơi tiếp cận hiểu cách sử dụng thuộc tính giá trị Flexbox Hướng dẫn nên giải thích khái niệm cung cấp ví dụ minh họa Phản hồi điểm số: Trò chơi nên cung cấp phản hồi tức hiệu suất độ xác người chơi Người chơi nên nhận điểm số đánh giá dựa hiệu suất họ việc hoàn thách tập Đa cấp độ: Trị chơi nên có nhiều cấp độ khác để người chơi tiến từ đến nâng cao Các cấp độ nên có độ khó tăng dần yêu cầu người chơi áp dụng khái niệm Flexbox phức tạp Lưu trữ tiến trình: Trị chơi nên cung cấp khả lưu trữ tải lại tiến trình người chơi Điều cho phép người chơi tiếp tục từ nơi họ dừng lại giúp theo dõi tiến họ q trình học Nhóm Lập trình hướng đối tượng Chương I: Tổng quan đề tài Thông tin bổ sung: Trị chơi bổ sung thơng tin hữu ích tài liệu tham khảo, ví dụ mã nguồn liên kết đến tài liệu học tập bổ sung để người chơi nghiên cứu thêm sau hồn thành trị chơi Nhóm Lập trình hướng đối tượng Chương II: Cơ sở lý thuyết CHƯƠNG II: CƠ SỞ LÝ THUYẾT 2.1 a) Nền tảng Cơng nghệ Ngơn ngữ lập trình: HTML: Ngơn ngữ đánh dấu cấu trúc phần tử trang web Sử dụng thẻ HTML để tạo nhóm phần tử CSS: Ngôn ngữ định dạng kiểu dáng phần tử trang web Sử dụng CSS để áp dụng thuộc tính Flexbox cho phần tử điều chỉnh bố cục chúng JavaScript: Ngôn ngữ lập trình phía máy khách để xử lý tương tác logic trị chơi JavaScript sử dụng để điều khiển kiện, xử lý đầu vào người dùng cung cấp phản hồi động cho người chơi Hình 3: Ngơn ngữ lập trình b) CSS Flexbox: “display: flex”: Thuộc tính để khai báo khung chứa Flexbox “flex-direction”: Thuộc tính để xác định hướng xếp phần tử bên khung chứa (row, column, row-reverse, column-reverse) “justify-content”: Thuộc tính để chỉnh phần tử theo chiều ngang “align-items”: Thuộc tính để chỉnh phần tử theo chiều dọc “flex-wrap”: Thuộc tính để định xếp chồng phần tử khơng đủ khơng gian khung chứa c) Trình duyệt web: Nhóm