Đang tải... (xem toàn văn)
Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL Đồ án lập TRÌNH PYTHON TRÊN nền WEBSITE GAMEBALL
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐIỆN TỬ - VIỄN THÔNG ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: THIẾT KẾ HỆ THỐNG TRÒ CHƠI PHIÊU LƯU BẮN BĨNG BAY BẰNG NGƠN NGỮ LẬP TRÌNH PYTHON TRÊN NỀN WEBSITE GAMEBALL Hà Nội, 6-2018 Chương TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI Đánh giá án tốtTHÔNG nghiệp VIỆN ĐIỆN TỬ -đồ VIỄN (Dùng cho giảng viên hướng dẫn) Giảng viên đánh giá: Họ tên Sinh viên: MSSV: ………………… Tên đồ án: ………………………………………………………………………………… Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) ĐỒ ÁN Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả TỐT NGHIỆP ĐẠI HỌC thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Đề tài: Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt THIẾT KẾ HỆ THỐNG TRỊ CHƠI LƯU Có khả phân tích đánh giá kết PHIÊU (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực BẮN BÓNG BAY BẰNG NGƠN NGỮ LẬP TRÌNH dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết PYTHON TRÊN NỀN WEBSITE GAMEBALL phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất hướng giải có thểHà thực tương lai Nội, 6-2018 Kỹ viết (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách Chương 17 sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) 10a Có báo khoa học đăng chấp nhận đăng/đạt giải Chương 18 SVNC khoa học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên 10b nghiên cứu khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chuyên ngành TI contest 10c Khơng có thành tích nghiên cứu khoa học Điểm tổng /50 Điểm tổng quy đổi thang 10 Nhận xét thêm Thầy/Cô (giảng viên hướng dẫn nhận xét thái độ tinh thần làm việc sinh viên) Ngày: / /201 Người nhận xét (Ký ghi rõ họ tên) Đánh giá đồ án tốt nghiệp (Dùng cho cán phản biện) Giảng viên đánh giá: Họ tên sinh viên: MSSV: ………………… Tên đồ án: ………………………………………………………………………………… Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt Có khả phân tích đánh giá kết (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận 5 5 5 để đề xuất hướng giải thực tương lai Kỹ viết (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận 10a chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) Có báo khoa học đăng chấp nhận đăng/đạt giải SVNC khoa học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên nghiên 10b 10c cứu khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chuyên ngành TI contest Khơng có thành tích nghiên cứu khoa học Điểm tổng /50 Điểm tổng quy đổi thang 10 Nhận xét thêm Thầy/Cô (giảng viên hướng dẫn nhận xét thái độ tinh thần làm việc sinh viên) Ngày: / /201 Người nhận xét (Ký ghi rõ họ tên) GVHD: ThS LỜI NÓI ĐẦU Trước hết, em xin cảm ơn tất thầy cô giáo trường đại học Bách Khoa Hà Nội nói chung thầy Viện Điện tử - Viễn thơng nói riêng tận tâm truyền đạt kiến thức cho em suốt quãng thời gian em học trường Thầy cô truyền dạy lại cho em nhiều kiến thức tảng sở đến kiến thức chun mơn hữu ích kinh nghiệm sâu sắc đời sống để giúp đỡ cho chúng em cho sống sau Là sinh viên năm cuối Viện Điện tử -Viễn thông, Đại Học Bách Khoa Hà Nội, em nhận thấy cần phải phát huy mạnh lĩnh vực lập trình nay, cơng nghệ lập trình phát triển nhanh đói hỏi kỹ sư em cần nắm bắt nhanh với tư lập trình mới, nắm bắt tìm hiểu ngôn ngữ mới, thư viện mới, framework xuất ngày nhiều có nhiều điểm mạnh riêng phù hợp với hầu hết yêu cầu công ty, đối tác khách hàng Lựa chọn tìm hiểu ứng dụng lập trình ReactJS Python có tính mẻ, tính phổ biến, tính hiệu hàng đầu, em định chọn đề tài Đồ án Tốt nghiệp: “THIẾT KẾ HỆ THỐNG TRÒ CHƠI PHIÊU LƯU BẮN BĨNG BAY BẰNG NGƠN NGỮ LẬP TRÌNH PYTHON TRÊN NỀN WEBSITE GAMEBALL” Em xin tỏ lòng biết ơn đến thầy giáo ThS hỗ trợ cho em việc chọn đề tài hướng dẫn em suốt trình thực đồ án tốt nghiệp Em nhận nhiều lời khuyên bổ ích kiến thức chuyên môn đáng quý hỗ trợ để em suốt trình làm đồ án Đây kiến thức theo em suốt trình làm việc sau Em xin gửi lời cảm ơn chân thành đến anh chị Công ty Cổ phần Đầu tư Phát triển Koolsoft cung cấp chia sẻ kiến thức, giúp đỡ chuyên môn cho em làm đồ án tạo môi trường làm việc khoa học cho em nhiều kinh nghiệm quý giá cho công việc tương lai em Trong suốt trình làm đồ án, dù cố gắng thời gian có hạn nên sản phẩm chắn thiếu sót Nên em mong nhận góp ý thầy cô bạn, để em rút kinh nghiệm cho sản phẩm sau em Em xin chân thành cảm ơn ! TÓM TẮT ĐỒ ÁN Trong thời điểm Cơng nghệ lập trình phát triển mạnh vơ nhanh chóng nay, ngôn ngữ mới, thư viện mới, framework xuất SVTH: Kiều Văn Đông – MSSV: 20130947 GVHD: ThS ngày nhiều có nhiều điểm mạnh riêng đáp ứng hầu hết yêu cầu ngày cao công ty, đối tác khách hàng Cuối năm 2017 đầu năm 2018, Python React nằm bảng xếp hạng xu hướng lập trình u thích hàng đầu, phổ biến Thế giới, đáp ứng tốt nhu cầu tuyển dụng Nắm bắt điểm mạnh vượt trội chúng, Đồ án tốt nghiệp mình, em tìm hiểu chúng ứng dụng lập trình, cụ thể: Python lập trình Game ReactJS lập trình website gameball Đồ án em bao gồm chương, nội dung chương sau: Chương đề cập đến khái niệm, đặc điểm ứng dụng lập trình Python ReactJS Chương trình bày phần triển khai ứng dụng Python để lập trình trò chơi bắn bóng ”Game Ball3” Chương trình bày triển khai ứng dụng ReactJS để lập trình website trò chơi “GameBall3” Cuối kết luận, đưa mục tiêu chưa làm hệ thống, thuận lợi khó khăn trình thực đồ án hướng phát triển tương lai ABSTRACT Until now programming technology has grown tremendously and rapidly, today's new languages, new libraries, and new frameworks appear to have more and more strengths that meet most of the requirements high of companies, customer partners By the end of 2017 and early 2018, both Python and React programming languages will be in every rankings as Top programming languages, Top of the most popular languages Grasp the strengths of the above two languages, in my graduation project, I learned about them and application in the programmer, specifically: Python in game programming and ReactJS in website programming My project includes program, primary content programs as following: Chapter shows the Python and React with the specific and applications in the programming SVTH: Kiều Văn Đông – MSSV: 20130947 GVHD: ThS Chapter shows implementation of the Python application to set the game: ”GameBall3” Chapter presents the ReactJS application to set the website about game “GameBall3” Finally, the conclusion presents the advantages and difficulties in project implementation and development in the future MỤC LỤC LỜI NÓI ĐẦU .1 TÓM TẮT ĐỒ ÁN ABSTRACT MỤC LỤC DANH MỤC HÌNH VẼ DANH MỤC BẢNG BIỂU DANH SÁCH CÁC TỪ VIẾT TẮT .8 CHƯƠNG TÌM HIỂU VỀ PYTHON VÀ REACT 1.1 TÌM HIỂU VỀ PYTHON .9 1.1.1 Lịch sử phát triển 1.1.2 Đặc điểm chung 1.1.3 Điểm đặc biệt cú pháp, quy tắc lập trình 10 1.1.4 Câu lệnh rẽ nhánh 16 1.1.5 Vòng lặp .17 1.1.6 Hàm 18 1.1.7 Lớp (Class) 19 1.2 TÌM HIỂU VỀ REACTJS 21 1.2.1 Khảo sát trạng 21 1.2.2 Giới thiệu chung ReactJS 21 1.2.3 Đặc điểm chi tiết ReactJS 25 CHƯƠNG ỨNG DỤNG PYTHON LẬP TRÌNH TRỊ CHƠI GAMEBALL 28 SVTH: Kiều Văn Đông – MSSV: 20130947 GVHD: ThS 2.1 Ý tưởng 28 2.2 Giới thiệu sơ lược thư viện pygame 28 2.3 Phân tích trò chơi 28 2.3.1 Ý tưởng 28 2.3.2 Xác định rõ yêu cầu 28 2.3.3 Mơ hình hóa chức 29 2.3.4 Sơ đồ hoạt động hệ thống (Activity Diagram) .35 2.3.5 Mơ hình cầu trúc 36 2.3.6 Mô hình hóa hoạt động 41 2.4 Thiết kế trò chơi 45 2.4.1 Thiết kế lớp phương thức 45 2.5 Thuật toán 46 2.5.1 Phát va chạm 46 2.5.2 Phát click trúng vật thể 47 2.5.3 Giải va chạm .47 2.6 Một số hình ảnh trò chơi .48 2.7 Kết luận .53 CHƯƠNG ỨNG DỤNG REACTJS LẬP TRÌNH WEBSITE TRÒ CHƠI “GAME BALL3” 54 3.1 Ý tưởng thiết kế website cho trò chơi “Game Ball3” 54 3.2 Lý lựa chọn thư viện ReactJS 54 3.3 Mục tiêu cần đạt 55 3.4 Yêu cầu phi chức 56 3.5 Thiết kế cấu trúc 56 3.5.1 Lựa chọn cấu trúc phần mềm .56 3.6 Kiểm thử 58 3.7 Các bước thiết kế giao diện website 59 3.7.1 Thiết kế giao diện trang chủ 59 3.7.2 Tạo trang đăng ký, đăng nhập, đổi mật cho người chơi 62 3.7.3 Thống kê bảng xếp hạng điểm chơi 62 3.7.4 Tạo tính bình luận cho người dùng .62 3.7.5 Tính tải game cho người dùng .63 3.7.6 Tạo sở liệu cho web 63 SVTH: Kiều Văn Đông – MSSV: 20130947 GVHD: ThS 3.7.7 Hình ảnh hồn thiện .64 KẾT LUẬN 66 KẾT LUẬN CHUNG 69 TÀI LIỆU THAM KHẢO 70 BẢNG ĐỐI CHIẾU THUẬT NGỮ VIỆT – ANH .71 PHỤ LỤC 72 DANH MỤC HÌNH VẼ Hình 1.1: Virtual DOM 23 Hình 2.2: Sơ đồ hoạt động hệ thống 35 Hình 2.3: Sơ đồ lớp .39 Hình 2.4: Sơ đồ đối tượng .40 Hình 2.6: Sơ đồ hoạt động đăng nhập 41 Hình 2.7: Sơ đồ hoạt động chơi không đăng nhập 42 Hình 2.8: Sơ đồ hoạt động hướng dẫn chơi 42 Hình 2.9: Sơ đồ hoạt động bật/tắt âm 43 Hình 2.0: Sơ đồ hoạt động xem điểm số .43 Hình 2.11: Sơ đồ hoạt động chọn chơi 44 Hình 2.12 Sơ đồ hoạt động chơi 44 Hình 2.13: Menu start game sau run code ‘main’ Pycharm 48 Hình 2.14: Tính đăng ký tạo tài khoản chơi game 48 Hình 2.15: Tính đăng nhập tài khoản chơi game 49 Hình 2.16: Menu chọn map 49 Hình 2.17: Map chơi 50 Hình 2.18: Map chơi 50 Hình 2.19: Map chơi 51 Hình 2.20: Điểm người chơi map 52 Hình 2.21: Giao diện code Pycharm 52 Hình 2.22: Giao diện hình run code Python 53 Hình 3.1: Giao diện trang chủ hồn thiện 59 Hình 3.2: Giao diện trang chủ hoàn thiện 60 Hình 3.3: Giao diện trang chủ hoàn thiện .60 Hình 3.4: Giao diện tab tin tức thơng báo trang chủ .61 Hình 3.5: Giao diện thơng tin trang liên kết trang chủ hồn thiện 61 Hình 3.6: Giao diện footer trang chủ hoàn thiện 61 Hình 3.7: Giao diện modal đăng nhập & đăng ký 62 SVTH: Kiều Văn Đông – MSSV: 20130947 GVHD: ThS lại viết nhiều lại có nhiều phần giống lại không sử dụng lại được, thật tốn Trong view thực tạo nhiều phần khác Vậy việc tạo component khác cần dùng gọi chỗ khác Khá tiện lợi việc phát triển cho Front-End lại giống việc dùng cá đối tượng Back-End Trong hệ thống em có sử dụng kiến trúc Component–baseed sofrware engineering Component-based software engineering (CBSE) Kiến trúc dựa Component tập trung vào việc phân chia thiết kế thành thành phần chức logic độc lập đại diện cho giao diện truyền thơng có chứa method, event thuộc tính Nó cung cấp mức độ trừu tượng cao chia vấn đề thành vần đề nhỏ kết hợp với phân vùng thành phần Mỗi thành phần đóng gọi chức hành vi yếu tố phần mềm thành đơn vị nhị phân giúp sử dụng lại tự triển khai Có nhiều standard component framework COM/DCOM, JavaBean, EJB, CORBA, NET, web services grid services CBSE có nhiều ưu điểm so với phương pháp tiếp cận đối tượng kiểu truyền thống như: Giảm thời gian phát triển sử dụng lại thành phần có sẵn Tăng độ tin cậy với việc sử dụng lại thành phần có Bây em qua chút khái niệm component Một component tập hợp module di động, thay thế, tái sử dụng chức được đóng gói thành chức tập hợp chức định Nó có giao diện định hành vi phù hợp với hầu hết component kiến trúc Một component tập hợp module di động, thay thế, tái sử dụng chức đóng gói export thành interface mức độ cao Một component đối tượng phần mềm dùng để tương tác với thành phần khác, đóng gói thành chức tập hợp chức SVTH: Kiều Văn Đông – MSSV: 20130947 53 GVHD: ThS định Nó có giao diện định hành vi phù hợp với hầu hết component kiến trúc Một software component định nghĩa đơn vị bố cục với giao diện quy định rõ ràng phụ thuộc vào bối cảnh Nó phần mềm triển khai độc lập phụ thuộc vào bên thứ ba 1.13.1.2 Nguyên tắc thiết kế Component-based Một thiết kế thành phần cấp biểu diễn cách sử dụng số đại diện trung gian (ví dụ đồ họa, bảng biểu, dựa văn bản) dịch thành mã nguồn Việc thiết kế cấu trúc liệu, giao diện thuật toán nên tuân theo nguyên tắc sau giúp phần mềm tránh xuất lỗi Hệ thống phần mềm phân rã thành đơn vị thành phần tái sử dụng, gắn kết, đóng gói Mỗi thành phần có giao diện riêng mà xác định yêu cầu cổng cung cấp cổng; thành phần giấu thực chi tiết Một thành phần cần mở rộng mà không cần phải làm cho mã thiết kế sửa đổi nội để phận thành phần Phụ thuộc vào thành phần trừu tượng không phụ thuộc vào thành phần cụ thể khác, làm tăng khó khăn việc mở rộng Kết nối thành phần, định quản lý tương tác thành phần Các loại tương tác quy định giao diện thành phần Các thành phần tương tác mang hình thức lời gọi phương thức, viện dẫn không đồng bộ, phát truyền hình, điều khiển tương tác tin nhắn, thơng tin liên lạc dòng liệu, tương tác cụ thể giao thức khác Đối với lớp máy chủ, giao diện chuyên ngành phải tạo để phục vụ mục khách hàng Chỉ có hoạt động có liên quan đến loại đặc biệt khách hàng phải quy định giao diện Một thành phần mở rộng đến thành phần khác cung cấp điểm mở rộng riêng Điều cho phép plugin để cung cấp API plugin SVTH: Kiều Văn Đông – MSSV: 20130947 54 GVHD: ThS 1.14 Kiểm thử Dưới phần kiểm thử, em đưa trường hợp kiểm thử, bước thực hiên kết đạt Bảng 3.2: Kiểm thử Test case Mô tả Testcase Các bước thực ID TC_01 Hiển thị Truy cập vào trang web Kết mong muốn Các component hiển thị đủ Trạng thái Passed B1: Đăng nhập vào web - > Click vào trang B2: Đăng ký,đăng nhập tài khoản B3: Nhấn Enter Xem điểm chơi Click vào trang xếp hạng Hiển thị cđúng yêu cầu, thực chức Passed Màn hình hiển thị thứ tự, điểm số, mail, tên user Passed Hiển thị Passed TC_05 Xem video, Tự động hiển thị ảnh mơ tả game Bình luận Nhập text vào box Gửi liệu data Passed TC_06 Tải game Tải game passed TC_02 TC_03 TC_04 Đăng nhập, Đăng ký Click vào link tải gảm trang Tải game 1.15 Các bước thiết kế giao diện website 1.15.1 Thiết kế giao diện trang chủ Khi người dùng truy cập vào web lên giao diện trang chủ logo trò chơi, phần Header cho phép người dùng xem ảnh video mô tả sơ qua trò chơi Game ball3 SVTH: Kiều Văn Đơng – MSSV: 20130947 55 GVHD: ThS Hình 3.1: Giao diện trang chủ hồn thiện Hình 3.2: Giao diện trang chủ hồn thiện Màn hình có button giúp người dùng đăng nhập vào hệ thống Hình 3.3: Giao diện trang chủ hồn thiện SVTH: Kiều Văn Đơng – MSSV: 20130947 56 GVHD: ThS Bên hình link thông báo admin, tin tức Hình 3.4: Giao diện tab tin tức thơng báo trang chủ Phần cuối thông tin liên hệ tác giả, dịch vụ hỗ trợ người dùng Hình 3.5: Giao diện thơng tin trang liên kết trang chủ hồn thiện SVTH: Kiều Văn Đông – MSSV: 20130947 57 GVHD: ThS Hình 3.6: Giao diện footer trang chủ hồn thiện 1.15.2 Tạo trang đăng ký, đăng nhập, đổi mật cho người chơi Khi người dùng click vào đăng nhập hiển thị cho người dùng bảng mẫu Nếu người dùng có tài khoản đăng nhập , chưa có tài khoản đăng kí mục bên cạnh form đăng nhập đăng ký cho người dung sau: Hình 3.7: Giao diện modal đăng nhập & đăng ký SVTH: Kiều Văn Đông – MSSV: 20130947 58 GVHD: ThS 1.15.3 Thống kê bảng xếp hạng điểm chơi Thông tin bảng xếp hạng theo ngày , tháng người chơi hiển thị người dùng click vào tab “Xếp hạng” tab thuộc header trang chủ 1.15.4 Tạo tính bình luận cho người dùng Em tạo box nhập email text để người dùng gửi lời nhắn, bình luận, đánh giá tới quản trị viên trang web Hình 3.8: Giao diện box bình luận trang chủ hồn thiện 1.15.5 Tính tải game cho người dùng Người dùng click vào tab “Tải game” tab trang chủ làm theo hướng dẫn để tải game Hình 3.9: Giao diện tab tải game SVTH: Kiều Văn Đông – MSSV: 20130947 59 GVHD: ThS 1.15.6 Tạo sở liệu cho web Cài đặt MySQLdb client cho trình duyệt chạy game Pycharm Cài đặt ứng dụng phần mềm tạo máy chủ Web Server XAMPP XAMPP tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server công cụ phpMyAdmin Xampp có chương trình quản lý tiện lợi, cho phép chủ động bật tắt khởi động lại dịch vụ máy chủ lúc Sau bật XAMPP Chọn Start Apache MySQL Trên trình duyệt, mở trang: localhost/phpMyAdmin, ta tạo bảng sở liệu lưu lại tồn thơng tin đăng ký web, đăng nhập game kèm theo số điểm , số map ứng với tên đăng nhập người chơi 1.15.7 Hình ảnh hồn thiện Hình 3.10: Giao diện hồn thiện SVTH: Kiều Văn Đơng – MSSV: 20130947 60 GVHD: ThS Hình 3.11: Giao diện hồn thiện Hình 3.12: Giao diện hồn thiện SVTH: Kiều Văn Đơng – MSSV: 20130947 61 GVHD: ThS KẾT LUẬN Khó khăn gặp phải giải pháp 1.1 Vấn đề Khi login vào hệ thống vấn đề xảy Khi người dùng nhập tài khoản mật ta phải gửi dễ liệu sever để xem có tài khoản mật có hay khơng Tiếp theo để login lần Login lần có nghĩa người dùng đăng nhập trình duyệt Khi login thành cơng mà chưa logout người dùng tắt bỏ tab đóng trình duyệt, mở lại trình duyệt người dùng không cần đăng nhập lại lần 1.2 Giải pháp Để giải cho vấn đề em, đặc biệt Reactjs em thực sau Khi check thành công cho đăng nhập vào hệ thống Trong phần login có xử dụng thư viện tiếng axios để gửi liệu lên sever, liệu gửi lên bào gồm tên tài khoản, mật kèm theo session (phục vụ cho việc login lần) Khi thấy liệu sever khớp sever trả tồn thơng tin (thơng tin người dùng, thông tin điểm số người dùng) cho đăng nhập vào hệ thống Những lần đăng nhập khi thấy session sever khớp không yêu cầu đăng nhập Khi đăng xuất session biến Thiết kế giao diện cho website 2.1 Vấn đề Vì ngơn ngữ cơng nghệ em tiếp xúc nên việc giao diện đòi hỏi tính cẩn thận tỉ mỉ việc phù hợp hình khác quan trọng hệ thống dành cho hầu hết thiết bị có kết nối Internet SVTH: Kiều Văn Đơng – MSSV: 20130947 62 GVHD: ThS 2.2 Giải pháp Trong trình tìm hiểu reactjs để làm front-end có giao diện đẹp khả phù hợp với hình kích thước khác em tìm hiểu thư viện antd, Bootstraps Hai thư viện hỗ trợ giúp ta phân chia hình, hỗ trợ tốt mặt giao diện chủ yếu tự code tự hiểu để giải vấn đề Giao diện gần phù hợp với loại hình Giao diện tương đối đẹp bắt mắt với học viên sử dụng hệ thống Kết luận Vì cơng nghệ em tiếp xúc nên bắt tay vào làm project em gặp nhiều khó khăn, thiết sót hạn chế mặt kĩ thuật nhiều Nhờ sợ giúp đỡ thầy hướng dẫn bạn bè giúp em làm tốt hơn, học hỏi đc nhiều điều làm Dưới em xin nêu kết đạt được, thứ mà hệ thống chưa đạt kinh nghiệm rút em 3.1 Mục tiêu sản phẩm đạt Sản phẩm đơn giản phù hợp với nhiều nhiều đối tượng, bạn bè, người quen đối tượng chủ yếu Giao diện game web đẹp mắt, dễ sử dụng 3.2 Mục tiêu sản phẩm chưa đạt Bên cạnh mục tiêu sản phẩm đạt điểm hệ thống chưa đạt là: Chưa có khả chơi web trực tiếp Đồ họa Game chưa đẹp, độ khó chưa cao Còn số hình chưa responsive Kinh nghiệm rút Sau hoàn thành đồ án, em rút học kinh nghiệm là: Khâu thiết kế tìm hiểu, phân tích u cầu khâu quan trọng để làm sản phẩm tốt, đáp ứng đầy đủ yêu cầu người dùng Không lên lạm dụng code thư viện có sẵn, cần tìm hiểu rõ cách thức code hoạt động SVTH: Kiều Văn Đông – MSSV: 20130947 63 GVHD: ThS Phải đặt vào vị trí người dùng, người dùng cần gì, để phát triển phần mềm theo hướng Liên tục làm việc với khách hàng từ khâu bắt đầu hình thành sản phẩm hồn tất sản phẩm, tránh trường hợp làm theo ý mình, khơng hiểu yêu cầu khách hàng phải sửa lại, làm tốn thời gian Khơng nên giữ tư tưởng làm sản phẩm DEMO, tư theo cách làm sản phẩm Hướng phát triển Như trình bày báo cáo tồn project Còn nhiều điểm cần phát triển tương lai: Sẽ phát triển thêm nhiều game Python ngơn ngữ khác Thêm nhiều tính cho Game trang web game Làm cho web xử lí nhanh Giao diện thiết kế cách tự nhiên hơn, chuyên nghiệp, đẹp mắt Nâng cấp tên miền server cho web KẾT LUẬN CHUNG Phát triển trò chơi Game Ball với web cơng việc đòi hỏi cần có nhiều thời gian kiến thức lập trình Để có kết tốt em cần phải mày mò, tìm hiểu thêm nhiều cách ứng dụng thư viện hỗ trợ, tìm hiểu đào sâu ngôn ngữ, tảng React Python Đồ án em tìm hiểu bước thiết kế website trò chơi hồn chỉnh, ứng dụng ngôn ngữ thư viện thời kỳ phát triển thu hút lớn lượng lập trình viên nhà phát triển Song sản phẩm tạo chưa thể hết tính hiệu điểm mạnh chúng SVTH: Kiều Văn Đông – MSSV: 20130947 64 GVHD: ThS Hướng phát triển đồ án tương lai là: mở rộng phát triển them nhiều game viết Python số ngôn ngữ khác, thêm tính cho game trang web game, nâng cấp web giao diện, tốc độ xử lý, server, tên miền… TÀI LIỆU THAM KHẢO [1] T.R Padmanabhan, Programing with Python [2] Jerremy Gibson, Introductions to Game Design, Prototyping, and Development [3] Al Sweigart, Making Games with Python & Pygame [4] TS Nguyễn Thanh Bình , Giáo trình Phân tích thiết kế hướng đối tượng, Đại học Bách khoa Hà Nội [5] https://docs.python.org/3/tutorial/ truy cập cuối ngày 20/2/2018 [6] https://www.pygame.org/docs/ truy cập cuối ngày 5/3/2018 [7] T.R Padmanabhan , Programing with Python [8] https://www.youtube.com/watch? v=gL5HBA_1bDQ&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=1 truy cập cuối ngày 1/6/2018 [9] https://ant.design/components truy cập cuối ngày 1/6/2018 [10] http://class.fedu.vn truy cập cuối ngày 1/6/2018 [11] https://hackernoon.com truy cập cuối ngày 1/6/2018 [12]https://codeburst.io/how-to-build-your-own-react-boilerplate-1a97d09337fd truy cập cuối ngày 1/6/2018 [13] https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2 truy cập cuối ngày 1/6/2018 [14] https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4 truy cập cuối ngày 1/6/2018 [15] https://stackoverflow.com/questions/tagged/reactjs truy cập cuối ngày 20/5/2018 [16] https://nodejs.vn truy cập cuối ngày 5/6/2018 [17] https://fullstackstation.com truy cập cuối ngày 5/6/2018 SVTH: Kiều Văn Đông – MSSV: 20130947 65 GVHD: ThS [18] https://viblo.asia/tags/reactjs truy cập cuối ngày 3/6/2018 [19] http://getbootstrap.com.vn/css/#forms truy cập cuối ngày 1/6/2018 Thuật ngữ Tiếng Việt BẢNG ĐỐI CHIẾU THUẬT NGỮ VIỆT – ANH Thuật ngữ Tiếng Anh API CNTT ĐATN SV JS CSS Interpreter Compiler Giao diện lập trình ứng dụng Cơng nghệ thơng tin Đồ án tốt nghiệp Sinh viên Java Scripts Cascading Style Sheets Trình thơng dịch Trình biên dịch PHỤ LỤC [1] Cài đặt Python Truy cập trang web : https://www.python.org/downloads/ Tải Python 3.6.5 trang chủ Chạy cài đặt tải [2] Liên kết Python với Netbeans (thay cho IDE Pycharm) Truy cập trang web : http://plugins.netbeans.org/PluginPortal/ Tải NetBeans 8.0.2 Khởi động Netbeans Trên công cụ lựa chọn Tools > Plugin Trong Tab Downloaded chọn Add Plugin… Chọn đường dẫn đến thư mục vừa tải plugin ấn OK Khởi động lại Netbeans [3] Cài thư viện Pygame SVTH: Kiều Văn Đông – MSSV: 20130947 66 GVHD: ThS Truy cập trang web : https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame Tải pygame-1.9.3-cp36-cp36m-win32.whl Copy pygame-1.9.3-cp36-cp36m-win32.whl đến thư mục C:\python3.6\Scripts Chạy lệnh “python –m ensurepip” Chạy lệnh “python –m ensurepip –upgrade” Chạy lệnh “pip install wheel” Chạy lệnh “pip install wheel – upgrade” Chạy lệnh “pip install pygame” Chạy lệnh “pip uninstall pygame” Chạy lệnh “pip install pygame-1.9.3-cp36-cp36m-win32.whl” [4] Cài đặt gói pip 10.0.1, gói setuptools 39.1.0, gói pygame 1.9.3, gói mysqlclient 1.3.12 Pycharm để ứng dụng thư viện, kết nối liệu game với web số cài đặt khác [5] Cài đặt XamPP để tạo môi trường ảo Web Server [6] Câu lệnh cài đặt cửa sổ cmd npm install để cài đặt gói JS npm start để chạy React app npm install -g create-react-app , create-react-app gameball để tạo project React SVTH: Kiều Văn Đông – MSSV: 20130947 67 ... ứng dụng lập trình, cụ thể: Python lập trình Game ReactJS lập trình website gameball Đồ án em bao gồm chương, nội dung chương sau: Chương đề cập đến khái niệm, đặc điểm ứng dụng lập trình Python. .. dễ hiểu, tất kết PYTHON TRÊN NỀN WEBSITE GAMEBALL phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất... ReactJS Chương trình bày phần triển khai ứng dụng Python để lập trình trò chơi bắn bóng ”Game Ball3” Chương trình bày triển khai ứng dụng ReactJS để lập trình website trò chơi GameBall3 ” Cuối