building a classic game website

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

INTRODUCTION

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

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

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

3 scope, researches has been conducted on key features of game management which should be implemented before carrying out the project.

THEORY FUNDAMENTALS

MERN

MERN (MongoDB, Express, React, Node) is a technology stack that includes four fundamental components: MongoDB, Express.js, React, and

Node.js These components work together to create a full-stack web application

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,

4 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

Express.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 Express.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

Express.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

Express.js provides a powerful and flexible solution for building web applications and APIs with Node.js 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

5 extend Overall, Express.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

React is a popular JavaScript library for building user interfaces in web applications It provides a component-based architecture, which allows developers to create modular and reusable UI components React is designed to be fast, efficient, and scalable, making it a popular choice for building dynamic and interactive web applications

One of the key features of React is its virtual DOM (Document Object Model) technology The virtual DOM is a lightweight representation of the actual DOM, which allows React to efficiently update the UI when data changes When data changes, React updates the virtual DOM, compares it with the actual DOM, and makes the necessary updates to the UI without the need to reload the entire page This approach results in a faster and more responsive user interface

React also provides a declarative syntax, which allows developers to describe the desired UI state and let React handle the actual updates This approach makes it easier to write and maintain code, as developers can focus on describing the desired state of the UI rather than the specific details of how to update the UI

React can be used in combination with other libraries and frameworks, such as Redux, to manage the application state and handle data flow It can also be used with server-side rendering to improve performance and SEO

Node.js is a popular open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser Node.js provides a set of tools and features for building scalable and high-performance network applications, server-side web applications, and command-line tools

One of the key features of Node.js is its event-driven, non-blocking I/O (input/output) model This allows Node.js to handle large numbers of connections with low overhead and high scalability Node.js is built on top of Google's V8 JavaScript engine, which provides a fast and efficient execution environment for JavaScript code

Node.js comes with a built-in package manager, known as npm (Node Package Manager), which provides access to a large number of open-source libraries and modules This makes it easy for developers to find and use third- party modules and libraries in their applications, and also makes it easy to share their own modules and libraries with the community

Socket.io

Socket.IO is a JavaScript library that enables real-time, bidirectional communication between a client and a server or between two peers It is built on top of the WebSocket protocol and provides a simple and easy-to-use API for establishing and managing socket connections

Socket.IO supports both server-side and client-side implementation, and it can be used with a variety of programming languages and platforms,

7 including Node.js, Ruby, Python, and Java It also provides fallbacks for older browsers and can work with most firewalls and proxies

One of the key features of Socket.IO is its ability to handle both binary and text data, which allows for the transfer of a wide variety of data types, including audio and video files It also provides support for broadcasting, room-based communication, and cross-browser compatibility

Socket.IO uses an event-driven architecture, where the client and server can send and receive events, which are essentially messages containing data This makes it easy to build real-time applications such as chat applications, online games, and collaboration tools

Overall, Socket.IO provides a simple and efficient solution for building real-time, bidirectional communication between a client and a server or between two peers Its support for binary and text data, broadcasting, room- based communication, and cross-browser compatibility make it a popular choice for building real-time applications.

HTML CSS & JavaScript

HTML, CSS, and JavaScript are the three core technologies used for creating web pages and web applications

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages It provides a set of tags and attributes that define the structure and content of a web page, such as headings, paragraphs, images, links, and forms HTML is a static language, which means that it can only be used to create static web pages that do not change in response to user input

CSS (Cascading Style Sheets) is a style sheet language used for controlling the visual presentation of a web page It provides a set of rules and properties that can be used to define the layout, typography, colors, and other

8 visual aspects of a web page CSS is a powerful language that can be used to create visually stunning and responsive web pages

JavaScript is a dynamic programming language used for adding interactivity and behavior to a web page It provides a set of built-in functions and objects that can be used to manipulate the content and structure of a web page, as well as respond to user input and interact with web servers JavaScript can be used to create dynamic and interactive web pages, as well as build complex web applications

Together, HTML, CSS, and JavaScript form the backbone of modern web development They provide a powerful and flexible platform for building web pages and web applications that are engaging, responsive, and interactive

By mastering these three core technologies, developers can create a wide range of web experiences, from simple web pages to complex web applications

RELATED WORKS AND SYSTEM REQUIREMENTS

RELATED WORK

The idea of building a classic game website has been explored by various developers and organizations in the past Many of these websites aim to provide users with a platform to play classic games online, and some also include features such as user profiles, leaderboards, and social sharing

Papergames.io is a website that offers a collection of classic pen- and-paper games that can be played online with friends or other players from around the world The website's collection includes popular games such as Tic Tac Toe, Dots and Boxes, and Hangman, as well as lesser-known games like Sprouts and Gomoku

Players can create their own private rooms to play with friends, or they can join public rooms to play with other users The website also features a chat function, allowing players to communicate with each other during the game

Hình 2 Papergame.io website 2 o Real-time play mode o Private room o Real-time chat while playing o High score store

SYSTEM REQUIREMENT

- Storage: All information about the

11 o User: UserID, userName, userPassword, userImage, userEmail, gameScore o Admin: adName, adEmail, adPassword

- Efficient operation of games system

Searching: o Search user by name (client side) o Search user by name (Admin side) o Search game name

Division (user): Admin ID: admin

ID Function Type Constraint/Formula code For m code

1 Sign in Sign in Login function needs:

Search user function is based on information, namely:

Division (user): User ID: user

ID Function Type Constraint/Formula code For m code

1 Sign in Sign in Login function needs:

2 Sign up Sign up Register function needs:

● Register by filling the form

Search game function is based on information, namely:

5 Log out Log out Log out function help user can exist user’s account

● Environment: The system operates on a Website, users and admins can access through provided accounts

1 Role management - Administrator: allow all roles

- Player: allowed search game name, other player profile, play games, edit personal information

3.1.1 Actors of system o User: As an application user, who can use all the functions the web has, such as login, register, play game o Admin: Can manage all user account

1 Website can be updated and modified to adapt the trend of customers as well as the requirements of managing of the owners

- Feature buttons are laid out simple, convenient and visible

- Functional windows can interact with each other, provide users with efficiency

3 - Database is kept secure and easy to be accessed

- The system operates stable, reliable and instant response

1  The module, source code and other proportion of the system can be reused for latter projects

 The source code can be recycled and applied for other programs without changing the cores

ID Contents Criteria Description Note

1 The search products function is convenient, natural, and visible

Convenience Support the keyword-like searching

2 UI Design easy to see, user-friendly, simple operation

Effectiveness It doesn't take much of the time to complete any action on the application

Allow user to search game by keyword

Allows users to search player profile by name

Allows users to view other player profile

4 Play game Allows user and guest to play all games

5 Register Allows guest to register new account

6 Login Allows user or administrator log into website

Allows user to view their own profile and edit it

Account Allow administrator to view all accounts in website

Account Allow administrator to delete any account in website

Account Allow administrator to add account in website

Brief Description The way guest registers personal account

This usecase starts when the user chooses the function to register

4 Display success message and navigate to home page

Register failed 1 “The input is not valid E-mail” or “The two passwords that you entered do not match!”

Success Successfully register, user navigate to main page

Failure Register failed, check input information again

Brief Description The way the user login into website

This usecase starts when the user chooses the function to login

2 Enter user email and password

3 Login successfully, navigate to main page

Login failure 1 Display “An error occurred, please return to the hompage or try again”

The user has account registed

Success Login successfully, display success message

Failure Login failure, user login failure

Brief Description The way user change their username and password

1 Choose “Player Info” page on taskbar

3 User enter new username and password

4 Click update and change successfully

1 User cancels update by not fill in the update form

2 User name and password have no change

The user entered website with their account

Bảng 11 Edit personal profile usecase

Brief Description The way user search other player profile by keyword

1 Choose “Player Details” on taskbar

4 Display player name list result base on keyword

Cancel Search Product 1 Actor cancels search by deleting keyword

2 Actor stay on the same screen, no result out

Success Search player profile successfully, display profile

Failure Search failed and stay on the same screen, no result out

Brief Description The way user search game name by keyword

1 Choose “All games” page on taskbar

4 Actor press “Enter” or “Search” icon

5 Display game result base on keyword

Cancel Search Product 1 Actor cancels search product by deleting keyword

2 Actor stay on the same screen

Success Search game name successfully, display game

Failure Search failed and stay on the same screen, no result out

Brief Description The way user view other player profile

1 Choose “Player Details” from taskbar

2 Choose on profile from list

Cancel View 1 Actor cancels search product by not clicking any profile

2 Actor stay on the same screen

Brief Description The way user play 2048 game

1 Choose “All games” page from taskbar

Brief Description The way user play Snake game

Bảng 16 Play game Snake usecase

Brief Description The way user play Menja game

Bảng 17 Play game Menja usecase

Brief Description The way user play Colorblast game

Bảng 18 Play game ColorBlast usecase

3.3.3.11 Play game Tic Tac Toe(bot mode)

Name Play game Tic Tac Toe (bot mode)

Brief Description The way user play Tic Tac Toe game

2 Choose Tic Tac Toe (bot) game image

Bảng 19 Play game Tic Tac Toe (bot mode) usecase

3.3.3.12 Play game Tic Tac Toe (2 player mode)

Name Play game Tic Tac Toe (bot mode)

Brief Description The way user play Tic Tac Toe game

2 Choose Tic Tac Toe (bot) game image

Bảng 20 Play game Tic Tac Toe (2 players mode) use case

Brief Description The way admin add account in admin page directly

3 Input information and click add

The admin entered admin website

Failure Existed email, try input another email

Bảng 21 Admin add account usecase

Brief Description The way admin delete account in admin page directly

The admin entered admin website

Bảng 22 Admin delete account usecase

SYSTEM DESIGN

User interface

Show main operation of website

1 Button Homepage button, back to main page

2 Button All page navigation button

3 Button Click to navigate to contact form

4 Button Click to open login form

5 Button Click to open register form

6 Button Click to navigate to All games page

7 Button Click to navigate to “About us” page detail

8 Button Click to open All games page

9 Button Click to open players profile detail

10 Button Click to open player list

11 Button Click to open personal profile

12 Button Click to open Sign up form

13 Button Click to open Login form

15 Button Click to log current account out

Bảng 23 Indexpage objects 4.2.2.2 Register page

Include sign up form of website

5 Button Click to sign up

Bảng 25 Sign up form objects

Include login form of website

Hình 12 Sign in page and form

Bảng 26 Sign in page objects

Play now button: click to navigate to All games page

Way for user to enter games

1 Input Input game name to search

2 Button Open Tic Tac Toe game (2 player)

Bảng 27 All games page objects 4.2.2.6 Tic Tac Toe game (play with bot)

- Click any white square to make a move (first 3 point win)

- Reset button: start new game

Use “left” and “right” arrows key or A and D to move your ship, press Spacebar to shoot enemies

Hình 16 Colorblast game 4.2.2.8 Menja game

Use mouse slice to cut the incoming cube

1 Button Start game ( 1 miss lose mode )

2 Button Start game (Casual – count point mode)

Use arrows key no control your snake and eat food to get point, do not bite yourself

Use arrow keyboard to merge the box, try your best to get high score

4.2.2.11 Tic Tac Toe game (2 players mode):

Hình 23 Tic Tac Toe 2 players

1 Button Choose a room to play

2 Input Input message to send to your friend

3 Button Click to send message

Bảng 29 Tic tac toe 2 players objects

Send us your ideas to help improve our website

6 Button Click to send review

Bảng 30 Contact us page objects 4.2.2.13 404 page

Go back home button: click to go back to main page

Manage personal profile and score

3 Button Confirm update name and pass

Contain all player public profile

3 Button Confirm update name and pass

IMPLEMENTATION AND TESTING

Implementation process

- Plan and Preparation: o Do overview research (problem statement, research objects, research scope) o Do research about related websites o Determine features included in the website

- Do design o Structure the website o Draw website layout o Do database schemas

- Execution: o Use mongodb and js to write databases o Write features for admin’s site and player’s site

- Testing: o Do testing o Fix bugs

Technologies

- Front-end: HTML, CSS, JavaScript, ReactJs

- Back-end: Nodejs, Expressjs, Socket.io

Test cases

UC_04 Send messages when in Tic Tac Toe game Pass

UC_05 Play all games Pass

UC_06 View player profile Pass

UC_07 Search game name Pass

UC_08 Search player name Pass

UC_09 Delete account with admin page Pass

UC_10 Add account with admin page Pass

UC_11 Login using account added by admin Pass

Test Description Conditions Designed/Executed

Testing if a user can login to website

User enters the correct username and password

No expected result No result Pass

2 Press enter or click “Login”

Login success and navigate to mainpage

Testing if a user can sign up new account Khoa

Expected Results Actual Results Pass/Fail

User fill the sign up form with correct information

Register success, notification pop up

Testing if a user can change their username and password Khoa

Description Expected Results Actual Results Pass/Fail

User login with their account

User input new username and password

5 Enter or click update button Update successful Update successful Pass

5.3.2.4 Chat in game test case

Send messages when in Tic Tac Toe game UC_04 10/2/2023

Testing if player can chat with their friend when in Tic Tac Toe game Khoa

User login with their account

Room list appear Room list appear Pass

Navigate to game screen Pass

Player chat with Message box

Message sent to other player

Message sent to other player Pass

Bảng 37 Real-time chat test case

Testing if user can see other player profile Khoa

Navigate to player profile Pass

Bảng 38 View profile test case

Testing if user can search profile by name Phu

Input keyword on search bar

Profile match with keyword appear

Bảng 39 Search profile test case 5.3.2.8 Search player name test case

Testing if user can search game by name Phu

Input keyword on search bar

Game match with keyword appear

Bảng 40 Search player name test case

5.3.2.9 Delete account with admin page test case

Delete account with admin page UC_09 10/2/2023

Testing if admin can delete user account Phu

Login to admin page with admin account

Login success and navigate to admin page

Bảng 41 Delete account test case 5.3.2.10 Add account with admin page test case

Add account with admin page UC_10 10/2/2023

Testing if admin can add new user account Phu

2 Click add button Form pop up Form pop up Pass

4 Click add New account add New account add Pass

Bảng 42 Add account test case

5.3.2.11 Use account added from admin page test case

Use account added from admin page UC_11 10/2/2023

Testing if account added by admin page can login to website Phu

2 Click add button Form pop up Form pop up Pass

4 Click add New account add New account add Pass

Open login page from main page

Login form pop up Pass

6 Enter account No expected result No result Pass

Login success and navigate to main page

Bảng 43 Login using account added by admin testcase

CONCLUSIONS

Tiêu đề	Building a Classic Game Website
Tác giả	Tran Dang Khoa, Le Trinh Hoang Phu
Người hướng dẫn	Nguyen Tran Thi Van, MSc.
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Capstone Project
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	81
Dung lượng	4,51 MB