This repository has been archived by the owner on Dec 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
Dino-Game.js
120 lines (106 loc) · 2.74 KB
/
Dino-Game.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Dino Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f7f7f7;
}
#game {
width: 600px;
height: 150px;
margin: 50px auto;
border: 1px solid #000;
position: relative;
background-color: #f7f7f7;
}
#dino {
width: 40px;
height: 40px;
position: absolute;
bottom: 0;
left: 50px;
background-color: #666;
}
#cactus {
width: 20px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
background-color: #222;
}
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
<div id="score">0</div>
<script>
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
const scoreDisplay = document.getElementById("score");
let isJumping = false;
let score = 0;
document.addEventListener("keydown", jump);
function jump(event) {
if (event.keyCode === 32 && !isJumping) {
isJumping = true;
let jumpHeight = 0;
const jumpInterval = setInterval(() => {
if (jumpHeight >= 150) {
clearInterval(jumpInterval);
let fallInterval = setInterval(() => {
if (jumpHeight <= 0) {
clearInterval(fallInterval);
isJumping = false;
} else {
jumpHeight -= 20;
dino.style.bottom = jumpHeight + "px";
}
}, 20);
} else {
jumpHeight += 20;
dino.style.bottom = jumpHeight + "px";
}
}, 20);
}
}
function checkCollision() {
const dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
const cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 100) {
alert("Game Over! Your score: " + score);
score = 0;
scoreDisplay.innerHTML = score;
cactus.style.animation = "none";
}
}
setInterval(checkCollision, 10);
function updateScore() {
score++;
scoreDisplay.innerHTML = score;
}
let cactusSpeed = 10;
setInterval(() => {
const cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft <= -20) {
updateScore();
cactus.style.animation = "cactus 1s linear";
}
cactus.style.left = cactusLeft - cactusSpeed + "px";
}, 20);
</script>
</body>
</html>