MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A CLASSIC GAME WEBSITE INSTRUCTOR: MSC. NGUYEN TRAN THI VAN STUDENT: TRAN DANG KHOA LE TRINH HOANG PHU SKL010538 Ho Chi Minh City, February, 2023 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT BUILDING A CLASSIC GAME WEBSITE INSTRUCTOR: Nguyễn Trần Thi Văn MSc. STUDENTS: Trần Đăng Khoa 18110024 Lê Trịnh Hoàng Phú 18110037 Ho Chi Minh City, February, 2023 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ******* COMMENTARY OF SUPERVISOR Students: Tran Dang Khoa Student ID: 18110024 Le Trinh Hoang Phu Student ID: 18110037 Major: Information Technology Title: Building a classic games website Instructor: Nguyen Tran Thi Van MSc COMMENTARY 1. Approval for oral defense? (Approved or denied) .) (Byword:) Ho Chi Minh, February 24, 2023 INSTRUCTOR (Name and signature) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ******* COMMENTARY OF REVIEWER Students: Tran Dang Khoa Student ID: 18110024 Le Trinh Hoang Phu Student ID: 18110037 Major: Information Technology Title: Building a classic games website Reviewer: COMMENTARY 7.
Approval for oral defense? (Approved or denied) .) (Byword:) Ho Chi Minh, February 24, 2023 REVIEWER (Name and signature) ACKNOWLEDGEMENT To finish this project, we wish to show our gratitude to Mr. Nguyen Tran Thi Van, his dedication is what we appreciate most. None of the knowledge introduced here would have been put into this project without his guidance. Because of a lack of knowledge, the project cannot avoid mistakes, nevertheless, finishing this project is meaningful to us as we can learn a lot from it and make it our experience in the future.
We are grateful to receive any kind of opinion about this project for the project to be complete and more applicable in the real environment. COMMITMENT We are committed to the "Classic games website" project as an independent study under the guidance of our instructor: Dr. Nguyen Tran Thi Van. We guarantee that this is a project made by us, do not copy, and do not use other people's source code without permission or without specifying the source.
We will take full responsibility for any violation. Ho Chi Minh, February 24, 2022 Students Tran Dang Khoa Le Trinh Hoang Phu TABLE OF CONTENTS CHAPTER 1. OBJECT AND SCOPE .3 HTML CSS & JavaScript. RELATED WORKS AND SYSTEM REQUIREMENTS.
Actors of system. Non-functional requirement.1 USECASE & SEQUENCE DIAGRAM .1 List of screen. 40 CHAPTER 5: IMPLEMENTATION AND TESTING .2 Test cases detail. 70 LIST OF FIGURES Hình 1 PaperGame.
10 Hình 3 Usecase Diagram. 16 Hình 4 Register diagram. 34 Hình 5 Login diagram. 35 Hình 6 Search diagram.
36 Hình 7 Play games diagram. 37 Hình 8 Play multiplayer game. 38 Hình 9 All screen. 39 Hình 10 Index page pic 1.
40 Hình 11 Index page pic 2. 40 Hình 12 Sign in page and form. 43 Hình 13 About us page. 44 Hình 14 All games page.
45 Hình 15Tictactoe game. 46 Hình 16 Colorblast game. 47 Hình 17 Menja game. 48 Hình 18 Menja 1 miss mode.
49 Hình 19 Menja casual mode. 49 Hình 20 Snake game. 50 Hình 22 Room list. 51 Hình 23 Tic Tac Toe 2 players.
51 Hình 24 Contact us page. 53 Hình 26 Player profile page. 54 Hình 27 Player list page. 55 Hình 28 Admin page.
55 LIST OF TABLES Bảng 1 Admin functional requirement. 11 Bảng 2 User functional requirement. 13 Bảng 4 User Related. 13 Bảng 5 Staff-related.
14 Bảng 7 Function Description. 15 Bảng 8 Usecase Modeling. 17 Bảng 9 Register usecase. 19 Bảng 10 Login usecase.
20 Bảng 11 Edit personal profile usecase. 21 Bảng 12 Search profile usecase. 22 Bảng 13 Search game usecase. 23 Bảng 14 View profile usecase.
24 Bảng 15 Play game 2048 usecase. 25 Bảng 16 Play game Snake usecase. 26 Bảng 17 Play game Menja usecase. 28 Bảng 18 Play game ColorBlast usecase.
29 Bảng 19 Play game Tic Tac Toe (bot mode) usecase. 30 Bảng 20 Play game Tic Tac Toe (2 players mode) use case. 31 Bảng 21 Admin add account usecase. 32 Bảng 22 Admin delete account usecase.
33 Bảng 23 Indexpage objects. 41 Bảng 24 Sign up form. 42 Bảng 25 Sign up form objects. 42 Bảng 26 Sign in page objects.
43 Bảng 27 All games page objects. 46 Bảng 28 Menja game object. 48 Bảng 29 Tic tac toe 2 players objects. 52 Bảng 30 Contact us page objects.
53 Bảng 31 Player profile objects. 54 Bảng 32 Admin object. 56 Bảng 33 Test case overview. 57 Bảng 34 Login test case.
58 Bảng 35 Register test case. 59 Bảng 36 Edit profile testcase. 60 Bảng 37 Real-time chat test case. 61 Bảng 38 View profile test case.
62 Bảng 39 Search profile test case. 63 Bảng 40 Search player name test case. 64 Bảng 41 Delete account test case. 65 Bảng 42 Add account test case.
65 Bảng 43 Login using account added by admin testcase. 67 WORK ASSIGNMENT Student ID Student Name Tasks - Researching the classic games, papergame.io - Taking responsibility for: o Database modeling. Trần Đăng o Design the functions of the product. 18110024 Khoa o Implement Menja, Snake, 2048 and Color blast.
o Manage the project. o Implement BE o Write report & PPT - Researching the Bonx UI desgin for main page. - Taking responsibility for: o Design and implement the user Lê Trịnh interface of the product 18110037 Hoàng Phú o Implement functions of the product o Implement the Tic Tac Toe and real- time chat. o Implement Backend and connect the website interface with API CHAPTER 1.
PROBLEM STATEMENTS Nowadays, people often face difficulty finding effective ways to relax and de- stress in their daily lives. With the increasing demands of work, personal commitments, and social obligations, many individuals struggle to find time for themselves and unwind. Additionally, people may not have the necessary resources or knowledge to effectively relax, leading to stress-related health problems and reduced productivity. Furthermore, many relaxation products or services available in the market may not cater to the specific needs of individuals or may be unaffordable for some.
Therefore, there is a need for accessible, affordable, and effective relaxation solutions that cater to the specific needs of individuals and help them de-stress and improve their overall well-being. And gaming is the effective way to relaxing after a long day, but there is a lack of easily accessible and comprehensive online platforms that provide a wide range of classic games in one place. Many classic games enthusiasts face difficulty finding reliable websites that offer a diverse collection of classic games that can be easily played on modern devices without any compatibility issues or technical glitches. Additionally, some classic game websites are outdated and have not kept up with modern design and functionality standards, which makes it challenging for users to navigate and enjoy the games.
Therefore, there is a need for a classic game website that is user-friendly, modern, and provides a diverse range of classic games that are easily accessible on modern devices, based on this premise, my graduation project focused on addressing the need for simple and accessible ways to relax by implementing the topic "Creating a Classic Games Website. PROJECT OBJECTIVES The website has a friendly interface for computers, easy to use, eye-catching. Besides, the website needs to have fast processing speed, accuracy, efficiency, and convenience for best experience. Following are some main functions of our application: Users can register and login to the system to play any games they want and get the best score to compare with other players, and interact with the system such as look for other player profile.
One real-time tic tac toe game online for 2 players. The administrator can manage all the user accounts such as delete, block or add new accounts. OBJECT AND SCOPE 1. Research object Based on features of the game, the following objects are considered: manage game source, high score after completing, source control, database for storing data and knowledge, technologies and algorithms for building.
Gitlab, Github is for source version control. And, ReactJs, Vercel, Mongoose, Express are selected for applying into the project. Research scope To clarify and avoid unrelated things, scope of research is considered based on three aspects in this project: - Research objects scope: technologies, tools and game management as well as applied algorithms in game project. - Survey objects scope: adminitrators can manage account entered to website, experienced manage of people who use algorithms for game.
- Time scope: a suitable duration of time is spent for doing research and survey. The purposes of determining the research 2 scope, researches has been conducted on key features of game management which should be implemented before carrying out the project.1 MERN MERN (MongoDB, Express, React, Node) is a technology stack that includes four fundamental components: MongoDB, Express.js, React, and Node. These components work together to create a full-stack web application.1 MongoDB MongoDB is a popular document-oriented NoSQL database used for storing and managing data in web applications. Unlike traditional SQL databases, which store data in tables with predefined schemas, MongoDB stores data in JSON-like documents with dynamic schemas.
This provides more flexibility and scalability for managing complex data structures. MongoDB is designed to work with unstructured and semi-structured data, making it suitable for handling a wide range of use cases. It supports a variety of data types, including arrays, sub-documents, and geospatial data. Additionally, MongoDB offers a range of features for data processing and aggregation, including a powerful query language, indexes, and MapReduce for data analysis.
MongoDB is also highly scalable and distributed, making it suitable for large-scale applications. It offers features such as horizontal scaling, automatic sharding, and load balancing to support high-performance, high-availability applications. MongoDB can also be easily integrated with other technologies, 3 such as Node.js and Express.js, making it a popular choice for MERN stack development. Overall, MongoDB provides a flexible and scalable solution for managing data in web applications.
Its dynamic schema and support for unstructured data make it suitable for handling complex data structures, while its scalability and distributed architecture make it ideal for large-scale applications.js is a web application framework for Node.js that provides a set of tools and features for building web applications and APIs. It is designed to be lightweight, flexible, and modular, allowing developers to create robust and scalable web applications. One of the key features of Express.js is its routing system, which allows developers to define a set of routes for handling HTTP requests. This enables the application to respond to specific requests with the appropriate data or functionality.js also provides middleware, which are functions that are executed before or after each request, allowing developers to add additional functionality such as logging, authentication, and error handling.js is also highly customizable, allowing developers to use a variety of templating engines and libraries for building their application.
Additionally, it integrates well with other Node.js modules and libraries, making it easy to use alongside other tools and technologies.js provides a powerful and flexible solution for building web applications and APIs with Node. Its routing system and middleware functionality enable developers to create custom and dynamic web applications, while its flexibility and modularity make it easy to customize and 4 extend.js is a popular choice for building the backend of web applications and is frequently used in conjunction with other technologies such as MongoDB and React.