Meerut Institute of Engineering & Technology, Meerut

Session: 2020-2021

MINI PROJECT SYNOPSIS

On

“I-Dragon JavaScript Game”

BACHELOR OF TECHNOLOGY IN COMPUTER

SCIENCE AND ENGINEERING

Submitted to-

(Department of Computer Science & Engineering)

Submitted by
Student Name – Yashi Sharma and Shivam Roll No. –
1900680130062 and 1900680130046

3 RD SEMESTER
DEPARTMENT OF INFORMATION TECHNOLOGY
MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT
 DECLARATION
We hereby declare that the project entitled - “I-dragon JavaScript game”, which is being submitted
as Mini Project in department of Information Technology to Meerut Institute of Engineering and
Technology, Meerut (U.P.) is an authentic record of our genuine work done under the guidance of
Prof. “ ” of Information Technology, Meerut Institute of Engineering and
Technology, Meerut.

Date: Name of Student – Yashi Sharma and

Shivam

Place: (Roll no.) – 1900680130062 &

1900680130046
 CERTIFICATE

This is to certify that mini project report entitled – “I-dragon JavaScript game” submitted by
“Yashi and Shivam” has been carried out under the guidance of Prof. “ ” of
Information Technology, Meerut Institute of Engineering and Technology, Meerut. This project
report is approved for Mini Project (KCN 354) in 3 rd semester in “department name” from
Meerut Institute of Engineering and Technology, Meerut.

Internal Examiner

Date:
 ACKNOWLEDGEMENT

I express my sincere indebtedness towards our guide Prof., “ ” of Information

Technology, Meerut Institute of Engineering and Technology, Meerut for his valuable suggestion,
guidance and supervision throughout the work. Without his king patronage and guidance, the
project would not have taken shape. I would also like to express my gratitude and sincere regards
for his kind approval of the project. Time to time counseling and advises.

I would also like to thank to our HoD Dr. (Prof.) “Swati Sharma”, Department of Computer
Science and engineering, Meerut Institute of Engineering and Technology, Meerut for his expert
advice and counseling from time to time.

I owe sincere thanks to all the faculty members in the department of Information Technology for
their kind guidance and encouragement time to time.

Date: Student name – Yashi and

Shivam
 Table of contents
Description page no. Declaration i Certificate ii Acknowledgement iii Chapter 1

Introduction

Chapter 2 System Design

(Work flow/flow chart/DFD/ working principle/ constructional details

of individual components)

Chapter 3 Technology Bucket

3.1 Description of HTML

3.3 Description of CSS

3.4 Description of Java Script

Chapter 4 Output screens

Appendices Implementation code

References

1)Introduction
In the world of software development, what’s built falls into two
categories: everything that’s seen by the user and the processes
happening in the background. What we see and interact with as
the visitors of a website, or as the end user of a mobile app, is
considered front-end technology. All the behind-the-scenes
activity that delivers the data and the speed with which that data
is delivered falls into back end Technology and DevOPs.

The front-end stack is made up of many different languages and

libraries. While these vary from application to application, there
are only a few generic languages understood by all web
browsers. These three main front-end coding languages are
HTML, CSS and JavaScript.

Together, they create the underlying scaffolding that web

browsers use to render the web pages that we interact with every
day. All other libraries and front-end engineering are built upon
these three main languages, which makes them must-have skills
for any front-end developer.

In fact, you can think of a webpage like a house. The initial UX

design is the blueprint. HTML is the basic structure of the house.
The CSS is the paint, fixtures, and other aesthetic decisions that
make the house look attractive. And finally, JavaScript is the
inner workings of the house (lights, heating, water) that we, the
owner or renter, use and enjoy.

By using all this, I have created an Animated- Game in which Html work
as the structure of the game by using tags, links etc to create the body of
the game and

CSS designs the layout, topology, animations, image positions, font style, font
weight, margin, padding etc and
JavaScript help to control audio, onclick events, duration of animation, time
intervals etc.
2) System Design
 3) Technology Bucket
3.1 Description of HTML
HTML (HyperText Markup Language) is the most basic building
block of the Web. It defines the meaning and structure of web
content. Other technologies besides HTML are generally used to
describe a web page's
appearance/presentation (CSS) or functionality/behavior
(JavaScript).

"Hypertext" refers to links that connect web pages to one

another, either within a single website or between websites.
Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by other
people, you become an active participant in the World Wide
Web.

HTML uses "markup" to annotate text, images, and other content

for display in a Web browser. HTML markup includes special
"elements" such as <head>, <title>, <body>,
<header>, <footer>, <article>, <section>, <p>,
<div>, <span>, <img>, <aside>, <audio>, <canvas>,
<datalist>, <details>, <embed>, <nav>, <output>,
<li>
<progress>, <video>, <ul>, <ol>, and many others.
Syntax:-
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

.
3.2 Description Of CSS

Cascading Style Sheets (CSS) is a stylesheet language used to

describe the presentation of a document written in HTML or
XML (including XML dialects such as SVG, MathML or
XHTML). CSS describes how elements should be rendered
on screen, on paper, in speech, or on other media.

CSS is among the core languages of the open web and is

standardized across Web browsers Previously, development of
various parts of CSS specification was done synchronously,
which allowed versioning of the latest recommendations. You
might have heard about CSS1, CSS2.1, CSS3. However,
CSS4 has never become an official version.

From CSS3, the scope of the specification increased

significantly and the progress on different CSS modules
started to differ so much, that it became more effective to
develop and release recommendations separately per module.
There are three ways of inserting a style sheet:

● External CSS---With an external style sheet, you can

change the look of an entire website by changing just one
file.Each HTML page must include a reference to the
external style sheet file inside the <link> element, inside
the head section.
 ● Internal CSS---An internal style sheet may be used if one
single HTML page has a unique style.The internal style is
defined inside the <style> element, inside the head
section.

● Inline CSS---An inline style may be used to apply a

unique style for a single element.To use inline styles, add the style
attribute to the relevant element. The style attribute can contain any
CSS property.

3.3 Description of JavaScript

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled

programming language with first-class functions. While it is most
wellknown as the scripting language for Web pages, many non-browser
environments also use it, such as Node.js, Apache CouchDB and Adobe
Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded,
dynamic language, supporting object-oriented, imperative, and declarative
(e.g. functional programming) styles. Read more about JavaScript.

This section is dedicated to the JavaScript language itself, and not the parts
that are specific to Web pages or other host environments. For information
about API specifics to Web pages, please see Web APIs and DOM.
The standard for JavaScript is ECMAScript. As of 2012, all modern
browsers fully support ECMAScript 5.1. Older browsers support at least
ECMAScript 3. On June 17, 2015, ECMA International published the sixth
major version of ECMAScript, which is officially called
ECMAScript 2015, and was initially referred to as ECMAScript 6 or ES6.
Since then, ECMAScript standards are on yearly release cycles. This
documentation refers to the latest draft version, which is currently
ECMAScript 2020.

Ways to add JavaScript in HTML:-

The <script> Tag In HTML, JavaScript code is inserted between <script>

and </script> tags. Syntax

< script >

document.getElementById( "demo" ).innerHTML = "My First JavaScript" ; <

/script >

In <head> or <body>

You can place any number of scripts in an HTML document. Scripts can be placed in
the <body>, or in the <head> section of an HTML page, or in both.

Syntax :-

Put about syntax in <head>. . .</head> tag.

OR

Put above syntax in <body>..</body>tag.

External JavaScript

External scripts are practical when the same code is used in many different web p
ages.JavaScript files have the file extension .js.To use an external script, put the name of
the script file in the src (source) attribute of a <script> tag:

Syntax:-
<script src="myScript.js"></script>

4) Output Screen
1) It starts with a welcome to I-dragon adventure, where one person
walking on path and tries to jump above the obstacle without
touching it, which is coming towards the person and moves
forward with the increase in scores.
2) When the person Jump and moves itself in forward and backward
direction using keyboard keys, there will be an increase in score as
well as in the speed of the obstacle as time passes.
 3) When person hit the obstacle, the score board and obstacle stop and
Game over appears with the stop audio. To restart the game, click
refresh icon.

5) Implementation Code

Code :- HTML
<!DOCTYPE html >
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<meta name = "viewport" content = "width=device-width, initial-
scale=1.0" >
<title> iDragon - JavaScript Game </title>
<link href
=
"https://fonts.googleapis.com/css2?family=Ubuntu:wg ht@300&display=swap"
rel = "stylesheet" >
<link rel = "stylesheet" href = "style.css"
> <script src = "script.js" ></script>
</head>
<body>
<div class = "gameContainer" >
<div class = "gameOver" > Welcome to iDragon
Adventures </div>
<!-- <div class="gameOver">Welcome to iDragon -
Created by Harry</div> -->
<div class = "dino" ></div>
<div id = "scoreCont" > Your Score: 0 </div>
<div class = "obstacle obstacleAni" ></div>
</div>
</body>
</html>

Code: - JavaScript file

score = 0
;

cross = true ;

audio = new Audio( 'music.mp3' );

audiogo = new Audio( 'gameover.mp3' );

setTimeout(() => {

audio.play() },

1000 );

document.onkeydown = function (e) {

console.log( "Key code is: " , e.keyCode)

if (e.keyCode == 38 ) {

dino = document.querySelector( '.dino' );

dino.classList.add( 'animateDino' );

setTimeout(() => {

dino.classList.remove( 'animateDino' ) }, 700

);

if (e.keyCode == 39 ) {

dino = document.querySelector( '.dino' );

dinoX = parseInt(window.getComputedStyle(dino, null

).getPropertyValue( 'left' ));

dino.style.left = dinoX + 112 + "px" ;

}

if (e.keyCode == 37 ) {

dino = document.querySelector( '.dino' );

dinoX = parseInt(window.getComputedStyle(dino, null

).getPropertyValue( 'left' ));

dino.style.left = (dinoX - 112 ) + "px" ; }

}

setInterval(() => {

dino = document.querySelector( '.dino' );

gameOver = document.querySelector( '.gameOver' );

obstacle = document.querySelector( '.obstacle' );

dx = parseInt(window.getComputedStyle(dino, null ).getPropertyValue( 'left' ));

dy = parseInt(window.getComputedStyle(dino, null ).getPropertyValue( 'top' ));

ox = parseInt(window.getComputedStyle(obstacle,
null ).getPropertyValue( 'left' ));

oy = parseInt(window.getComputedStyle(obstacle, null
).getPropertyValue( 'top' ));
 offsetX = Math.abs(dx - ox);

offsetY = Math.abs(dy - oy);

// console.log(offsetX, offsetY)

if (offsetX < 73 && offsetY < 52 ) {

gameOver.innerHTML = "Game Over - Reload to Play Again"

obstacle.classList.remove( 'obstacleAni' ) audiogo.play();

setTimeout(() => {

audiogo.pause();

audio.pause();

}, 1000 );

}
else if (offsetX < 145 && cross) {

score += 1 ;
 updateScore(score);

cross = false ;

setTimeout(() => {

cross = true ;

}, 1000 );

setTimeout(() => {

aniDur = parseFloat(window.getComputedStyle(obstacle, null

).getPropertyValue( 'animation-duration' ));

newDur = aniDur - 0.1 ;

obstacle.style.animationDuration = newDur + 's' ;

console.log( 'New animation duration: ' , newDur) }, 500 );

 } },

10 );

function updateScore(score) {

scoreCont.innerHTML = "Your Score: " + score }

Code: - CSS File

* {
margin : 0 ;

padding : 0 ; }

body {

background-color : red ;

overflow : hidden ;
} .gameContainer

background-image : url(bg.png);

background-repeat : no-repeat ;

background-size : 100vw 100vh ;

width : 100% ;

height : 100vh ;

.dino {

background-image : url(dino.png); background-repeat : no-repeat ;

background-size : cover ;

width : 233px ;

height : 114px ;

position : absolute ;

bottom : 0 ;

left : 52px ;

.obstacle {
width : 166px ;

height : 113px ;

background-image : url(dragon.png);

background-size : cover ;

position : absolute ;

bottom : 0 ;

left : 44vw ;

.animateDino {
animation : dino 0.6s linear ;

.obstacleAni {

animation : obstacleAni 5s linear infinite ;

.gameOver {

position : relative ;

top : 63px ;
font-size : 53px ;

text-align : center ;

font-family : 'Ubuntu' , sans-serif ;

}

#scoreCont {

font-size : 25px ;

color : #54212f ;

font-weight : bold ;

position : absolute ;

right : 45px ;

top : 31px ;

border : 2px solid black ;

padding : 10px ;

font-family : 'Ubuntu' , sans-serif ;

border-radius : 10px ;

@keyframes

dino{ 0%{
bottom : 0 ;

}
50%{

bottom : 422px ; }

100%{

bottom : 0 ; }

@keyframes

obstacleAni{ 0%{

left : 100vw ; }

100%{

left : -10vw ; }