Skip to content

Commit b8037ba

Browse files
tajulafreentajulafreen
authored
Merge pull request #34 from tajulafreen/Jump_Game
50Projects-HTML-CSS-JavaScript : Jump game
2 parents a3f93e2 + 4720609 commit b8037ba

File tree

4 files changed

+214
-0
lines changed

4 files changed

+214
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,17 @@ In order to run this project you need:
353353
</details>
354354
</li>
355355

356+
<li>
357+
<details>
358+
<summary>Dinosaur Game</summary>
359+
<p>This project is a simple browser-based "Jump Game" where players control a character that must jump over blocks to avoid collisions. It demonstrates the use of HTML, CSS, and JavaScript to create an interactive game with basic animations and collision detection. The player uses the spacebar to jump and scores points based on survival time. The game includes two types of moving obstacles, adding a layer of challenge.</p>
360+
<ul>
361+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/JumpGame/">Live Demo</a></li>
362+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/JumpGame">Source</a></li>
363+
</ul>
364+
</details>
365+
</li>
366+
356367
</ol>
357368

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

‎Source-Code/JumpGame/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
<title>Jump Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<h2>Jump Game</h2>
11+
<p id="co">Press space to jump</p>
12+
<div class="game">
13+
<div id="character"></div>
14+
<div id="block"></div>
15+
<div id="block2"></div>
16+
</div>
17+
<p>Score: <span id="scoreSpan"></span></p>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Source-Code/JumpGame/script.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const character = document.getElementById('character');
2+
const block = document.getElementById('block');
3+
const block2 = document.getElementById('block2');
4+
let counter = 0;
5+
6+
const jump = () => {
7+
if (character.classList.contains('animate')) return;
8+
character.classList.add('animate');
9+
setTimeout(() => {
10+
character.classList.remove('animate');
11+
}, 300);
12+
};
13+
14+
// eslint-disable-next-line no-unused-vars
15+
const checkDead = setInterval(() => {
16+
const characterTop = parseInt(
17+
window.getComputedStyle(character).getPropertyValue('top'),
18+
10,
19+
);
20+
const blockLeft = parseInt(
21+
window.getComputedStyle(block).getPropertyValue('left'),
22+
10,
23+
);
24+
if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
25+
block.style.animation = 'none';
26+
alert(`Game Over. Score: ${Math.floor(counter / 100)}`);
27+
counter = 0;
28+
block.style.animation = 'block 1s infinite linear';
29+
} else {
30+
counter += 1;
31+
document.getElementById('scoreSpan').innerText = Math.floor(counter / 100);
32+
}
33+
}, 10);
34+
35+
const add = () => {
36+
block2.classList.add('animate1');
37+
setTimeout(() => {
38+
block2.classList.remove('animate1');
39+
}, 9000);
40+
};
41+
42+
// Call the `add` function at regular intervals to animate block2
43+
setInterval(add, 7000);
44+
45+
// eslint-disable-next-line no-unused-vars
46+
const ka = () => {
47+
const characterTop = parseInt(
48+
window.getComputedStyle(character).getPropertyValue('top'),
49+
10,
50+
);
51+
const blockTop = parseInt(
52+
window.getComputedStyle(block2).getPropertyValue('left'),
53+
10,
54+
);
55+
if (blockTop < 20 && characterTop === 100) {
56+
block2.classList.remove('animate1');
57+
alert(`Game Over. Score: ${Math.floor(counter / 100)}`);
58+
counter = 0;
59+
}
60+
};
61+
62+
window.addEventListener('keydown', (event) => {
63+
if (event.keyCode === 32) {
64+
jump();
65+
}
66+
});

‎Source-Code/JumpGame/style.css

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
overflow: hidden;
5+
text-align: center;
6+
background-color: blue;
7+
}
8+
9+
.game {
10+
top: 40px;
11+
width: 500px;
12+
height: 200px;
13+
border: 1px solid black;
14+
margin: 10% auto;
15+
background-color: aqua;
16+
}
17+
18+
h2 {
19+
text-align: center;
20+
font-family: Arial, Helvetica, sans-serif;
21+
color: rgb(0, 247, 255);
22+
text-shadow: 3px 2px rgb(128, 0, 0);
23+
font-size: 5em;
24+
}
25+
26+
p {
27+
color: white;
28+
font-size: 20px;
29+
text-align: center;
30+
}
31+
32+
#character {
33+
width: 30px;
34+
height: 50px;
35+
background-color: red;
36+
position: relative;
37+
top: 150px;
38+
border-radius: 70%;
39+
}
40+
41+
.animate {
42+
animation: jump 0.3s linear;
43+
}
44+
45+
@keyframes jump {
46+
0% {
47+
top: 150px;
48+
}
49+
50+
30% {
51+
top: 100px;
52+
}
53+
54+
70% {
55+
top: 100px;
56+
}
57+
58+
100% {
59+
top: 150px;
60+
}
61+
}
62+
63+
#block {
64+
background-color: blue;
65+
width: 20px;
66+
height: 20px;
67+
position: relative;
68+
top: 130px;
69+
left: 500px;
70+
animation: block 1s infinite linear;
71+
}
72+
73+
#block2 {
74+
background-color: orange;
75+
width: 20px;
76+
height: 20px;
77+
position: relative;
78+
top: 30px;
79+
left: 500px;
80+
}
81+
82+
.animate1 {
83+
animation: blocke 1.5s infinite linear;
84+
}
85+
86+
@keyframes blocke {
87+
0% {
88+
left: 500px;
89+
}
90+
91+
100% {
92+
left: -20px;
93+
}
94+
}
95+
96+
@keyframes block {
97+
0% {
98+
left: 500px;
99+
}
100+
101+
100% {
102+
left: -20px;
103+
}
104+
}
105+
106+
#co {
107+
margin-bottom: 10px;
108+
font-weight: bold;
109+
}
110+
111+
.animate2 {
112+
animation: pa 1s ease-in-out;
113+
}
114+
115+
.show {
116+
opacity: 0;
117+
}

0 commit comments

Comments
 (0)