Skip to content

Commit a429e13

Browse files
Parv-gugnaniParv-gugnani
committed
framework
1 parent ba09486 commit a429e13

File tree

3 files changed

+222
-0
lines changed

3 files changed

+222
-0
lines changed

‎Dino game/index.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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+
<style>
7+
#dino {
8+
width: 40px;
9+
height: 40px;
10+
background-color: green;
11+
position: absolute;
12+
bottom: 0;
13+
animation: jump 0.5s ease-in-out infinite;
14+
}
15+
#obstacle {
16+
width: 20px;
17+
height: 40px;
18+
background-color: red;
19+
position: absolute;
20+
bottom: 0;
21+
right: 0;
22+
}
23+
@keyframes jump {
24+
0%,
25+
100% {
26+
transform: translateY(0);
27+
}
28+
50% {
29+
transform: translateY(-40px);
30+
}
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div id="dino"></div>
36+
<div id="obstacle"></div>
37+
<script>
38+
const dino = document.getElementById("dino");
39+
const obstacle = document.getElementById("obstacle");
40+
let score = 0;
41+
let isJumping = false;
42+
43+
document.addEventListener("keydown", jump);
44+
45+
function jump(event) {
46+
if (event.keyCode === 32 && !isJumping) {
47+
isJumping = true;
48+
let jumpUp = 0;
49+
let jumpDown = 0;
50+
let jumpInterval = setInterval(() => {
51+
jumpUp += 20;
52+
dino.style.bottom = jumpUp + "px";
53+
if (jumpUp >= 200) {
54+
clearInterval(jumpInterval);
55+
let jumpDownInterval = setInterval(() => {
56+
jumpUp -= 20;
57+
dino.style.bottom = jumpUp + "px";
58+
if (jumpUp === 0) {
59+
clearInterval(jumpDownInterval);
60+
isJumping = false;
61+
}
62+
}, 30);
63+
}
64+
}, 30);
65+
}
66+
}
67+
68+
function checkCollision() {
69+
const dinoPosition = dino.getBoundingClientRect();
70+
const obstaclePosition = obstacle.getBoundingClientRect();
71+
72+
if (
73+
dinoPosition.left < obstaclePosition.left + obstaclePosition.width &&
74+
dinoPosition.left + dinoPosition.width > obstaclePosition.left &&
75+
dinoPosition.top < obstaclePosition.top + obstaclePosition.height &&
76+
dinoPosition.top + dinoPosition.height > obstaclePosition.top
77+
) {
78+
alert(`Game Over! Your score: ${score}`);
79+
location.reload();
80+
}
81+
}
82+
83+
function updateScore() {
84+
score++;
85+
if (score % 10 === 0) {
86+
alert(`Congratulations! Your score: ${score}`);
87+
}
88+
}
89+
90+
function moveObstacle() {
91+
const obstaclePosition = obstacle.getBoundingClientRect();
92+
if (obstaclePosition.right <= 0) {
93+
obstacle.style.right = "100%";
94+
updateScore();
95+
} else {
96+
obstacle.style.right = `${obstaclePosition.right - 5}px`;
97+
}
98+
checkCollision();
99+
}
100+
101+
setInterval(moveObstacle, 20);
102+
</script>
103+
</body>
104+
</html>

‎Dino game/script.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const dino = document.querySelector(".dino");
2+
const obstacle = document.querySelector(".obstacle");
3+
const scoreDisplay = document.querySelector(".score");
4+
5+
let isJumping = false;
6+
let score = 0;
7+
8+
document.addEventListener("keydown", jump);
9+
10+
function jump(event) {
11+
if (event.keyCode === 32 && !isJumping) {
12+
isJumping = true;
13+
14+
let jumpUp = 0;
15+
const jumpInterval = setInterval(() => {
16+
if (jumpUp >= 100) {
17+
clearInterval(jumpInterval);
18+
let fallDown = 0;
19+
const fallInterval = setInterval(() => {
20+
if (fallDown <= 0) {
21+
clearInterval(fallInterval);
22+
isJumping = false;
23+
} else {
24+
jumpUp -= 5;
25+
fallDown -= 5;
26+
dino.style.bottom = jumpUp + "px";
27+
}
28+
}, 20);
29+
} else {
30+
jumpUp += 5;
31+
dino.style.bottom = jumpUp + "px";
32+
}
33+
}, 20);
34+
}
35+
}
36+
37+
function updateScore() {
38+
score++;
39+
scoreDisplay.textContent = score;
40+
}
41+
42+
function checkCollision() {
43+
if (score > 0) {
44+
const dinoPosition = dino.getBoundingClientRect();
45+
const obstaclePosition = obstacle.getBoundingClientRect();
46+
47+
if (
48+
dinoPosition.left < obstaclePosition.left + obstaclePosition.width &&
49+
dinoPosition.left + dinoPosition.width > obstaclePosition.left &&
50+
dinoPosition.top < obstaclePosition.top + obstaclePosition.height &&
51+
dinoPosition.top + dinoPosition.height > obstaclePosition.top
52+
) {
53+
alert(`Game Over! Your score: ${score}`);
54+
location.reload(); // Reload the game
55+
}
56+
}
57+
}
58+
59+
function moveObstacle() {
60+
let obstaclePosition = 300;
61+
62+
const moveInterval = setInterval(() => {
63+
if (obstaclePosition <= -20) {
64+
clearInterval(moveInterval);
65+
updateScore();
66+
moveObstacle();
67+
} else {
68+
obstaclePosition -= 5;
69+
obstacle.style.right = obstaclePosition + "px";
70+
checkCollision();
71+
}
72+
}, 20);
73+
}
74+
75+
moveObstacle();

‎Dino game/style.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
background-color: #f7f7f7;
9+
}
10+
11+
.game-container {
12+
position: relative;
13+
width: 300px;
14+
height: 150px;
15+
border: 1px solid #000;
16+
overflow: hidden;
17+
}
18+
19+
.dino {
20+
position: absolute;
21+
bottom: 0;
22+
left: 30px;
23+
width: 30px;
24+
height: 30px;
25+
background-color: #666;
26+
}
27+
28+
.obstacle {
29+
position: absolute;
30+
bottom: 0;
31+
right: 0;
32+
width: 20px;
33+
height: 30px;
34+
background-color: #333;
35+
}
36+
37+
.score {
38+
position: absolute;
39+
top: 10px;
40+
right: 10px;
41+
font-size: 24px;
42+
font-weight: bold;
43+
}

0 commit comments

Comments
 (0)