Professional Documents
Culture Documents
Really Final
Really Final
GAMING HUB
Submitted to
BACHELOR OF TECHNOLOGY
in
Under the
guidance of
Dr. L.Praveen Kumar B.Tech., M.Tech., Ph.D
professor Department of CSE
2023-2024
RISHI MS INSTITUTE OF ENGINEERING & TECHNOLOGY FOR
WOMEN
(Affiliated to JNTUH University, Approved by AICTE)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CERTIFICATE
This is to certify that the project entitled GAMING HUB being submitted
by
ACHANTA SHARANYA 226P1A0506
CATTAMANCHI LAAHARI KALYANI 226P1A0524
CH RUPAVATHI 226P1A0530
CHENNOJU NAGA TEJA 226P1A0533
External Examine
AKNOWLEDGEMENT
We would like to express our sincere thanks to our Secretary Ms. Rajasree,
for her constant supervision and encouragement, which helped us in
completing this work successfully.
It's our privilege to thank Dr. Archana Patil, Head of the Department for her
encouragement during the progress of this work.
We express our sincere thanks to our Guide Dr. L.Praveen Kumar , for
giving us moral support, kind attention and valuable guidance to us
throughout this work.
We would like to thank our parents and our friends for being supportive all
the time, and we are very much obliged to them.
ACHANTA SHARANYA 226P1A0506
CATTAMANCHI LAAHARI KALYANI 226P1A0524
CH RUPAVATHI 226P1A0530
CHENNOJU NAGA TEJA 226P1A0533
Table of contents
CHAPTERS Page no
1. Introduction
1.1 Introduction
2. Literature Survey
3. Methodologies
3.1 System Architecture
3.2
5.2 Output
6. Result
7. Conclusion
8. Future Enhancements
9. References
Gaming Hub
ABSTRACT
The evolution of web technologies has brought in a new era of gaming, allowing
for the development of interactive and accessible gaming experiences directly
within web browsers. This project aims to establish a gaming hub housing a
variety of popular browser-based games, including Flappy Bird, memory game,
2048, and Snake, all crafted using HTML, CSS, BootStrap and JavaScript.
The principal aim is to provide users with a centralized platform for accessing and
enjoying a diverse array of captivating games without the need for additional
installations or downloads. Taking advantage of web technologies, the gaming hub
aspires to deliver seamless gameplay experiences across different devices and
browsers.
The gaming hub offers a carefully chosen collection of popular games such as
Flappy Bird , Memory game,2048, and Snake game. Each game is created with
care, using HTML for structure, CSS and BootStrap for style, and JavaScript for
interaction, ensuring smooth performance and engaging gameplay.
The development process focuses on using HTML5 canvas and CSS animations to
create visually appealing game interfaces. JavaScript manages game logic, user
inputs, and scoring. The modular design allows for easy integration of new games
and future expansion of the gaming hub.
Ensuring users enjoy playing games easily and fully is crucial. Our design focuses
on providing a seamless gaming experience, allowing users to switch between
games effortlessly and track their progress
6.1.1
6.1.2
6.1.3
6.1.4
6.1.5
CHAPTER 1
INTRODUCTION
1.1 Introduction:
The Gaming Hub project aims to create an online platform where users can
discover, review, and discuss various classic games. It serves as a central hub for
gamers to connect to their favourite games.
Flappy Bird: A side-scrolling game where the player controls a bird, attempting
to fly between columns of green pipes without hitting them.
Snake Game: A classic arcade game where the player controls a snake to
eat food and grow longer without running into the walls or itself.
2048: A sliding block puzzle game where the player combines numbered tiles
to reach the 2048 tile.
Play Button: Each game has a dedicated play button to start the game.
The project addresses the need for an engaging and convenient platform where
users can easily access and play popular casual games. Many users seek quick and
entertaining ways to relax and unwind, but finding and switching between different
game platforms can be inconvenient. Our gaming hub solves this problem by
providing a centralized location for popular games like Flappy Bird, Memory
Game, Snake Game, and 2048. Additionally, the platform includes a quiz feature
that suggests games based on the player's mood, enhancing the user experience by
1
helping them discover the most suitable game for their current state of mind. This
approach not only simplifies game discovery but also increases user engagement
and satisfaction.
1. Game Selection
Popular Casual Games: Identified widely enjoyed casual games such as Flappy Bird,
Memory Game, Snake Game, and 2048 for inclusion.
3. Web Technologies
HTML, CSS, and JavaScript: Reviewed basic techniques and best practices in these
core web technologies to ensure the platform is functional and accessible.
4. Performance Optimization
Loading Times: Investigated straightforward methods to ensure fast loading times for a
smooth user experience.
By focusing on these fundamental areas, the research aimed to support the creation of a
simple, effective, and engaging gaming hub that meets user expectations.
1.4 Existing System
The current landscape of casual gaming platforms has several limitations, including:
Lack of Personalization: Current platforms usually do not suggest games based
on user preferences or moods.
Monolithic Design: Many platforms have a single, static interface without
dynamic elements like quizzes or personalized recommendations.
Lack of Variety: Addicting games often emphasize a single genre or style, which
can limit user interest over time.
No Skill Progression: Players might not experience meaningful skill progression,
as these games often prioritize quick engagement over depth.
Downloads and Installation: Many existing games require users to download
and install them, which can be time-consuming and may involve compatibility
issues.
Negative Influence on Kids: Certain games can have a negative impact on
children, promoting violence or other inappropriate content.
Age Restrictions: Many games are age-restricted, limiting their accessibility to a
broader.
The proposed system is meant to give more easiness to the users that they can easily
addicted to the games. Designing a robust gaming hub system involves integrating
various features to create a seamless and engaging experience for gamers. Here's a
proposed system outline:
User Interface and Accessibility: Develop a user-friendly interface that's visually
appealing and easy to navigate.
Once the game is in playing mode, everything a player needs will be clearly
visible on the screen and easily accessible.
3
CHAPTER-02
LITERATURE SURVEY
1. The Early 2000s Were An Era For Online Games And I Miss It:
This article by Tori Honoré on BuzzFeed reminisces about online games and toys
from the early 2000s, evoking nostalgia for those who grew up during that time.
The author highlights 17 online-based toys and games that were popular during
that era, providing a brief description and personal reflections on each. The list
includes beloved favorites like Toontown Online, Webkinz, BarbieGirls, and
Runescape, among others.
Overall, the article serves as a nostalgic journey down memory lane, celebrating
the digital experiences that shaped the childhoods of many late '90s and 2000s
kids.
The article discusses the comeback of classic online games, noting their shift to
digital platforms and impact on the gaming industry. Traditional games are
gaining popularity online, offering nostalgic comfort amidst modern gaming's
pace. They're easily accessible and feature innovations like chat functions and
multiplayer modes. Advances in VR and AR enhance player experiences, while
classic games cultivate social connections across generations.
5
classic online games marks a significant development in the gaming industry. This
document covers various aspects of gaming, such as learning and development
benefits, social interactions, and tips for choosing appropriate games.
Additionally, it provides insights into different genres of games and offers advice
on healthy gaming habits.
This resource can be valuable for parents who want to understand the positive
aspects of gaming and how to ensure a safe and enriching gaming experience for
their children. It addresses common concerns, such as online safety, appropriate
game selection, and setting boundaries for screen time.
Online gaming has grown from being just entertainment to a useful educational
tool. With Web 2.0, technology has made it easier to share information and ideas.
Studies show that gaming can improve problem-solving skills, focus, and
attention. Game-based learning is popular because it makes learning fun and
rewarding. Games help students learn quickly through visualization.
Teachers use gamification, adding game elements like points and badges, to
engage students. Schools and universities are using these methods to enhance
learning.
Online gaming, technology, and user preferences have been evolving at a fast
pace giving rise to profound transformations
It is imperative for the players to stay aware of gaming trends, both emerging and
established
Having insight into these trends empowers players, developers, and industry
professionals to uncover profitable business opportunities
7
CHAPTER-03
METHODOLOGIES
3.1 System Architecture:
• Take a Quiz: The player is prompted to take a quiz to determine which game
might be suitable for their mood
• .Decision Point (Yes/No): Based on the player's decision, there are two possible
paths
• Play Suggested Game: The player proceeds to play the game that was suggested
by the quiz.
• Select a Game: The player manually selects a game from the available options
(Flappy Bird, Memory Game, Snake Game, 2048).
• Play Selected Game: The player proceeds to play the game they have selected.
• In summary, the flowchart shows two main paths: one where the player takes a
quiz and plays a suggested game, and another where the player skips the quiz and
directly selects a game to play
9
CHAPTER-04
Game Selection: The homepage must display four games: Flappy Bird,
Memory Game, Snake Game, and 2048.
Play Button: Each game should have a play button allowing users to launch
the game.
Mood Quiz: While taking this quiz player must answer simple question about
their gaming mood to get a game suggestion. Along with the game suggestion
the player gets a play button which allows them to launch the game.
Game-Specific Requirements
Flappy bird
In flappy bird the bird movement, collision, pipe generation, scrolling. Score
increment for each pipe cleared and game over screen with score will be displayed
at the end of the game.
Memory game
In memory game card flipping and matching logic, scoring for correct matches
and the game over screen with score displayed at the end.
2048
In 2048 game tile movement and merging logic and score is given for each merge
at the end for the game over screen with score displayed.
Snake game
In the Snake game the snake movement and collision detection, food generation
and
scoring. As the length of the snake increases, scoring is also increased. At the end
of the
game the score is displayed.
11
1.Load Time:Games load within 3-5 seconds.
2. Frame rate:
● Games maintain a minimum of 30 FPS (frames per second).
● Smooth animation and transitions.
3.Responsiveness:
● Games respond to user input within 100-200 ms (milliseconds).
● No noticeable lag or delay.
4.Memory usage:
● Games use less than 100 MB of memory.
● No memory leaks or excessive usage.
5.CPU usage:
● Games use less than 20% CPU resources.
● No excessive CPU usage or spikes.
6. Browser compatibility:
● Games work seamlessly across Chrome, Firefox, and Edge.
● No browser-specific issues or errors.
7. Error handling:
● Games handle errors gracefully and recover quickly.
● No crashes or freezes.
3. Software Requirements
Code
4. Hardware Requirements
RAM:2GB
Input Devices: Keyboard and mouseInternet Connection
13
Sound: Integrated sound card for audio output
4.51 HTML:
4.52 CSS:
4.53 JavaScript
JavaScript is a scripting language used to create and control dynamic website
content, i.e. anything that moves, refreshes, or otherwise changes on your screen
without requiring you to manually reload a web page. Features like: animated
graphics. photo slideshows.
4.54 Bootstrap
Bootstrap is a popular front-end framework for developing responsive websites
and web applications. It provides pre-built design templates and components
such as
grids, navigation bars, buttons, forms, and more, which can be easily customized
and integrated into web projects.
4.6 MODULES
Homepage Module: Controls the display of four games i.e flappy bird, sanke
game, memory game and 2048 along with the play button. It also displays the
game suggesting quiz.
Game Modules: Separate modules for each game, handling their respective
logic and functionality.
Mood Quiz Module: It allows user to choose an option according to their
mood and suggests a game along with the play button.
15
CHAPTER-05
Main Page:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gaming Hub</title>
</head>
<body>
<div id="heading">
<h1>Gaming Hub</h1>
</div>
<div class="games">
<div class="game">
<h5>Flappy Bird</h5>
<buton id="playFlappy">Play</button>
</div>
</div>
</body>
CSS
17
body {
#heading {
text-align: center; font-size:
.games {
display: flex;
justify-content: center; gap: 2rem;
.game {
}
Javascript
document.addEventListener('DOMContentLoaded', function() {
playFlappy.addEventListener('click', function() {
window.location.href = './flappyBird/flappy.html';
}
5.1.1 Fig: Main page
FLAPPY BIRD:
html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Flappy Bird</title>
<body>
<br>
19
<button onclick="restartGame()">Restart</button>
<script src='flappy.js'></script>
<footer>
</footer>
</body>
</html>
css
body {
font-family: 'Courier New', Courier, monospace; text-align:
center;
button {
aliceblue;
p{
font-weight: 100;
}
button:hover {
background-color: #45a049;
#back {
position: absolute;
bottom: 10px;
right: 10px;
Javascript:
document.addEventListener("keydown", moveBird);
21
5.1.2 Fig: Flappy Bird
SNAKE GAME:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport",
content="width=device-width, initial-scale=1.0">
<title>Snake Game </title>
<link rel="stylesheet" href="snakeGame.css">
<script src="snakeGame.js"></script>
</head>
<body>
<h1>Snake Game
</h1>
<canvas id="board"></canvas>
</body>
<footer>
<button id="back" onclick="goBack()">Back</button>
</footer>
<script>
function goBack() { window.location.href =
'../index.html';
}
</script>
</html>
CSS
body {
text-align: center;
}
button:hover {
background-color: #45a049;
}
#back{ bottom:
10px; right: 10px;
padding: 10px 20px;
}
JAVASCRIPT:
function drawSnake() {
// Code to draw the snake on the canvas
}
function drawFood() {
23
// Code to draw the food on the canvas
}
function update() {
// Code to update the game state
}
function gameOver() {
// Code to handle game over
}
MEMORY GAME:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>MEMORYGAME</title>
</head>
<body>
<div class="container">
<h2>MEMORY GAME</h2>
<div class="game">
<div class="item">😍</div>
<div class="item">🥰</div>
</div>
</div>
<script>
items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('click', () => {
item.classList.add('selected');
});
});
25
</script>
</body></html>
CSS:
.reset {
padding: 15px 20px; color: teal;
background: azure;
font-size: 1.5em;
letter-spacing: 0.1em;
text-transform: uppercase; cursor:
pointer;
font-weight: 600;
}
.item::after {
content: '';
position: absolute;
inset: 0;
background: teal;
/* opacity: 0.85; */ transition: 0.25s;
transform: rotateY(0deg); backface-
visibility: hidden;
}
.boxOpen::after,
.boxMatch::after {
Transform:rotate(180deg);
}
27
5.1.4 Fig : Memory Game
2048:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Importing Google Fonts API Link -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Ubunt
u:wght@700&display=swap"
rel="stylesheet" />
<div class="grid">
<div class="grid-item">
<p id="1"></p>
</div>
<div class="grid-item">
<p id="2"></p>
</div>
….
<div class="grid-item">
<p id="16"></p>
</div>
</div>
</div>
</body>
</html>
CSS:
.score {
width: 100%; display:
flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap; font-size:
2rem; text-align: center;
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-
template-rows: 1fr 1fr 1fr 1fr; width: 400px;
29
height: 400px;
background-color: rgb(209, 207, 207);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.753);
}
Javascript:
result = document.querySelector(".result");
let score = 0;
let moves = 0;
let options = [2, 4, 8, 2, 4, 8, 2, 2, 4, 4, 2, 8, 2, 2, 4, 4, 2]; // Initial options for new
blocks
(index % 4 === 0) {
item.firstElementChild.innerText = "";
matrix.push(row);
row = [];
} else {
item.firstElementChild.innerText = "";
row.push(item);
}
document.addEventListener("keydown", moveBlocks);
function moveBlocks(e) {
}
// Generate new blocks periodically
setInterval(() => {
}, 8000);
} else {
function updateColors() {
31
5.1.5 Fig:2048
<div class="quiz-container">
<h2 class="text-center">What's Your Gaming Mood Today?</h2>
<form id="quizForm">
<div class="form-group">
<label>How are you feeling right now?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="mood"
id="option1" value="a">
<label class="form-check-label" for="option1">
Energetic and ready for action!
</label>
</div>
function getGame() {
var form = document.getElementById("quizForm");
var resultDiv = document.getElementById("result");
var mood = form.elements["mood"].value;
var suggestion = "";
var flappyUrl = "flappybird/flappy.html";
var ticUrl = "tic/tic.html";
switch (mood) {
case "a":
suggestion = "Try Flappy Bird for some fast-paced action and
excitement!";
gameUrl ='./flappybird/flappy.html';
break;
case "b":
suggestion = "Test your memory with a Memory Game for a fun and
challenging experience!";
playButton.onclick = function() {
window.location.href = gameUrl; // Redirect to the game URL when the
button is clicked
};
resultDiv.appendChild(playButton); // Append the button to the result
div
}
</script>
</body>
33
CHAPTER 06
RESULT
Game Performance: All games—Flappy Bird, Memory Game, Snake Game, and
2048—operated smoothly without any lag or crashes. This performance was consistent
across different browsers tested.
Quiz Effectiveness: The mood quiz was well-received and accurately recommended
games based on responses, enhancing the user experience through personalized
suggestions.
Aesthetic and Design: The design of the gaming hub was visually appealing, with a
clean layout and easy navigation. Users found the interface user-friendly and visually
engaging.
Project Goals: Overall, the project met its objectives, demonstrating functional and
engaging gameplay, alongside an effective mood quiz. The documentation and coding
components were completed successfully, reflecting a comprehensive effort from the
team.
CHAPTER 07
CONCLUSION
In conclusion, the creation of a gaming hub represents more than just a platform
for accessing and playing games. It embodies a vision of community, discovery,
and immersion within the world of gaming. Through meticulous design and
development, our gaming hub project aims to achieve several key objectives:
The project has been completed successfully as specified by the requirements. The
implementation is done in a step-by-step manner. Each module has been
developed individually to obtain the required output in the desired form. On our
way working on this interesting project, we learned many things. While working
on this project, we got valuable experience on the stages involved while
developing any web application that could be useful for us. During the duration of
this project, we learned the following things through the implementation and
testing of the project:
HTML
CSS
JAVASCRIPT
BOOTSTRAP
The future improvements can be made in certain areas of the project. There is
scope for extending the project to incorporate more features by Including more
games to the system, Improving the message system, Including advanced
methods for
notification.
Ultimately, our gaming hub project is not just about building a platform; it's about
building an experience—an experience that transcends boundaries, fosters
35
connections, and celebrates the boundless creativity and joy of gaming. As we
embark on this journey, we invite gamers from all walks of life to join us in shaping
the future of gaming together.
37
CHAPTER-08
FUTURE ENHANCEMENTS
Social Sharing: Allow users to share their achievements, high scores, or favourite
games on social media platforms, increasing engagement and attracting new users.
Customization Options: Provide customization features such as themes,
backgrounds, or character skins to personalize the gaming experience for users.
Feedback and Bug Reporting: Integrate a feedback system where users can
provide suggestions, report bugs, or request new features directly within the
gaming hub.
CHAPTER-09
REFERENCES
Honoré, T. (n.d.). The Early 2000s Were An Era For Online Games And I
Miss It. BuzzFeed. Retrieved from
https://www.buzzfeed.com/tori_honore/childhood- games-and-toys-you-
forgot
https://www.tmcnet.com/topics/articles/2024/01/02/458207-transitioning-
towards- future-classic-online-games-lead-way.htm
https://www.internetmatters.org/resources/online-gaming-advice/online-
gaming- the-benefits/
39