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

Mục tiêu của người chơi là sử dụng các thuộc tính và giá trị Flexbox đúng cách để xếp chồng và căn chỉnh các phần tử theo yêu cầu của từng bài tập.. Người chơi có thể thử nghiệm và thay

Trang 1

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

Trang 2

DANH SÁCH THÀNH VIÊN NHÓM

S

NỘI DUNG THỰC HIỆN

MỨC ĐỘ HOÀN THÀNH

GH

I CHÚ

1 Nguyễn Lê Thanh Hiền D20C01A 1338

Lên ý tưởng nhân

2 Trần Đồng Nghiệp D20C01A 1326 tưởng nhân Lên ý

trưởng

Lên ý tưởng nhân

Trang 3

Lập trình hướng đối tượng Nhóm 1

LỜI NÓI ĐẦU

Trên thế giới cũng như Việt Nam, công nghệ thông tin đã trở thành một công nghệ mũi nhọn, nó là ngành công nghiệp kỹ thuật không thể thiết trong việc áp dụng vào các hoạt động xã hội như: các hoạt động quản lý hệ thống, kinh doanh, trong hoạt động nghiên cứu,… và đặc biệt là trong lĩnh vực game – một lĩnh vực đang phát triển mạnh hiện nay.

Ở nước ta hiện nay, việc xây dựng một ứng dụng game đã không còn xa lạ, nhưng để tạo ra một game hay và chất lượng là một vấn đề không dễ Đây là một vấn đề nan giải,

để xây dựng được một game đạt chất lượng ngoài việc người lập trình, thì cần phải hiểu, hoạch định và phân tích tối ưu được các vai trò chức năng của hệ thống thông tin Game có tên là Flexbox Owlet, đây là hai tựa game được tạo nên từ sự sáng tạo, kết hợp giữa việc học và giải trí đơn giản tạo nên một game đặc biệt Ý tưởng chính của trò chơi là sử dụng các phương pháp trò chơi để thúc đẩy sự tương tác, sự tham gia và việc áp dụng kiến thức trong quá 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 các bạn trẻ muốn tìm hiểu về Flexbox

Mặc dù đã rất cố gắng để hoàn thành công việc, nhưng do thời gian có hạn và thiết kinh nghiệm cũng như kỹ năng còn nhiều thiếu sót nên việc phân tích và thiết kế còn nhiều thiếu sót, kính mong quý thầy cô, bổ sung để nhóm hoàn thiện cho đồ án tốt hơn.

Trang 4

MỤC LỤC

MỞ ĐẦU 1

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 2

1.1 Mô tả về game 2

1.2 Yêu cầu đối với sản phẩm 3

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

2.1 Nền tảng và Công nghệ 4

2.2 Mô hình thiết kế 5

CHƯƠNG III: PHÂN TÍCH 8

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

Trang 5

DANH MỤC HÌNH ẢN

Hình 1: Flexbox Owlet 2

Hình 2: Hoàn thành các cấp độ 3

Hình 3: Ngôn ngữ lập trình 4

Hình 4: Giao diện chính 8

Hình 5: Kiểm tra 9

Hình 6: Vượt thử thách 9

Hình 7: Các cấp độ 10

Hình 8: Folder file 11

Trang 6

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

Trang 7

Lập trình hướng đối tượng Mở đầu

MỞ ĐẦU

I Lý do chọn đề tài

Trong thế giới phát triển web hiện đại, CSS Flexbox đã trở thành một phương pháp mạnh mẽ để tạo ra giao diện linh hoạt và đáp ứng Flexbox giúp chúng ta kiểm soát hiển thị và sắp xếp các phần tử trên trang web một cách dễ dàng và hiệu quả Tuy nhiên, việc hiểu và làm quen với các thuộc tính và khả năng của Flexbox có thể gặp khó khăn đối với những người mới học CSS hoặc thậm chí là những người đã có kinh nghiệm.

Trong báo cáo này, sẽ giới thiệu về Flexbox Game - một công cụ hữu ích và thú vị để tìm hiểu về CSS Flexbox Flexbox Game cung cấp một môi trường tương tác và trò chơi giúp người dùng rèn luyện và nắm vững kiến thức về Flexbox thông qua việc thực hành

và giải quyết các bài tập.

II Mục tiêu nghiên cứu

 Giới thiệu về CSS Flexbox: Chúng ta sẽ tổng quan về khái niệm và lợi ích của CSS Flexbox, đồng thời đưa ra một số ví dụ về cách Flexbox có thể được áp dụng để tạo ra giao diện đáp ứng.

 Giới thiệu về Flexbox Game: Chúng ta sẽ khám phá Flexbox Game và các tính năng nổi bật của nó Sự tương tác và cách thức hoạt động của trò chơi sẽ được trình bày chi tiết.

 Trải nghiệm và học tập thông qua Flexbox Game: Chúng ta sẽ tìm hiểu về các cấp

độ và bài tập trong Flexbox Game, cùng với cách thức giúp người dùng nắm vững và rèn luyện kỹ năng sử dụng Flexbox.

 Lợi ích và ứng dụng của Flexbox Game: Chúng ta sẽ xem xét những lợi ích mà Flexbox Game mang lại đối với việc học Flexbox, cũng như khả năng ứng dụng kiến thức

đã học được trong dự án phát triển thực tế.

Trang 8

Lập trình hướng đối tượng Chương I: Tổng quan về đề tài

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Mô tả về game

Flexbox Owlet là một trò chơi trực tuyến được tạo ra để giúp người học hiểu và nắm vững cách sử dụng Flexbox trong CSS Flexbox là một mô hình kiểu bố trí trong CSS cho phép linh hoạt và dễ dàng sắp xếp các phần tử trong một khung (container) và điều chỉnh chúng theo các quy tắc xếp chồng và căn chỉnh.

Hình 1: Flexbox Owlet

Trong Flexbox Owlet, người chơi sẽ được đưa vào một giao diện trực quan với các thử thách và bài tập liên quan đến sử dụng Flexbox Mục tiêu của người chơi là sử dụng các thuộc tính và giá trị Flexbox đúng cách để xếp chồng và căn chỉnh các phần tử theo yêu cầu của từng bài tập.

Trò chơi cung cấp hướng dẫn và gợi ý để giúp người chơi tiếp cận và hiểu cách hoạt động của Flexbox Người chơi có thể thử nghiệm và thay đổi các giá trị của các thuộc tính Flexbox như “ display ”, “ flex-direction ”, “ justify-content ”, “ align-items ”, và “ flex-wrap ”

để xem sự thay đổi trong bố cục và vị trí của các phần tử.

Qua việc hoàn thành các cấp độ và thử thách trong trò chơi, người chơi có thể nắm vững kiến thức về Flexbox và có khả năng áp dụng nó vào các dự án thực tế Flexbox Owlet không chỉ giúp người học rèn kỹ năng sử dụng Flexbox mà còn mang tính giải trí

và thú vị khi tương tác với các thử thách và bài tập.

Trang 9

Hình 2: Hoàn thành các cấp độ

1.2 Yêu cầu đối với sản phẩm

 Giao diện trực quan: Trò chơi nên có một giao diện thân thiện và hấp dẫn với các phần tử trực quan như hình ảnh, biểu đồ, hoặc biểu đồ gantt để thể hiện bố cục và vị trí các phần tử.

 Thử thách và bài tập: Trò chơi nên cung cấp một loạt các thử thách và bài tập, từ

dễ đến khó, để người chơi thực hành sử dụng Flexbox Các thử thách có thể yêu cầu người chơi xếp chồng và căn chỉnh các phần tử theo các yêu cầu cụ thể.

 Hướng dẫn và gợi ý: Trò chơi nên cung cấp hướng dẫn chi tiết và gợi ý để giúp người chơi tiếp cận và hiểu cách sử dụng các thuộc tính và giá trị Flexbox Hướng dẫn nên giải thích các khái niệm cơ bản và cung cấp ví dụ minh họa.

 Phản hồi và điểm số: Trò chơi nên cung cấp phản hồi tức thì về hiệu suất và độ chính xác của người chơi Người chơi nên nhận được điểm số hoặc đánh giá dựa trên hiệu suất của họ trong việc hoàn thành các thử thách và bài tập.

 Đa cấp độ: Trò chơi nên có nhiều cấp độ khác nhau để người chơi có thể tiến bộ từ

cơ bản đến nâng cao Các cấp độ nên có độ khó tăng dần và yêu cầu người chơi áp dụng các khái niệm Flexbox phức tạp hơn.

 Lưu trữ tiến trình: Trò chơi nên cung cấp khả năng lưu trữ và tải lại tiến trình của người chơi Điều này cho phép người chơi tiếp tục từ nơi họ dừng lại và giúp theo dõi tiến

bộ của họ trong quá trình học.

Trang 10

 Thông tin bổ sung: Trò chơi có thể bổ sung các thông tin hữu ích như tài liệu tham khảo, ví dụ mã nguồn và liên kết đến tài liệu học tập bổ sung để người chơi có thể nghiên cứu thêm sau khi hoàn thành trò chơi.

Trang 11

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 Nền tảng và Công nghệ

a) Ngôn ngữ lập trình:

 HTML: Ngôn ngữ đánh dấu cấu trúc các phần tử trên trang web Sử dụng các thẻ HTML để tạo và nhóm các phần tử.

 CSS: Ngôn ngữ định dạng và kiểu dáng các phần tử trên trang web Sử dụng CSS

để áp dụng các thuộc tính Flexbox cho các phần tử và điều chỉnh bố cục của chúng.

 JavaScript: Ngôn ngữ lập trình phía máy khách để xử lý tương tác và logic trong trò chơi JavaScript có thể được sử dụng để điều khiển các sự kiện, xử lý đầu vào người dùng và 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 một khung chứa Flexbox.

 “flex-direction”: Thuộc tính để xác định hướng sắp xếp của các phần tử bên trong

khung chứa (row, column, row-reverse, column-reverse).

 “justify-content”: Thuộc tính để căn chỉnh các phần tử theo chiều ngang.

 “align-items”: Thuộc tính để căn chỉnh các phần tử theo chiều dọc.

 “flex-wrap”: Thuộc tính để quyết định xếp chồng các phần tử khi không đủ không

gian trong khung chứa.

c) Trình duyệt web:

Trang 12

Trò chơi sẽ chạy trên các trình duyệt web phổ biến như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, v.v Đảm bảo rằng trò chơi hoạt động trơn tru và tương thích trên các trình duyệt này là quan trọng.

Đảm bảo trò chơi sử dụng các tính năng CSS Grid và JavaScript đúng cách và tương thích với các phiên bản trình duyệt khác nhau.

d) Lưu trữ dữ liệu:

 Để lưu trữ dữ liệu trong trò chơi Flexbox, lập trình viên có thể sử dụng các công nghệ lưu trữ dữ liệu như cơ sở dữ liệu SQL hoặc hệ quản trị cơ sở dữ liệu không SQL Dưới đây là một số công nghệ thường được sử dụng:

 Cơ sở dữ liệu SQL: Lập trình viên có thể sử dụng cơ sở dữ liệu SQL như MySQL, PostgreSQL hoặc SQLite để lưu trữ thông tin về người chơi, tiến trình và điểm số Các câu truy vấn SQL được sử dụng để tạo, đọc, cập nhật và xóa dữ liệu từ cơ sở dữ liệu.

 Hệ quản trị cơ sở dữ liệu không SQL (NoSQL): Các hệ quản trị cơ sở dữ liệu không SQL như MongoDB hoặc Firebase cũng là một lựa chọn phổ biến Chúng cho phép lưu trữ dữ liệu dưới dạng tài liệu hoặc cấu trúc khác nhau và sử dụng API để truy vấn và tương tác với dữ liệu.

 Các giải pháp lưu trữ dữ liệu khác: Ngoài ra, lập trình viên cũng có thể sử dụng các dịch vụ lưu trữ dữ liệu trực tuyến như JSONbin, Google Firebase Realtime Database hoặc Amazon DynamoDB để lưu trữ và truy xuất dữ liệu trong trò chơi.

Khi sử dụng các công nghệ lưu trữ dữ liệu, lập trình viên có thể thiết kế cơ sở dữ liệu

để lưu trữ thông tin về người chơi, tiến trình của họ và điểm số đạt được Khi người chơi tiến bộ trong trò chơi, dữ liệu của họ có thể được cập nhật và lưu trữ, cho phép họ tiếp tục

từ nơi họ dừng lại hoặc xem lại tiến trình đã hoàn thành.

2.2 Mô hình thiết kế

a) Cấu trúc trò chơi:

 Trò chơi sẽ được phát triển bằng sử dụng ngôn ngữ HTML, CSS và JavaScript.

 HTML được sử dụng để tạo cấu trúc trò chơi, bao gồm các phần tử chính như màn hình chơi, điểm số, nút điều khiển, vv.

 CSS được sử dụng để kiểu dáng và định vị các phần tử trên trang, áp dụng các thuộc tính Flexbox để xây dựng bố cục linh hoạt.

Trang 13

b) Giao diện người dùng:

 Trò chơi sẽ có giao diện người dùng đơn giản, dễ hiểu và dễ sử dụng.

 Các phần tử giao diện như nút điều khiển, hình ảnh và văn bản sẽ được căn chỉnh

và xếp chồng lên nhau bằng cách sử dụng các thuộc tính Flexbox.

 CSS sẽ được sử dụng để tạo kiểu cho các phần tử giao diện, bao gồm màu sắc, kích thước, kiểu chữ, vv.

 Các thuộc tính Flexbox như “flex-direction ”, “ justify-content ”, “ align-items ”,

“flex-wrap”, vv sẽ được sử dụng để điều chỉnh việc xếp chồng và căn chỉnh các phần tử

bên trong khung chứa.

 Trò chơi có thể sử dụng các công nghệ lưu trữ dữ liệu như cơ sở dữ liệu SQL hoặc

hệ quản trị cơ sở dữ liệu không SQL để lưu trữ thông tin về người chơi, tiến trình và điểm số.

 Các công nghệ như MySQL, PostgreSQL hoặc MongoDB có thể được sử dụng để lưu trữ và truy xuất dữ liệu.

Trang 14

 Sử dụng các công cụ như Git và các dịch vụ như GitHub hoặc GitLab để quản lý

mã nguồn và phiên bản của trò chơi.

Trang 15

Lập trình hướng đối tượng Chương III: Phân tích

CHƯƠNG III: PHÂN TÍCH

3.1 Gameplay

Gameplay của Flexbox Owlet bao gồm một hình vuông đại diện cho một sân chơi với nhiều vị trí trống cần được điền vào các phần tử HTML Mỗi cấp độ trong trò chơi tương ứng với một thử thách cụ thể mà người chơi phải giải quyết bằng cách sử dụng Flexbox.

Trang 16

Hình 5: Kiểm tra

Mỗi khi người chơi gửi một lệnh CSS đúng, các phần tử trong sân chơi sẽ được căn chỉnh lại theo cách mà người chơi chỉ định Nếu người chơi gửi lệnh sai, các phần tử vẫn giữ nguyên vị trí của mình và người chơi sẽ phải thử lại.

Hình 6: Vượt thử thách

Flexbox Owlet có nhiều cấp độ khác nhau, mỗi cấp độ đòi hỏi người chơi sử dụng các thuộc tính Flexbox một cách sáng tạo để giải quyết thử thách Càng đi xa, mức độ khó của

Trang 17

các thử thách sẽ tăng lên, đòi hỏi người chơi có kiến thức và sự thông thạo về Flexbox để hoàn thành mỗi cấp độ.

Hình 7: Các cấp độ

Trò chơi được thiết kế đơn giản, với giao diện thân thiện và hình ảnh đáng yêu Nó không chỉ giúp người chơi học được cách sử dụng Flexbox một cách thực tế, mà còn mang lại cho họ một trải nghiệm giải trí và thú vị.

Flexbox Owlet cung cấp cho người chơi một số lợi ích và tính năng bổ sung:

1 Mô phỏng thực tế: Trò chơi tạo ra một môi trường mô phỏng thực tế để người chơi

áp dụng và thử nghiệm các kiến thức về Flexbox Người chơi có thể thấy ngay kết quả của các lệnh CSS mà họ gửi và biết được cách căn chỉnh, xếp chồng và căn giữa các phần tử.

2 Hướng dẫn bài bản: Flexbox Owlet đi kèm với các hướng dẫn chi tiết và ví dụ cụ

thể để giúp người chơi hiểu rõ cách sử dụng các thuộc tính Flexbox Bằng cách cung cấp

ví dụ thực tế và giải thích, trò chơi giúp người chơi nắm bắt được ý nghĩa và cách thức hoạt động của mỗi thuộc tính.

3 Thử thách đa dạng: Flexbox Owlet cung cấp một loạt các cấp độ với các thử thách

đa dạng Từ việc căn chỉnh một phần tử duy nhất đến xếp chồng nhiều phần tử khác nhau, trò chơi tăng dần độ khó để thách thức người chơi và đảm bảo rằng họ học được nhiều kỹ năng khác nhau liên quan đến Flexbox.

Trang 18

4 Sự thú vị và gây nghiện: Flexbox Owlet được thiết kế với giao diện thân thiện và

đồ họa đáng yêu, tạo ra một trải nghiệm chơi game thú vị Sự thành công trong việc hoàn thành mỗi cấp độ và giải quyết các thử thách sẽ tạo ra sự hứng thú và động lực cho người chơi tiếp tục chinh phục.

5 Sẵn sàng dùng ngay: Flexbox Owlet là một ứng dụng web, do đó người chơi có thể

truy cập và chơi nó ngay trên trình duyệt web của mình mà không cần cài đặt thêm phần mềm hay tiến hành cấu hình phức tạp.

3.2 Source code

Hình 8: Folder file

 Index.html

<!doctypehtml>

Trang 19

<htmllang="en">

<head>

<metacharset="utf-8">

<title>Flexbox Owlet - A game for learning CSS 昀氀exbox</title>

<metaname="viewport"content="width=device-width, initial-scale=1">

<linkrel="shortcut icon"href="/owl.ico"type="image/x-icon">

<linkrel="stylesheet"href="node_modules/animate.css/animate.min.css">

<linkhref='https://fonts.googleapis.com/css?family=PT+Sans|Fredoka+One|

Source+Code+Pro'rel='stylesheet'type='text/css'>

<linkrel="preconnect"href="https://fonts.googleapis.com">

<linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin>

<linkhref="https://fonts.googleapis.com/css2?

<spanclass="arrow left">

<spanclass="triangle"></span>

Trang 20

</span>

<spanid="level-indicator">

<spanid="labelLevel"class="translate">Level</span>

<spanclass="current"> </1 span>

<spanid="labelOf"class="translate"> </of span>

<spanclass="total"> </1 span>

<spanclass="caret"> </▾ span>

</span>

<spanclass="arrow right">

<spanclass="triangle"></span>

</span>

<divid="levelsWrapper"class="tooltip">

<divid="levels"></div>

<divid="labelReset"class="translate">Reset</div>

<preid="before"></pre>

<textareaid="code"autofocus autocapitalize="none"></textarea>

<preid="after"></pre>

</div>

<buttonid="next"class="translate">Next</button>

Trang 21

</div>

<divclass="credits">

<spanid="settings">

<spanid="labelSettings"class="toggle translate">Settings</span>

<spanclass="tooltip">

<h4id="labelLanguage"class="translate">Language</ >h4

<selectid="language">

<optionvalue="en">English</option>

<optionvalue="vi">Tiếng Việt</option>

<labelid="labelDi昀케cultyEasy"for="di昀케cultyEasy"

class="translate">Beginner</label>

</div>

<div>

<inputtype="radio"name="di昀케culty"id="di昀케cultyMedium"

value="medium">

<labelid="labelDi昀케cultyMedium"for="di昀케cultyMedium"

class="translate">Intermediate - No Directions</label>

</div>

<div>

Trang 22

<inputtype="radio"name="di昀케culty"id="di昀케cultyHard"value="hard">

<labelid="labelDi昀케cultyHard"for="di昀케cultyHard"class="translate">Expert -

No Directions & Random Levels</label>

<divclass="credits">

<spanid="gridGarden"class="translate">Want to learn CSS grid? Play</span> <a

href="#!">Grid Garden</ >a

<scriptsrc="js/levels.js"></script>

<scriptsrc="js/docs.js"></script>

<scriptsrc="js/messages.js"></script>

Trang 23

<scriptsrc="js/gamẹjs"></script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)

[0];ạasync=1;ạsrc=g;m.parentNodẹinsertBefore(a,m)

})(window,document,'script' 'https://www.google-analytics.com/analytics.js' 'gá, , );

gắcreaté 'UA-23019901-13' 'autó, , );

gắsend' 'pageview', );

<divid="fb-root"></div>

}(document, 'script' 'facebook-jssdk', ));</script>

<! BuySellAds >

<! <script type="text/javascript"

src="//m.servedby-buysellads.com/monetization.custom.js"></script> >

Trang 24

(function() {

(if typeof _bsa !== 'unde昀椀ned' && _bsa) {

_bsa.init('custom' 'CK7D427U' 'placement:昀氀exboxowletcom', , , {

Trang 25

Trang 26

Trang 27

Trang 28

Trang 29

top: -12px;

left: 12px;

width: ;0

height: ;0

border-left: 12px solid transparent;

border-right: 12px solid transparent;

border-bottom: 12px solid #2c3e50;

Trang 30

Trang 31

Trang 32

Trang 33

Trang 34

Trang 35

Trang 36

Trang 37

Trang 38

border-top: 7px solid transparent;

border-bottom: 7px solid transparent;

Trang 39

Trang 40

Tiêu đề	Tiểu luận báo cáo môn học Lập trình hướng đối tượng
Tác giả	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
Người hướng dẫn	THS. Trương Nguyễn Trùng Dương
Trường học	Trường đại học Kinh tế - Kỹ thuật Bình Dương
Chuyên ngành	Lập trình hướng đối tượng
Thể loại	Báo cáo môn học
Năm xuất bản	2023
Thành phố	Bình Dương

Định dạng
Số trang	91
Dung lượng	5,35 MB