Skip to content

Commit a3f93e2

Browse files
tajulafreentajulafreen
authored
Merge pull request #33 from tajulafreen/Dinosar_Game
50Projects-HTML-CSS-JavaScript : Dinosar game
2 parents a2f4669 + cec3ceb commit a3f93e2

File tree

6 files changed

+151
-0
lines changed

6 files changed

+151
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,17 @@ In order to run this project you need:
342342
</details>
343343
</li>
344344

345+
<li>
346+
<details>
347+
<summary>Dinosaur Game</summary>
348+
<p>This project is a simple, interactive "Dinosaur Game" built using HTML, CSS, and JavaScript. Inspired by the classic offline game in Google Chrome, the player controls a dinosaur character that must jump over moving obstacles (cacti) to avoid collision. The game features basic animations and a scoring system, providing an engaging experience. The project demonstrates fundamental concepts of web development, including DOM manipulation, event handling, and CSS animations.</p>
349+
<ul>
350+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/DinosaurGame/">Live Demo</a></li>
351+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/DinosaurGame">Source</a></li>
352+
</ul>
353+
</details>
354+
</li>
355+
345356
</ol>
346357

347358
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/DinosaurGame/assets/cactus.png

20.2 KB
Loading

‎Source-Code/DinosaurGame/assets/dinosaur.png

2.52 KB
Loading

‎Source-Code/DinosaurGame/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>DINOSAUR GAME</title>
8+
</head>
9+
<body>
10+
<h1 class="game-heading">DINOSAUR GAME 🦕</h1>
11+
<div class="game">
12+
<div class="character">
13+
<img class="dino" src="./assets/dinosaur.png" alt="dino" />
14+
</div>
15+
<div class="block">
16+
<img class="cactus" src="./assets/cactus.png" alt="cactus" />
17+
</div>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎Source-Code/DinosaurGame/script.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const character = document.querySelector('.dino');
3+
const block = document.querySelector('.cactus');
4+
5+
const jump = () => {
6+
// Add class to initiate jump
7+
character.classList.add('animate');
8+
9+
// Remove class after animation duration (500ms)
10+
setTimeout(() => {
11+
character.classList.remove('animate');
12+
}, 500);
13+
};
14+
15+
// Trigger jump on spacebar press
16+
document.addEventListener('keydown', (event) => {
17+
if (event.code === 'Space') {
18+
jump();
19+
}
20+
});
21+
22+
// Check for collision
23+
const checkDead = setInterval(() => {
24+
const blockLeft = parseInt(
25+
window.getComputedStyle(block).getPropertyValue('left'),
26+
10,
27+
);
28+
const characterTop = parseInt(
29+
window.getComputedStyle(character).getPropertyValue('top'),
30+
10,
31+
);
32+
33+
// Check for collision
34+
if (blockLeft < 20 && blockLeft > 0 && characterTop >= 178) {
35+
block.style.animation = 'none';
36+
block.style.display = 'none';
37+
alert('Uh..Oh, you lose.');
38+
clearInterval(checkDead); // Stop checking for collisions
39+
}
40+
}, 100);
41+
});

‎Source-Code/DinosaurGame/style.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
background-color: rgb(27, 75, 133);
5+
}
6+
7+
.game-heading {
8+
text-align: center;
9+
font-family: Arial, Helvetica, sans-serif;
10+
color: rgb(0, 247, 255);
11+
text-shadow: 3px 2px rgb(128, 0, 0);
12+
font-size: 5em;
13+
margin: 40px 0;
14+
}
15+
16+
.game {
17+
width: 800px;
18+
height: 300px;
19+
margin: 60px auto;
20+
display: flex;
21+
border: 3px solid rgb(0, 247, 255);
22+
}
23+
24+
.cactus {
25+
height: 40px;
26+
object-fit: contain;
27+
position: relative;
28+
top: 261px;
29+
left: 670px;
30+
animation: block 3s infinite linear;
31+
}
32+
33+
.block {
34+
height: 40px;
35+
}
36+
37+
.character {
38+
height: 100px;
39+
}
40+
41+
.dino {
42+
height: 100px;
43+
object-fit: contain;
44+
position: relative;
45+
top: 200px;
46+
}
47+
48+
.animate {
49+
animation: character 500ms;
50+
}
51+
52+
@keyframes block {
53+
0% {
54+
left: 670px;
55+
}
56+
57+
100% {
58+
left: -60px;
59+
}
60+
}
61+
62+
@keyframes character {
63+
0% {
64+
top: 203px;
65+
}
66+
67+
30% {
68+
top: 140px;
69+
}
70+
71+
70% {
72+
top: 140px;
73+
}
74+
75+
100% {
76+
top: 203px;
77+
}
78+
}

0 commit comments

Comments
 (0)