GOVERNMENT POLYTECHNIC, AMBAD

DEPARTMENT OF INFORMATION TECHNOLOGY

COURSE – CLIENT SIDE SCRIPTING LANGUAGE (22519)

ACADEMIC YEAR – 2024 - 25

A MICRO PROJECT ON
“ DINOSAUR AND DRAGON GAME ”

FOR THE AWARD OF

DIPLOMA ENGINEERING & TECHNOLOGY

(INFORMATION TECHNOLOGY)

UNDER THE GUIDANCE OF

PROF. Y. B. SANAP

SUBMITTED BY

Sr no. Roll no. Enrollment no. Name

1. 336 2211620060 Shinde Nitin Sambhaji

2. 318 2211620027 Hirap Vrushabh Vaibhav

3. 315 2211620023 Gholap Parth Trimbak

4. 334 2211620058 Satale Vaibhav Laxman

5. 346 2011620232 Darakhe Mohan Kailas

1
 GOVERNMENT POLYTECHNIC, AMBAD.
DEPARTMENT OF INFORMATION TECHNOLOGY
COURSE – CLIENT SIDE SCRIPTING LANGUAGE (22519)

CERTIFICATE

This is to certify that the Micro-project entitled “ DINOSAUR AND DRAGON GAME ”
being submitted here with for the award of DIPLOMA IN ENGINEERING &
TECHNOLOGY in INFORMATION TECHNOLOGY of MAHARASHTRA STATE
BOARD & TECHNICAL EDUCATION (MSBTE) is the result of Micro-project work
completed by 2211620060 - 2211620027, 2211620023 - 2211620058, 2011620232 under the
supervision and guidance of PROF. Y.B. SANAP

It is to the best of my knowledge and belief that the work embodied in this Micro- project has
not formed the basis for the award of any degree or diploma of this or any other Board or
examining body.

Academic Year: 2024-25 Semester: Fourth (5)

Enrollment No: 2211620060 - 2211620027 - 2211620023 - 2211620058 - 2011620232

Place : AMBAD

Under the guidance of H.O.D Principal

Prof. Y. B. Sanap Prof. Y.B.Sanap Dr. A.W. Nemade

2
 DECLARATION

I, the undersigned hereby declare that the project entitled “DINOSAUR AND
DRAGON GAME ” is written and submitted by me to Government Polytechnic
Ambad during Year 2024-25, third Semester for partial fulfillment of the ‘Micro Project’
requirement of ‘CLIENT SIDE SCRIPTING LANGUAGE ’ course under
Maharashtra State Board of Technical Education, Mumbai curriculum, under the
guidance of Prof. Y. B. SANAP is my original work.

The empirical findings in this project are based on the collected data and are not copied
from any other sources.

Sr no. Roll no. Enrollment no. Name Sign

1. 336 2211620060 Shinde Nitin Sambhaji

2. 318 2211620027 Hirap Vrushabh Vaibhav

3. 315 2211620023 Gholap Parth Trimbak

4. 334 2211620058 Satale Vaibhav Laxman

5. 346 2011620232 Darakhe Mohan Kailas

3
 ACKNOWLEDGEMENTS

I have great pleasure to express my immense gratitude towards a dynamic person and my
project guidance, Prof. Y. B. SANAP Department of INFORMATION TECHNOLOGY
Government Polytechnic, Ambad for giving me an opportunity to work on an interesting topic
over one semester. The work presented here could not have been accomplished without his
most competent and inspiring guidance, incessant encouragement, constructive criticism and
constant motivation during all phases of our group Micro-project work. I am highly indebted to
him.

I am very much thankful to Prof. Y. B. SANAP , Head Department of INFORMATION

TECHNOLOGY, all HODs of various departments and Dr. A.W. NEMADE Sir, The
Principal of Government Polytechnic, Ambad for his encouragement and providing me with a
motivating environment and project facilities in the Institute to carry out experiments and
complete this Micro-project work.

I would like to extend my thanks to all our professors, staff members and all our friends who
extended their co-operation to complete the project.

I am indeed indebted to my parents and other family members for their immense help at all
levels with moral, social & financial support, care and support throughout my studies without
which my work would not have seen light of the day.
With warm regards,
Yours Sincerely,

2211620060 - 2211620027 - 2211620023 - 221120058 - 2011620232

Place: Ambad
Date:

4
 INDEX

Sr no. Topic Page no.

1. INTRODUCTION 6
2. OVERALL DESCRIPTION 7-8
3. PROGRAM 9 - 14
4. OUTPUT 15
5. CONCLUSION 16
6. REFERENCE 17

5
 INTRODUCTION

The Dinosaur vs Dragon Game is a web-based, interactive game developed using

HTML, CSS, and JavaScript. The main objective of the game is to navigate a
dinosaur character while avoiding obstacles, represented by a dragon, and
achieving the highest score.

This project is designed to demonstrate core web development skills, including:

● HTML for structuring the game’s layout and interface.

● CSS for styling the game elements and enhancing visual appeal.
● JavaScript for implementing the game’s logic, animations, and interactivity.

In the game, players control the dinosaur, trying to dodge the dragon and earn
points. The game showcases an engaging UI with a sleek background and dynamic
elements such as moving characters and scoring. The game offers feedback at the
end, displaying the player's score and encouraging them to try again.

This project is an excellent demonstration of how simple front-end technologies

can be combined to create a fun, interactive experience.

6
 OVERALL DESCRIPTION

The Dinosaur vs Dragon Game is a dynamic browser-based game developed

using HTML, CSS, and JavaScript, where players control a dinosaur character to
escape from an approaching dragon while avoiding obstacles. This game offers an
interactive experience with real-time scoring and fluid controls that make the
gameplay both challenging and engaging.

Key Features:

● Player Control: The game utilizes keyboard arrow keys for player input:
○ Pressing the up arrow makes the dinosaur jump, allowing it to leap
over obstacles or avoid the dragon.
○ Pressing the left arrow moves the dinosaur backward, and pressing
the right arrow moves it forward, adding an extra layer of control and
strategy.
● Real-time Scoring: The player’s score is displayed throughout the game,
increasing with each successful dodge of the dragon. Upon game over, the
final score is shown with an option to refresh the game and try again.
● Game Environment: The game is set against a sleek, futuristic grid
background, blending a primal chase theme with modern aesthetics. The
dinosaur and dragon animations add life to the game and make it visually
appealing.

7
 ● Game Over Mechanism: When the dinosaur collides with the dragon or
fails to avoid an obstacle, the game ends, displaying the player’s final score
along with a "Game Over" message. Players can restart by refreshing the
game page.

Technologies Used:

● HTML: Structures the layout of the game, including the game area, score
display, and game over screen.
● CSS: Responsible for styling the game elements, background design, and
positioning of the characters (dinosaur and dragon). CSS animations are
used to enhance the movement and overall aesthetic of the game.
● JavaScript: Powers the game logic, handling the dinosaur’s movement,
jumping action, collision detection, and score tracking. JavaScript also
manages user input (arrow key presses) to control the character’s movement
and interactions in real time.

Key Development Concepts:

● Arrow Key Controls: JavaScript event listeners track the player’s keyboard
inputs for the arrow keys, allowing for fluid and responsive movement. The
up arrow triggers a jump, while the right and left arrows control forward and
backward movement.
● Collision Detection: A core feature implemented to detect when the
dinosaur encounters the dragon or any obstacles, triggering the game over
state.
● Jump and Movement Logic: Smooth animations are integrated using CSS
and JavaScript to give the dinosaur realistic movement, enhancing the
overall gameplay experience.

8
 PROGRAM
● HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAME</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="gameContainer">
<div class="gameOver">Game Over Refresh Again</div>
<div class="dino"></div>
<div id="scoreCont">Your Score :0</div>
<div class="obstacle obstacleAni"></div>
</div>
<!-- <audio src="bade_miya.mp3"></audio> -->
</body>
</html>

● CSS

*{
margin: 0;
padding: 0;
}
body{
background-color: red;
overflow: hidden;
}

9
.gameContainer{
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100vw 100vh;
width: 100%;
height: 100vh;
}
.dino{
background-image: url(diano.png);
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 154px;
position: absolute;
bottom: 30px;
left: 70px;
}
.obstacle{
background-image: url(dragon.png);
background-size: cover;
width: 126px;
height: 130px;
position: absolute;
bottom: 30px;
left: 44vw;
}
.animateDino{
animation: dino 0.6s linear;
}
.gameOver{
position: relative;
top: 70px;
font-size: 53px;
text-align: center;

10
 visibility: hidden;
color: white;
}
@keyframes dino {
0%{
bottom: 0;
}
50%{
bottom: 400px;
}
100%{
bottom: 0;
}
}
.obstacleAni{
animation: obstacleAni 5s linear infinite;
}
@keyframes obstacleAni {
0%{
left: 100vw;
}
100%{
left: -10vw;
}
}
#scoreCont{
position: relative;
top: 70px;
left: 23px;
font-size: 43px;
padding: 10px;
width: 270px;
margin-left: 580px;
text-align: center;

11
 justify-content: center;
border: 2px solid gray;
}

● JAVASCRIPT

score = 0;
cross = true;

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 + 150 + "px";
}
if(e.keyCode == 37){
dino = document.querySelector('.dino');

12
 dinox =
parseInt(window.getComputedStyle(dino,null).getPropertyValue('left'));
dino.style.left = (dinox - 150) + "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 <100 && offsety < 52){
gameOver.style.visibility = 'visible';
obstacle.classList.remove('obstacleAni');
}
else if(offsetx < 145 && cross){
score+=1;
updateScore(score);
cross = false;
setTimeout(() => {
cross = true;
}, 1000);
setTimeout(() => {

13
 aniDur =
parseFloat(window.getComputedStyle(obstacle,null).getPropertyValue('animatio
n-duration'));
newDur = aniDur - 0.1;
obstacle.style.animationDuration = newDur + "s";
}, 500);
}
}, 10);
function updateScore(score) {
scoreCont.innerHTML = "Your Score :"+score;
}

14
OUTPUT

15
 CONCLUSION

The Dinosaur vs Dragon Game is a successful demonstration of how simple web

technologies like HTML, CSS, and JavaScript can be combined to create an
interactive and engaging browser-based game. The game’s use of arrow key
controls allows players to intuitively control the dinosaur, adding layers of
movement through jumping, moving forward, and retreating. With real-time
scoring and responsive gameplay, players are provided with instant feedback and a
fun challenge to improve their score.

Throughout the development of this project, key web development skills were
highlighted, including event-driven programming, animation effects, and collision
detection. By focusing on clean design, responsive controls, and dynamic
interactions, the game offers both a polished user experience and showcases the
versatility of front-end technologies.

This project not only enhances practical coding skills but also illustrates how core
concepts in web development can be applied to create entertaining and visually
appealing applications.

16
 REFERENCE

● https://developer.mozilla.org/
● https://www.w3schools.com/
● https://www.freecodecamp.org/
● https://css-tricks.com/
● https://stackoverflow.com/
● https://javascript.info/

17