Aligarh College Of Engineering And Technology

Aligarh

(APPROVED BY A.I.C.T.E. & AFFILIATED TO A.K.T.U., LUCKNOW)

2018-2022

PROJECT REPORT

ON

“GAMING WEB APPLICATION ”

IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR

THE AWARD

OF THE DEGREE OF

Bachelor of Technology
IN
Computer Science & Engineering

SUBMITTED BY
SHRUTI VARSHNEY
1810910070
PRANJAL VARSHNEY
1810910057
NEHA SAXENA
1810910048

UNDER THE GUIDANCE OF:

Mr. ROHIT YADAV
 DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING
HOD (CSE) Project
Incharge
Dr.Anand sharma Mr.Rohit
Yadav

DECLARATION

We hereby declare that the project report entitled

“GAMING WEB APPLICATION” Submitted to Aligarh College
Of Engineering & Technology, Aligarh in partial fulfillment
of the requirement for the award of the degree of Bachelor
of Technology in Computer Science and Engineering
department is a record of bonafide project work carried out
by “ PRANJAL VARSHNEY , SHRUTI VARSHNEY AND NEHA
SAXENA” under the guidance of “ Mr. Rohit Yadav” . We
further declare that the work reported in this project has
not been submitted and will not be submitted, either in part
or in full, for the award of any other degree or diploma or
any other similar titles.

Date : Signature of the Students

 CERTIFICATE

This is to certify that the project entitled, “GAMING WEB

APPLICATION” is the bona fide work submitted by “PRANJAL
VARSHNEY , SHRUTI VARSHNEY AND NEHA SAXENA”,
student of Bachelor of Technology (Computer Science and
Engineering) of Aligarh College of Engineering & Technology,
Aligarh during the academic year 2021 -22 , in partial fulfillment of
the Requirements for the award of the degree of Bachelor of
Technology (Computer Science and Engineering) and that the
project has not formed the basis for the award previously of any
other degree, diploma, fellowship or any other similar title.

Signature of HOD: Signature of Project

Incharge:

(Dr. Anand Sharma) (Mr. Rohit Yadav)

Date:
 AKNOWLEDGEMENT

It is indeed a great pleasure to express our sincere thanks to our

supervisor
Mr. Rohit Yadav Assistant Professor, Department of Computer
Science & Engineering, Aligarh College Of Engineering &
Technology, Aligarh for his invaluable advices and pragmatic views
of project. His keen interest, sincere advice and kind help
throughout during the completion of this work had been a regular
source of encouragement.
We are thankful to Dr. Anand Sharma, Head ,Computer Science &
Engineering Department of the college for providing me
department labs and terminals for my Project and other teachers of
Computer Science & Engineering Department for their friendly
treatment and cooperation in the valuable advice and suggestion.
We are grateful to them for their timely feedback which helped me
track and schedule the process effectively. Their time, ideas and
encouragement that they gave are helping me to complete my
project efficiently.
 ABSTRACT

GAMING WEB APPLICATION

This application includes various exciting games. Each of the

game is bulid using vanilla javascript. User can easily access each
of the games by just clicking on the name .This app include
2048,Bubble shot,Tic-toc-toe games.

BUBBLE SHOT: The Bubble shooter game is a single-player game.

Here, the player has to control the spinning arrow (as a shooter).
The main objective of this bubble shooter game is to shoot the
falling bubbles as a block. And as it shoots the bubbles, it gets a
score point. And the player loses when any of the bubbles touch the
ground level.
Making of the game
This game is simply developed using HTML5 and JavaScript. The PC
controls of this game are also simple. You just have to use the
cursor or a mouse for moving the shooter from left to right. The
game is on until you manage the bubble from falling into the
ground. We can see the game scores below the gaming area. All the
gaming function is set from Javascript whereas HTML is set for the
layouts and other minor functions.
2048: We start with HTML as usual. We have a wrapper div, a grid
div and 16 cells as squares of our game. We will also have an
element that is not here, but we will use for numbers with the
number class we will add with Javascript. CSS side is too short. Here
we have achieved a compatible structure for each screen
dimensions using vmin. By using cell:nth-child(4n+1)
we give left margin to the first and every 5th cell class named
element with the same parent. We came to the Javascript section.
Here we will create a more aggregated structure using the modules.
Our main javascript file is 2048. and we start our grid and game
using the module. Then we listen to the method when the arrow
keys are pressed. init method of the grid keyup event and run the
slide We also create the necessary values in our grid.js file. We
check that the game is active with a variable called playable. In
the directionRoots array, we keep the indexes of the squares on the
slide direction edge. Then, when slide happens, we use these
indices to check the squares and number if they have opposite to
the slide direction. In our number.js file, we do the sliding and
merging numbers. We give the top, left values of the to move. With
the transition value we provide with CSS, this move does not
happen as jump, but an animation. cell number

TIC-TAC-TOE: A Basic Tic-Tac-Toe game built using

HTML/javascript/CSS. 2 player X & O,by default,when any square is
clicked X is marked and then player O and so on. This is human vs
computer,which can be played by 1 person & computer.The result is
displaying after if the match draw and if the match won by any of
the player ,the winner is displayed.TIC-TAC-TOE , noughts &
crosses,or Xs and Os is a paper andpencil game for two players,X &
O ,who take turns making spaces in a 3*3 grid.The player who
succeeds in placing three of their marks in a
horizontal,vertical,or .diagonal row is the winner.
 TABLE OF CONTENTS
Declaration

Certificate

Acknowledgement

Abstract

1. INTRODUCTION……………………………….……...……….…..………… 1-
3
2.System Requirement & Specification ……………………….. 5-7
2.1 Purpose …………………………………………………………………. 5
2.2 About the Project …………………………………………...................... 6
2.3 Scope …………………………………...……………………………..... 7
3. Technical Overview ……………………………………………… 9-10
3.1 HTML ………………………………………………………………………... 9
3.2 CSS …………………… …………………………………………………... 9-10
3.3 JAVASCRIPT ……………---……………………………………………….. 10
4. SOFTWARE MODEL ………………………………………….. 12-14
4.1 WATERFALL MODEL ……………………………………………………...12-13
4.2 APPLICATIONS OF WATERFALL MODEL ..................................................... 13
4.3 ADVANTAGES &DISADVANTAGES OF WATERFALL MODEL ..................... 14
5. FEASIBILITY STUDY ……………………………………….... 16-17
6. SYSTEM ANALYSIS ……………………….…………………..19
7. DESIGN …………………………………….......………………... 21-35
8.1 Differentiate between traditional and object oriented approach …...………….. 23
8.2 DATA FLOW DIGRAM………………………………………………….. 23-25
8..3 ER-DIAGRAM----------------------------------------------------------------------------25-29
8.3 USE CASE DIAGRAM ----------------------------------------------------------------------------30-31
8.4 STATE CHART DIAGRAM----------------------------------------------------------------------31-33
8.5 SEQUENCE DAIGRAM ------------------------------------------------------------------------34-35
8.6 ACTIVITY DIAGRAM ---------------------------------------------------------------------------35
8.CODING……………………………………………………….37-113

CONCLUSION

BIBLIOGRAPHY