2D ACCELERATOR BLOCK GAME USING HTML, CSS AND

JAVA SCRIPT

SUBMITTED BY
SANA-ULLAH KHALIL
ROLL NO 640

SUPERVISED BY
MR. ADIL KHAN

This thesis is submitted in partial fullfillment for the award of the degree of BS(CS)

SHAYKH ZAYED ISLAMIC CENTRE

UNIVERSITY OF PESHAWAR
SESSION (2018 – 2022)
 DECLARATION

I declared that this thesis is composed by myself and that the work contained herein is
my own in the partial fulfillment of the requirements of the award of degree of BS(CS) has
been approved by the supervisor committee. This work has not been submitted for any
other degree or professional qualification except as specified.

Internal Examiner:
Mr. Adil Khan

Lecturer in Computer Science,

SZIC, University of Peshawar.

Remarks: _____________ Signature: ______________

External Examiner:

Remarks: _____________ Signature: ______________

Director:
Remarks : _____________ Signature: ______________

SZIC, University of Peshawar.

Dated :
 ACKNOWLEDGMENT

I am very grateful to Allah for giving me strength, knowledge, skills, motivation and

chance to complete this project. I would like to thanks to my supervisor Mr. Adil khan

for giving me his precious time, guidance, knowledge and encouragement which helped

me to complete this project. I could not have finished this project without the full

support of my beloved family members and teachers. Their love, encouragement and

continuous pray have made me stronger each day on completing this project. I would

like to lengthen my deepest appreciation to all the staff in my department, all of my

friends, and staff in the Shaykh Zayed Islamic center, the University of Peshawar for

their kind support and help and support.

 ABSTRACT

The main and basic idea of creating this game is it simplicity and simple coding in HTML
(Hyper Text Markup Language), CSS, Bootstrap and JavaScript. The Basic idea of using
HTML and CSS that is used for the designing while JavaScript is used for the gaming
functionality and especially any modification or updating in the game.

Player satisfaction in computer games depends on a variety of factors that focus on the
contribution of the behavior and strategy of game opponents in predator games. A
quantitative metric of the ‘Interestingness’ of opponent behaviors is defined based on
qualitative considerations of what is enjoyable in such games and mathematical
formulation grounded in observable data is derived. Using this metric, neural-network
opponent controllers are evolved for dynamic game environments where limited inter-
agent communication is used to drive spatial coordination of opponent teams.
 Table of Contents

CHAPTER 1 INTRODUCTION
1.1. Project/Product Feasibility Report1
1.1.1. Technical Feasibility1
1.1.2. Operational Feasibility1
1.1.3. Economic Feasibility1
1.1.4. Schedule Feasibility2
1.1.5. Specification Feasibility2
1.1.6. Information Feasibility2
1.1.7. Motivational Feasibility2
1.1.8. Legal & Ethical Feasibility3
1.2. Project/Product Scope3
1.3. Project/Product Costing3
1.5. Task Dependency Table3
1.6. CPM - Critical Path Method4
1.7. Gantt chart5
1.8. Introduction to Team member and their skill set6
1.9. Task and Member Assignment Table6
1.10. Tools and Technology with reasoning7
1.11.Bar Chart 7
1.12. Risk List8

CHAPTER 2 BACKGROUND...............................................................................9
2.1. Definition ...................................................................................................9
2.2. Objective.....................................................................................................10
2.3. Background ................................................................................................10
2.4. Motivation...................................................................................................11
2.5. Importance of Gaming..................................................................................11

CHAPTER 3 LITERATURE REVIEW...............................................................13

3.1. Language Selection..............................................................................................13
 3.2. HTML and CSS ....................................................................................13
3.2.1 Why HTML.................................................................................................13
3.2.1 Why CSS....................................................................................................14

3.3. JavaScript.....................................................................................................14
3.3.1 WHY HTML AND JAVASCRIPT…………………..…………………...……...15

CHAPTER 4 METHODOLOGY, IMPLEMENTATION AND RESULT.….16

4.1 Process Development.……....……….……………………………...........16

4.1.1 Gant Chart.……...……….……………………………...……….…........16

4.1.2 Cycle Diagram…………………………………………………....……...17

4.2 Development Platform………………………….………….…….………......17

4.3 Website............................................................................................................17
4.4 Result…………………………………………………………………….. ...18

CHAPTER 5 Development and Environment .....................................................19

5.1. Development..............................................................................................19
5.2. website ........................................................................................................19
5.2.1. Front End Development ............................................................................19
a) Front-End Coding ...........................................................................................20

b) CSS Source file ...............................................................................................22

5.2.2 Back End Development .............................................................................23

a) Back-End Coding..............................................................................................23
b) CSS Source File ..............................................................................................27
5.3. Over All Development and Environment .......................................................27
5.3.1. scope .............................................................................................................28
5.3.2 Technology ....................................................................................................28
5.3.3 Tools ...............................................................................................................28
 CHAPTER 6 Conclusion and Future Work.......................................................29
6.1. Conclusion..........................................................................................................29
6.2. Current Work ...................................................................................................29
6.3. Future Work.........................................................................................................30
6.4. Application ...........................................................................................................30

7. References ……………………………………………………………………......31
 CHAPTER 1

INTRODUCTION

1.1 Project Feasibility Report

In Feasibility report we are going to describe that our Project is feasible and meets all
Feasibility aspects such as followings:

 Technical

 Operational

 Economic

 Specification

 Information

 Motivational

 Legal and Ethical

1.1.1 Technical Feasibility
The system is technically feasible because it can be built using HTML and JavaScript on
Visual studio. And also, the project members have the technology and technical
expertise to build this system.

1.1.2 Operational Feasibility

The system is operationally feasible because it is very easy and simple to be used by the
users and it is really entertainment game for the users. Moreover, it is providing the more
convenient solution to the stated problem, so users will consider it worthier to use this
system.

1.1.3 Economic Feasibility

Economic analysis is the most frequently used method for measuring the economic
feasibility of the systems. It is also known as cost/benefit analysis

1 |P a g e
 Benefits from the system are:
● Provide a real time safety measure to the users.
● In the free time users can fresh their minds.
● It is very simple so any one can easily use it.

The cost is very less because we do not need any special hardware to use this system.
Our app will run on web devices which are in access of almost every person. The
proposed system is financially feasible because of the following reasons:

Cost of the project is not much because no special hardware devices are required.
Operational cost is very low as we only need yearly domain renewal charges. The
proposed system is economic as it provides very beneficial output with small
development efforts. As the benefits greatly overweighs cost, the system is economically
feasible.

1.1.4 Specification Feasibility

The system should require internet in first usage but later on it must be able to run
without the internet connection. The system must be responsive and quick as it’ll be used
in emergency situations.

1.1.5 Information Feasibility

The system possesses information feasibility because all the information regarding
implementation and completion of the project is completely available and meaningful
and there is no ambiguity in it.

1.1.6 Motivational Feasibility

Throughout the Project, the supervisor the supervisor advised and motivated me
particularly during the evaluation process to assure the system accuracy.

2 |P a g e
 1.1.7 Legal & Ethical Feasibility
This project is legal and ethical because its criteria and model depends on the
government rules and regulations and all the functionalities are according to the rules
and regulations of government and there are no rule violations exist in the system.

1.2. Project/Product Scope

2D accelerator block is simple game which the user can play in free time in order to
fresh their mind as it is simple and easy game available for the all users.

1.3. Project/Product Costing

A product costing is some measurement we can make a product or process in the overall
development process. These product costing is Split into two broad categories:

 Knowledge oriented Products: these are oriented to tracking the process to

evaluate, predict or monitor some part of the process.

 Achievement oriented products: these are often oriented to measuring some product
aspect, often related to some overall measure of quality of the product.

1.4. Task Dependency Table

The following are the steps to develop a task dependency table:

 All the team members for all of the tasks necessary to complete the project, or take
the output from a module that already produced.
 Along with development, the tasks are noted one has proper documented.
 We had to also mention that which task is to be performed first and which one
should be second.
 We determine whether there are any tasks that can be done at the same time, i.e.
tasks that are not dependent on this first task finishing before they can be carried
out.
 Also determined whether there are any tasks that can be done at the same time.

3
  Repeat the process until all of the task have been arranged in sequence and in
parallel.

1.5. CPM - Critical Path Method

In 1957, DuPont developed a project management method designed to address the

challenge of shutting down chemical plants for maintenance and then restarting the plants
once the maintenance had been completed. Given the complexity of the process, they
developed the Critical Path Method (CPM) for managing such projects.

CPM provides the following benefits:

 Provides a graphical view of the project.

 Predicts the time required to complete the project.

 Shows which activities are critical to maintaining the task and which are not.

CPM models the activities and events of a project as a network. Activities are depicted as
nodes on the network and events that signify the beginning or ending of activities are
depicted as arcs or lines between the nodes. The following is an example of a CPM
network diagram:

Steps in CPM Project Planning

 Specify the individual activities.

 Determine the sequence of those activities.
 Draw a network diagram.
 Estimate the completion time for each activity.
 Identify the critical path (longest path through the network)
 Update the CPM diagram as the project progresses.


4
 Table No 1.1

Activity Immediate Predecessor Duration (Weeks)

A None 5

B None 3

C A 8

D A, B 7

E None 7

F C, D, E 4

G F 5

1.6. Gantt chart

We use Gantt Chart to show our task that how much task is completed. Also we will also
show that in the grant chart that how our task is divided according to the given time in the
months. It is possible to schedule activities by either early start or late start logic. In the
early start approach, each activity is initiated as early as possible without violating the
precedence relations. In the late start approach, each activity is delayed as much as
possible as long as the earliest finish time of the project is not compromised.

Based on the Work Breakdown Structure (WBS), a timeline or Gantt chart showing the
allocation of time to the project phases or iterations should be developed. This Gantt chart
would identify major milestones with their achievement criteria. It must contain duration
estimation of all the necessary activities to be carried out during the project development
along with the human resources responsible for the respective tasks. Activity dependencies
are also required to be mentioned in it.

5
6
 Table No 1.2 Gant Chart

Stages Month Start Date End Date

Analysis February 1/2/2022 1/3/2022
Proposal March 6/3/2022 28/3/2022
Development April 1/4/2022 30/4/2022
Testing May 1/5/2022 27/5/2022

1.7. Introduction to Team member and their skill set

In this we will divide our work or give a brief introduction about the task that we had
assigned to three members of the project. A brief but a concise introduction of the team
members should be provided signifying their skill set. This skill set would especially be
representative of the tasks and activities assigned to him.

1.8. Task and Member Assignment Table

A table should be formed which consists of a list of tasks and correspondingly allocation of
members to that task. The basic aim of this table would be an indication of the amount of
work the members would be performing.

Table No 1.3 Task and Member List Table,

Task Duration (days) Dependencies

T1 8
T2 15
T3 15 T1(M1)
T4 10
T5 10 T2, T4(M2)
T6 5 T1, T2 (M3)
T7 20 T1 (M1)
T8 25 T4 (M5)
T9 15 T3, T6 (M4)
T10 15 T5, T7 (M7)
T11 7 T9 (M6)
T12 10 T11 (M8)

7
1.9. Task durations and dependencies

Given dependency and estimated duration of tasks, and activity network that shows task
sequences may be generated. It shows which tasks can be carried out in parallel and which
must be executed in sequence because of a dependency on an earlier task. tasks are
represented as rectangles. Milestones and project deliverables are shown with rounded
corners. Dates in this diagram show the start date of the activity and are written in British
style where the day precedes the month. You should read the network from left to right and
from top to bottom.

Task Engineer
T1 Sana Ullah khalil
T2 XYZ
T3 ABC
Table No 1.4 Task List Table

1.10. Bar Chart: -

In Bar Chart we will show the numerical value of our tasks that is assigned to our teams in
the form of numerically which will be showed vertical as well as horizontal way.

Fig No 1.1. Bar Chart

8
1.11. Risk List

The possibility of suffering harm or loss in terms of danger is called risk. Regarding the
importance of risks, a list is to be maintained. Risk list is a sorted list of known, open risks
to the project, sorted in decreasing order of importance, associated with specific mitigation
or contingency actions.

Risk list means that we had also to keep the risk in mind that maybe we face in our project
So we also have to make the plan for such kind of risks and set our mind for those risks
and also try to find the solution for those risks as well.

1.11.1. Purpose

The risk list is designed to capture the perceived risks to the success of the project. It
identifies, in decreasing order of priority, the events that could lead to a significant
negative outcome. It serves as a focal point for project activities and is the basis around
which iterations are organized

The risk list is maintained throughout the project. It is created early in the inception phase,
and is continually updated as new risks are uncovered and existing risks are mitigated or
retired. At a minimum, it is revisited at the end of each iteration, as the iteration is
assessed.

9
 CHAPTER 2
BACKGROUND

2.1) Definition

Due to the technical nature of this project, the used technical terms are defined as
following:

2.1.1 Game

A game can be defined in many different ways, and may vary depending on personal
experiences. The definition used in this project will be based on the definition that Ernst
Adams used in his book fundamentals of game design [Adams, 2009] [1].

A game is a type of play activity, conducted in the context of a pretended reality, in

which the participant(s) try to achieve at least one arbitrary, nontrivial goal by acting in
accordance with rules.

In regard to this definition, this project will be focuses on the games developed on and
played on a computer. This is not limited to personal computers, but also includes gaming
consoles, smartphones, tablets, etc.

2.1.2 Game Engine

A game engine is a collection of software frameworks and tools designed to develop

games. Game engines are used by game developers to create games both faster and easier,
by using the already developed features and tools provided by the game engine.

2.1.3 Bots (Agents)

In games, a bot is an instance of AI that controls one or more units that share the same
virtual brain. Each bot in a game can have different properties and personalities. As for
10
players, each bot has its own set of goals, most often apart from each other. This does not
limit the bot from sharing goals, but simply refers to each bot being separated from one
another.

2.2) Objective

The main objective of creating this project is to make a simple block Accelerator game in
HTML and JavaScript in order to make them more responsive, and to minimize its coding.
To decrease the cost of the project is our main objective and also move from traditional to
advanced electronic approaches.

The basic idea of creating this game is it simplicity. HTML (Hyper Text Markup
Language), CSS, Boots rap and JavaScript are used for development of this game HTML,
CSS is used for the designing side while JavaScript is used for the gaming functionality
and especially any modification or updating in the game.

2.3) Background

The first recognized example of a game machine was unveiled by Dr. Edward Uhler Condon
at the New York World’s Fair in 1940 [2]. The game, based on the ancient mathematical
game of Nim was played by about 50,000 people during the six months it was on display,
with the computer reportedly winning more than 90 percent of the games.

However, the first game system designed for commercial home use did not emerge until
nearly three decades later, when Ralph Baer and his team released his prototype, the “Brown
Box,” in 1967[3].

The “Brown Box” was a vacuum tube-circuit that could be connected to a television set and
allowed two users to control cubes that chased each other on the screen. The “Brown Box”
could be programmed to play a variety of games, including ping pong, checkers and four
sports games. Using advanced technology for this time, added accessories included a light
gun for a target shooting game, and a special attachment used for a golf putting game.

Games have been around since the early beginning of computer game development. It
was first mainly used in games to replace human players as opponents in strategic games
11
like chess or checkers, but has since then grown into controlling several different aspects
of games. One example is The Director [4]. an Artificial Intelligence developed by Valve
Corporation that is designing the game experience while playing the game.

2.4) Motivation

The computer game industry has grown rapidly over the last decade. In 2004, sales of
computer games in the U.S. reached a total of 7.6 billion U.S. dollars, while in 1996 the
respective amount was 3.0 billion U.S. dollars according to the latest reports of the
Entertainment Software Association (2004). Currently computer games is the biggest
sector of the entertainment industry in the U.S. and among the wealthiest industry
sectors in the U.K. Computer games’ advantage in contrast with other forms of
entertainment is their interactivity in combination with their relatively low price. Note
also that the constant broadening of the age and social target groups has also
contributed to their popularity.

Computer games are based on various concepts which determine their core and classify
them in generation. This form of digital entertainment is embedded in a virtual simulated
world that the player interacts with. Such virtual worlds have seen major audiovisual
improvements over the last twenty years; from abstract two dimensional surfaces to
complex realistic worlds. This graphical realism has been the key focus of game
developers and has contributed to the increasing popularity of games. Consequently,
realistic game worlds have reached a point nowadays where there can only be slow and
minor further enhancements in that direction.

2.5) Importance of Gaming

There is a lot of importance of gaming in our life but we will discuss the main points.
Gaming is really a workout for lives. Studies have shown that playing video games
regularly may increase gray matter in the brain and boost brain connectivity. Controller-
based games can be great for the hands. In a study involving a group of surgeons,
researchers found that those who played video games were faster at performing advanced
procedures and made 37 percent fewer mistakes than those who didn’t. Special video
12
 games have also been used as physical therapy to help stroke victims regain control of
their hands and wrists.

Open world, mission-based, and multi-level games are designed like complex puzzles that
take several hours to solve. Occasionally, the solution varies based on one actions in the
game. Learning to think on feet and strategize in a fast paced fantasy environment is a
skill that can translate to the real world. One long term study published in 2013 showed
that children who played strategy-based games showed an improvement in problem
solving skills and thus, tended to get better grades the next school year.

 Provide a fun and social form of entertainment

 Encourage teamwork and cooperation when played with others

 Make kids feel comfortable with technology particularly important for girls, who don’t use
technology as much as boys

 Increase children’s self-confidence and self-esteem as they master games

 Provide points of common interest and opportunities for socialization

 Develop skills in reading, math, technology and problem-solving

 Encourage participation in related offline activities, such as reading or sports

 Encourage civic participation

 Improve hand eye coordination and fine motor skills

13
 CHAPTER 3

LITERATURE REVIEW

3.1 Language Selection

The most important part of the software development is to choose the software
development environment and make the websites and applications in that software so that
it satisfies all the requirements. Right now, we have different approaches and languages to
make web and mobile applications, but most of them are old and out dated. Few of them
are quite new and rising. So for this purpose we use HTML, CSS and JavaScript for our
gaming Platform because it is simple to use and easily can be understand by anyone
without any difficulty by understanding it.

3.2) HTML and CSS

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the
core technologies for building Web pages. HTML provides the structure of the page, CSS
the (visual and aural) layout, for a variety of devices. Along with graphics and scripting,
HTML and CSS are the basis of building Web pages and Web Applications. Learn more
below about: Is free and open source,

14
3.2.1) What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the
Means to:

 Publish online documents with headings, text, tables, lists, photos, etc.

 Retrieve online information via hypertext links, at the click of a button.

 Design forms for conducting transactions with remote services, for use in searching
for information, making reservations, ordering products, etc.

 Include spread-sheets, video clips, sound clips, and other applications directly in
their documents.

With HTML, authors describe the structure of pages using markup. The elements of the

language label pieces of content such as “Paragraph” “list” “table” and so on.

3.2.1) What is CSS?

CSS is the language for describing the presentation of Web pages, including colors,
layout, and fonts. It allows one to adapt the presentation to different types of devices, such
as large screens, small screens, or printers. CSS is independent of HTML and can be used
with any XML-based markup language. The separation of HTML from CSS makes it
easier to maintain sites, share style sheets across pages, and tailor pages to different
environments. This is referred to as the separation of structure (or: content) from
presentation.

3.3) JAVASCRIPT

JavaScript is a great language for game development, depending on the type of game one
wants to create. JavaScript is best for web-based and mobile games. It’s also a great
language for kids to learn because it’s generally easy to understand and has plenty of
resources for coders readily available online. 
15
JavaScript games can be played in the browser or mobile phone, so, if that’s one’s goal,
it’s an excellent option. Using platforms and tools can help create both 2D and 3D games
that can run directly in one browser. Aside from only web-based games, JavaScript has
been increasing in popularity in mobile game development. 

Gaming is one of the most popular computer activities. New technologies are constantly
arriving to make it possible to develop better and more powerful games that can be run in
any standards compliant web browser.

3.3). WHY HTML AND JAVASCRIPT

In the early days Web technologies like HTML, CSS and JavaScript were not good enough
to give users a quality experience that could only be achieved through tools like Adobe
Flash. Browsers with JavaScript were slow and they lacked support for native video, audio,
and local storage. Those browsers were only compatible for simple games.

Online games provide a great means of entertainment in free time. But have one ever
wondered how favorite online games are created? Maybe one would love to develop own
games and share them with friends and family but don’t know how to get started.

Browsers and JavaScript are becoming more powerful and more comprehensive. There
was a time when any type of game needed Flash. But the stage now is set for powerful
HTML5 and Web games. A retro-inspired 2D game set in the distant future. This one is
full of great game mechanics such as combos, puzzles, skill trees, quests, items and more.
A huge collection of PAC-MAN mazes - probably more than one can beat in lifetime

Many of these popular games are created using JavaScript, currently the popular
programming language in the world.

Some games are scaled down versions of other games, some are original. There are games
that are very basic but remain challenging. There are also games that offer excellent 2D
graphics with multiple challenges for the user. One of the great things about many of these
games is that developers make their source code available for other creators. Many are
free, but there are also paid versions for some.
16
The best thing about these open-source HTML5 and JavaScript games is that one can
easily download their source code on computer can modify it according to his needs and
can run it using the web browser etc.

CHAPTER 4

METHODOLOGY, IMPLEMENTATION AND RESULTS

After discussing all the features of the website, application and different technologies, now
comes the actual part, that is implementing the plan. For any software to be useful and
successful, the developer must target many audiences so that it can cover a greater portion
of the market, in other words the software should be developed for all platforms. Currently
we have top platforms which is accessible to the audience i-e web keeping this in mind, we
developed a gaming that meets the needs of majority people.

4.1) Process of Development

Our overall process contains a lot of different sub fields; we used an iterative process to
build the website and application which is depicted in the give flow diagram.

4.1.1) Gant Chart

This will show the division of work that we have below.

Monthly Work
Stages Month Start Date End Date

Analysis February 1/2/2022 1/3/2022

Proposal March 6/3/2022 28/3/2022

Development April 1/4/2022 30/4/2022

Testing May 1/5/2022 27/5/2022

17
 Project June 1/6/2022 30/7/2022

4.1.2) Cycle Diagram

End Main
Game Page

Game
Score
Page

Fig 4.1.

4.2) Development Platform

There are many different platforms in market for the development of software. We
finalized the needs of the project and then did our research while keeping the needs in
mind. Out of different options we selected best compatible platforms for the development
of website(game)

18
 4.3) Website (game)
The game has been developed using HTML, CSS, Bootstrap and JavaScript which makes
the work of online more easy.

File structure:

1. Index.html
2. Style.css
3. Script.js

HTML Code:

1. Heading portion: It show the name of the game overs

2. Game over portion: It be shown when ours lose the game.
3. Obstacle portion: It contain the obstacle from which the rectangle save itself (from the
blocks coming towards it).
4. Score portion: It show the current score of the game.

Heading and Paragraph Styling:

The Microsoft style used is mortared below table in table 4.2

Table 4.2

Name Property

Font Segoe UI

Heading 1 size 16

Heading 2 size 12

Paragraph size 12

19
4.4) Results

So, by performing the above methodology and steps we will achieve our final Result which
come from the above steps. It means first we had created a module then we had selected
the final module. Then after that we had started the front-end design in HTML and CSS by
follow our steps. When the Front end is completed after that we had started the back-end
coding along with that we will also performing our testing and also doing back-end coding.
By completing all the coding and design which is our desire goal and Final Result.

20
 CHAPTER 5

DEVELOPMENT AND ENVIRONMENT

5.1 Development

After performing our analysis carefully and discussing with Supervisor and after
that taking permission from the Supervisor to start my coding portion, So I started the
coding of the website. First, we coded the whole frontend, then we step towards the
backend coding which is in JavaScript.

5.2 Website

5.2.1) Front-End Development: -

Before starting the front end of website, we have designed some workflow for our website.
First, we design the multiple prototypes of the design and after discussing with teachers
and friends we selected the final design for our gaming project. When the final design is
finalized then we started the front-end coding for that design After selecting the final
version of design, we designed all the pages using HTML and CSS.

21
a) Front-End (Design) Coding
<! DOCTYPE html>
<html Lang="end">

<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">
    <link rel="stylesheet" href="button.css">
    <title>Gaming</title>

</head>

<body>
    <div class="card" style="text-align: center;">
        <div class="card-header">
            <h3 style="color: wheat;">Welcome to the Accelerator Block Game</h3>
        </div>
        <div class="card-block">
            <div class="game-form">
       
                <form>
                    <hr>
                    <a href="blockgame.html">
                        <button type="button" class="btn btn-primary" id="btngm">New
Game</button>
                        <hr>
                        <h1>Lets Start the Game to have a fun</h1>
                </form>
            </div>
        </div>
    </div>

</body>

</html>

22
Fig 4.3 Main Game Page

23
b) CSS Source File
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    background-image: url(images3.jpg);
    background-size: cover;
    background-position: center;
}

.card {
    padding: 20px;
    width: 300px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    background: black;
    margin: 8% auto 0;
    text-align: center;
}

.card h1 {
    color: #1c8adb;
    margin-bottom: 30px;
}

button {
    color: #fff;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    margin: 10px;
    background-color: #21afde;

24
5.2.2) Back-End Development: -

A back-end web developer is responsible for server-side web application logic and
integration of the work front-end web developers.

The reason of selecting JavaScript is that it is simple and game can be run on multiple
browsers. So, we had to perform all the functionality required for our game can be done in
the JavaScript.

a) Back-End Coding

 <script>

                var myGamePiece;
                var myObstacles = [];
                var myScore;
        
                function startGame () {
                    myGamePiece = new component (30, 30,"blue”, 10, 120);
                    myGamePiece. Gravity = 0.05;
                    my Score = new component ("30px", "Consolas", "black", 280, 40, "text");
                    myGameArea.start();
        }
        
                var myGameArea = {
                    canvas: document. create Element("canvas"),
                    start: function () {
                        this. canvas.width = 880;
                        this. canvas.height = 370;
                        this.context = this.canvas.getContext("2d");
                        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                        this.frameNo = 0;
                        this.interval = setInterval(updateGameArea, 20);
                        },
                    clear: function () {
                        this. context.clearRect(0, 0, this.canvas.width, this.canvas.height);
          }
        }
        
                function component(width, height, color, x, y, type) {

25
                    this.type = type;
                    this.score = 0;
                    this.width = width;
                    this.height = height;
                    this.speedX = 0;
                    this.speedY = 0;    
                    this.x = x;
                    this.y = y;
                    this.gravity = 0;
                    this.gravitySpeed = 0;
                    this.update = function() {
                        ctx = myGameArea.context;
                        if (this.type == "text") {
                            ctx.font = this.width + " " + this.height;
                            ctx.fillStyle = color;
                            ctx.fillText(this.text, this.x, this.y);
                        } else {
                            ctx.fillStyle = color;
                            ctx.fillRect(this.x, this.y, this.width, this.height);
            }
          }
                    this.newPos = function() {
                        this.gravitySpeed += this.gravity;
                        this.x += this.speedX;
                        this.y += this.speedY + this.gravitySpeed;
                        this.hitBottom();
          }
                    this.hitBottom = function() {
                        var rockbottom = myGameArea.canvas.height - this.height;
                        if (this.y > rockbottom) {
                            this.y = rockbottom;
                            this.gravitySpeed = 0;
            }
          }
                    this.crashWith = function(otherobj) {
                        var myleft = this.x;
                        var myright = this.x + (this.width);
                        var mytop = this.y;
                        var mybottom = this.y + (this.height);
                        var otherleft = otherobj.x;
                        var otherright = otherobj.x + (otherobj.width);
                        var othertop = otherobj.y;

26
                        var otherbottom = otherobj.y + (otherobj.height);
                        var crash = true;
                        if ((my bottom < othertop) || (mytop > other bottom) || (myright < otherleft)
|| (myleft > otherright)) {
                            crash = false;
            }
                        return crash;
          }
        }
        
                function updateGameArea() {
                    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
                    for (i = 0; i < myObstacles.length; i += 1) {
                        if (myGamePiece.crashWith(myObstacles[i])) {
                            return;
            }
          }
                    myGameArea.clear();
                    myGameArea.frameNo += 1;
                    if (myGameArea.frameNo == 1 || everyinterval(150)) {
                        x = myGameArea.canvas.width;
                        minHeight = 20;
                        maxHeight = 200;
                        height = Math.floor(Math.random()*(maxHeight-
minHeight+1)+minHeight);
                        minGap = 50;
                        maxGap = 200;
                        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
                        myObstacles.push(new component(10, height, "green", x, 0));
                        myObstacles.push(new component(10, x - height - gap, "green", x, height +
gap));
          }
                    for (i = 0; i < myObstacles.length; i += 1) {
                        myObstacles[i].x += -1;
                        myObstacles[i].update();
          }
                    myScore.text="SCORE: " + myGameArea.frameNo;
                    myScore.update();
                    myGamePiece.newPos();
                    myGamePiece.update();
        }
        

27
                function everyinterval(n) {
                    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
                    return false;
        }
        
                function accelerate(n) {
                    myGamePiece.gravity = n;
        }
                </script>
                <br>
                <div class="form-group";style="centre-screen;">
                <button onmousedown="accelerate(-0.2)" style="color: white;background-color:
black;" onmouseup="accelerate(0.05)">ACCELERATE</button>
                <p style="color: wheat;">Move the ACCELERATE Button to Stay in the air.Let
See How Long You can Stay Alive?</p>
                <a href="Button.html">
                <button type="button" class="btn btn-primary" id="btngm">Exit
Game</button>
            </a>
    <script>
    $(document).ready(function(){
        $( "#btngm" ).click(function() {
  alert( "Handler for .click() called." );
});
    });
    </script>

28
 Game Engine
b) CSS Source File: -
body {
    padding: 30px;
    margin: 30px;
    font-family: sans-serif;
    background-image: url('images5.jpg');
    background-size: cover;
    background-position: center;
}
button {
    color: #fff;
    width: 50%;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    margin: 10px;
    background-color: #21afde;

29
5.3) Overall Development and Environment

In this fort creating this game we need VS (Visual Studio) Code and browser fort creating
his game using HTML fort designing and JavaScript fort making changes fort modification
and also used fort the functionality to the gaming.

In this game we have number of blocks moving and we have on rectangle block which is
accelerated so that we have to save that rectangle from these number of blocks with help of
accelerator button and score will be counted along with it.

Games built with HTML5 work on smartphones, tablets, PCs and Smart TVs. Advertise
and promote your game all over the Web as well as other media. Payments Charge what
you want and use whatever payment processing service you like. Update your game
whenever you want its only possible because of java script that your game is online and the
server and you also perform changes/updating easily. Collect your own analytics. Connect
with your customers more closely, Players can play the game anywhere, anytime.

 Easy to Handle and feasible.

 Cost reduction.

 Fast and convenient.

 Responsive Website

5.3.1) Scope

Our Main target is to create simple and responsive gaming application for the first time in
HTML and JavaScript. As with the help of java script we create our game faster and also it
easy of us whenever we want changes in our game or updating it will be easily done with
help of JavaScript.

30
5.3.2) Technology

Any technology web or mobile can be used and combination of both web and mobile
recommended. As we are using Build, style, and lay out your game's user interface and
java script so our game will be compatible for any browser e.g. google Chrome, Mozilla
Firefox, Opera, Microsoft Edge etc.

Technology

Name Software

Operating System Windows 7 or above

IDE Visual Studio Code, TextEditor,Sublime etc.

Browser Google, Microsoft Edge,FireFox,Opera etc.

Table No 5.3.2

5.3.3) Tools

We use HTML, CSS and JavaScript and Start UML (Unified Modeling Language) fort
building and developing Block Accelerator application and this game will be run on the
following browser e.g. google Chrome, Mozilla Firefox, Opera, Microsoft Edge etc.

31
 CHAPTER 6

CONCLUSION AND FUTURE WORK

CONCLUSION
Accelerator block game is a simple gaming engine which connects player with the help
using their system for playing the game. Since we know that people in distress may not
have an easy access to system and may face slow internet issues when inside close rooms.
Therefore, we deemed it necessary to bring offline functionality option to our idea.

6.1) Current Work

32
It is my University Graduation Project, so we developed a minimal viable product (MVP)
as part of our proposed project, which includes technical works such as:

 HTML, CSS, Bootstrap and JavaScript

 Front End Development for Website

 Back End Development for Coding

Our MVP includes all necessary features which completes the basic working flow of
accelerator game such as:

 One Main Gaming Page

 Gaming Page

 Start Game

 User

 Score

 End Game

 Platform and many More.

6.2) Future Work

Since in every idea is open to improvement in future we will also work to convert this
project in android and IOS app so that it will be available for both the users it means for
Android as well as for the computer user. For Converting this project into android we use
the latest technology of Microsoft like Flutter and use the dart as language in Future
Insha’Allah.

6.3) Applications

33
We live in a digital and technology has become integral part of our lifestyle. This goes for
every single lifestyle aspect, gaming industry. Since, the world is at the fingertips of web
users. After the completion of this project in Web we will also convert this project in
android as Mobile users can easily real time information which they need anytime,
anywhere. More than million web users in Pakistan, who have access to mobile phones
prefer most of their work through phone apps so for this purpose we will also convert it
into mobile app and websites. Introducing a such gaming platform is Really Mind fresh for
children with facilities like mobile app and website Multi benefits.

34
REFERENCES:
[1]: Adams, E. (2009). Fundamentals of Game Design. 2nd Editions New
Riders.

[2]: Dr. Edward Uhler Condon at the New York World’s Fair in 1940

[3]: “Brown Box, “in (1967) Developing a Fuzzy Logic Based Game System
Computer Technology.

[4]: Left4dead.wikia.com, (2015). The Director – The Left 4 Dead Wiki.

http://left4dead.wikia.com/wiki/The_Director .

[5]: Laird, J. (2002). Research in Human-level AI Using Computer Games

Communications of the ACM.

[6]: Rabin, S. (2014). Game AI Pro. CRC Press.

[7]: Rojas, R. (1996). Neural Networks: A Systematic Introduction

Springer Science & Business Media.

[8]: Turing, A. (1950). Computing Machinery and Intelligence Mind.

[9]: AForge.NET, (2015). Framework Features - Artificial Neural Networks at:

http://www.aforgenet.com/framework/features/neural_networks.html

[10]: Humanbrainproject.eu,(2015):https://www.humanbrainproject.eu/-/how-
to-build-a-human- brain-with-a-computer-1-000x-faster-than-today-s-

[11]: Jamieson, D. (2015). Making AI Fun: When Good Enough is Good

Enough.: http://gamedevelopment.tutsplus.com/articles/making-ai-fun-when-
good-enough-is-good- enough--cms-23460 w3q

[12]: Left4dead.wikia.com, (2015). The Director – The Left 4 Dead

Wiki. http://left4dead.wikia.com/wiki/The_Director

[13]: Unity3d.com, (2015). Unity - Game Engine: http://unity3d.com/

35
 [14]: Stanford.edu, (2006) Arthur Samuel Pioneer in Machine Learning.:
http://infolab.stanford.edu/pub/voy/museum/samuel.html

[15]: Stanford.edu, (2007). What is Artificial Intelligence?

[16]: http://www-formal.stanford.edu/jmc/whatIsai/whatisai.html

[17]: What is neural network?:

http://whatis.techtarget.com/definition/finite-state-machine

[18]: What is finite State

Machine?:http://whatis.techtarget.com/definition/finite-state-machine

[19]: WhatIs.com, (2015c). What is Remote Procedure Call (RPC) -

Definition
fromWhatIs.com.http://searchsoa.techtarget.com/definition/Remote-
Procedure-Call

[20]: World of Computing, (2015). A Star Algorithm.:

http://intelligence.worldofcomputing.net/ai-search/a-star-algorithm.html
[21]: C. Anderson (2007). The Innovation in Gaming Isn't on the Screen.

[22]: R.T. Beckwith, L. Brandt, B.M. Slater (2006). Electric Worlds in the
Classroom: Teaching and Learning with Role-Based Computer Games. Teachers
College Press. 182 p.

[23]: D.A. Bowman, C. North, J. Chen, N.F. Polys, P.S. Pyle, and U. Yilmaz
(2003). Information-Rich Virtual Environments: Theory, Tools, and Research
Agenda. Proceedings of the ACM symposium on Virtual reality software and
technology, Osaka, Japan, 2003.

[24]: J. S. Brown, A. Collins and P. Duguid 1989. Situated Cognition and the
Culture of Learning. Educational Researcher.

[25]: Project. Online MMORPG Research Publication.

[26]: International Game Developers Association Alternate Reality Games SIG

(2006). Alternate Reality Games Whitepaper.

[27]: C. Johns and E. Blake (2001). Cognitive Maps in Virtual Environments:

Facilitation of Learning Through the Use of Innate Spatial Abilities. Proceedings

36
of the 1st international conference on Computer graphics, virtual reality and
visualization. Camps Bay, Cape Town, South Africa, 2001.

[28]: Lave and Wenger 1991. Situated Learning: Legitimate Peripheral

Participation. Oxford: Oxford University Press.

[29]: M.J. Mayo (2007). Games for Science and Engineering Education.
Common. ACM

[30]: Michigan State University Serious Games Master’s Program

[31]: NASA Learning Technologies Request for Information for an MMO Game

[32]: J. Sutherland (2005). What Every Game Developer Needs to Know About

Story.

[33]: T.M. Whittaker and S.A. Ackerman (2002). Interactive web-based learning
with Java. Bulletin of the American Meteorological Society.

[34]: N. Yee, (2006). The Demographics, Motivations and Derived Experiences of

Users of Massively-Multiuser Online Graphical Environments. PRESENCE: Tele
operators and Virtual Environments.

[35]: N. Yee, (2006). The Labor of Fun: How Video Games Blur the Boundaries
of Work and Play. Games and Culture.

[36]: N. Yee (2007). Motivations for Play in Online Games. Cyber Psychology

and Behavior.

37